Click Selector Not always works in Before callback.

asfixia commented 5 years ago

What is your Test Scenario?

I need to click in a button to close a panel with a tutorial when someone new enters in the site.

What is the Current behavior?

In my code i use a click at a given selector which returns that the elements doesn't exists in the dom, but using document.getElementsByClassName it exists.

What is the Expected behavior?

Click in the given link/button.

What is your web application and your TestCafe test code?

My test code is in: https://github.com/asfixia/Testcafe---issue-example

The site that i want to debug is: https://maps.csr.ufmg.br

Your complete test report:

----
Chrome 71.0.3578 / Windows 10 0.0.0
DEBUGGER PAUSE ON FAILED TEST:
- Error in test.before hook -
The specified selector does not match any element in the DOM tree.

Browser: Chrome 71.0.3578 / Windows 10 0.0.0

34 |
35 |export async function closeIntroJs(t) {
36 |    const introJsContainer = Selector('.introjs-tooltip');
37 |    if (introJsContainer.exists) {
38 |        await t
> 39 |            .click(Selector('.introjs-skipbutton'))
40 |    }
41 |}
42 |
43 |export function getLeftLayerPanel() {
44 |    return Selector("#LayerContainer");

at click (C:\Export\GeoExplorer\spec\testcafe\MapSelectors.js:39:14)
at closeIntroJs (C:\Export\GeoExplorer\spec\testcafe\MapSelectors.js:41:54)
----

Steps to Reproduce:

Just run the testcafe with the file "TimelinePanelTest.js"

Your Environment details:

testcafe version: 0.20.5
node.js version: v10.14.2
command-line arguments: testcafe "chrome --incognito" TimelinePanelTest.js --debug-on-fail
browser name and version: Chrome 71.0.3578
platform and version: Windows 10 0.0.0
other:

AlexKamaev commented 5 years ago

I was not able to reproduce the issue. However, I found a mistake in the following code:

export async function closeIntroJs(t) {
    const introJsContainer = Selector('.introjs-tooltip');
    if (introJsContainer.exists) {
        await t.click(Selector('.introjs-skipbutton'))
    }
}

The Selector method returns a Promise, so you can not use its exists property. I recommend you refer the following article https://devexpress.github.io/testcafe/documentation/test-api/built-in-waiting-mechanisms.html#waiting-for-elements-when-evaluating-selectors

After that you can modify your closeIntroJs function in the following manner:

export async function closeIntroJs (t) {
    const introJsSnapshot = await Selector('.introjs-tooltip', { timeout: 20000 })();

    if (introJsSnapshot)
        await t
            .click(Selector('.introjs-skipbutton'));
}

lock[bot] commented 5 years ago

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs or feature requests. For TestCafe API, usage and configuration inquiries, we recommend asking them on StackOverflow.

DevExpress / testcafe