Conditional test to bypass pop up with Testcafe

Question

I'm using testcafe to run some tests in an ecommerce page, but a random pop up is breaking the test. When it appears on the window, the Testcafe is unable to click on the next selector and move forward with the test, and then fail.

Currently, I'm using .js files to hold the selectors, like:

    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...
}

Then, I import them to another .js and declare the tests like functions:

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...}

Finally, I'm executing another.js where I declare the tests using test command:

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);
});

Since it is a random event (it happens in different moments, like sometimes in the product page and sometimes in the checkout page), is possible to use some conditional test just bypass this popup, like if the pop up 'x' appears on the screen, click on 'close popup' and continue with test, else continue with the test.

I search in testcafe Test API and have not found such a function.

I'm using testcafe 0.17.0.

Answer 1

TestCafe doesn't provide an API for that. To handle you case, you can check whether the popup appears before each action. Optionally, to make your code cleaner, you can wrap TestCafe API actions in the following way:

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