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.

Normalie

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

Surefire

Updated the question with some sample code. Tried your suggestion but not worked. I believe I did it wrong :) – Normalie

Bruno, is you page public? I'll be able to try to create a working example if you share its url with me – Surefire

AlexanderMos thanks, but I prefer to try to implement myself. I'll take your answer and share with my colleague and try again. – Normalie

I tried your code but VS returns TypeError: tc.hover is not a function. await tc 39 | //.hover(home.firstPromoImg) > 40 | .hover(home.logoLnk) 41 | await tc 42 | .typeText(home.search, product.productName) 43 | .click(home.firstProductImg) – Normalie

If you use this way you can't use chains. Instead of await tc.hover('el1').hover('el2') you have to write await tc.hover('el1'); await tc.hover('el2') – Surefire

Same error, probably I'm doing something wrong. I updated the question with more details on how I'm coding the test (not including the of your answer). – Normalie

You can try to use another approach. Is it possible to prevent popup dialog programmatically? It possible you can set some cookie before test start which mean 'Don't show a popup'? If so, you can use ClientFunction for this. – Surefire