使用 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 命令声明测试：

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”出现在屏幕上，点击“关闭弹出窗口”并继续测试，否则继续测试。

我在testcafeTest 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');
});