条件测试绕过Testcafe弹出窗口

Question

我正在使用testcafe在电子商务页面中运行一些测试，但是随机弹出会破坏该测试。当它出现在窗口中时，Testcafe无法单击下一个选择器并继续进行测试，然后失败。

目前，我正在使用.js文件来保存选择器，例如：

    import { Selector } from 'testcafe';

    export default class Checkout {
        constructor () {
            //address
            this.addressName = Selector('input#CC-checkoutCepAddressBook-sfirstname');
            this.addressLastname = Selector('input#CC-checkoutCepAddressBook-slastname');

//Rest of selectors...
}

然后，将它们导入另一个.js并声明测试，例如函数：

import { ClientFunction } from 'testcafe';
import { Selector } from 'testcafe';
import Fixture from '../../../DesktopModel/Chrome/fixture.js';
import Home from '../../../DesktopModel/Chrome/home.js';
import Cart from '../../../DesktopModel/Chrome/cart.js';
...
const fixtureUrlBase = new Fixture();
const home = new Home();
const pdp = new Pdp();
const cart = new Cart();
...

export async function checkoutLoggedBoleto(t) {

await t
    .click(pdp.addToCartBtn)
    .click(home.finishOrderBtn)
    .click(cart.finishOrderBtn)

    //Rest of the test actions...}

最后，我正在执行another.js，在其中使用测试命令声明测试：

test
    .before(async t => {
        await login(t);
    })

('Desktop - User Login + Checkout with Invoice', async t => {

    // Function Login  => Search => PDP => Checkout with Invoice 
    await checkoutLoggedBoleto(t);
});

由于这是随机事件（它发生在不同的时间，例如有时在产品页面中，有时在结帐页面中），因此可以绕过此弹出窗口使用一些条件测试，例如弹出窗口“ x”出现在屏幕上，单击“关闭弹出窗口”并继续测试，否则继续测试。

我在testcafe 测试API中搜索，但未找到这样的功能。

我正在使用testcafe 0.17.0。

Answer 1

TestCafe 不为此提供 API。为了处理您的情况，您可以检查弹出窗口是否出现在每个操作之前。或者，为了使代码更简洁，您可以通过以下方式包装 TestCafe API 操作：

import { t, Selector } from 'testcafe';

const closePopupBtn = Selector('.close-popup');

async function checkPopup () {
    if(await closePopupBtn.exists)
        await t.click(closePopupBtn);
}

const tc = {
    click: async selector => {
        await checkPopup();
        await t.click(selector);
    }
}

test('my test', async () => {
    await tc.click('.btn1');
    await tc.click('.btn2');
});