Checking if an element exists resolves immediately without waiting for timeout

[nermin99]

What is your Scenario?

I have a user flow where, depending on the input, a new element might appear, and if so I need to click on the element in order to continue. So I tried awaiting $element.exists in an if, but it just returns/resolves immediately without waiting for the page to render.

I'd like a way to wait for an element that might appear.

What is the Current behavior?

if (await $element.exists) // resolves immediately

What is the Expected behavior?

if (await $element.exists) // resolves with built-in wait mechanism https://testcafe.io/documentation/402827/guides/advanced-guides/built-in-wait-mechanisms

What is the public URL of the test page? (attach your complete example)

https://google.com

What is your TestCafe test code?

await t.click($buttonThatLoadsPageWithNewConditionalContent)

let textThatMaybeExists = ''
if (await $element.exists) {
    textThatMaybeExists = await $element.textContent
    // ...
}

Your complete configuration file

No response

Your complete test report

No response

Screenshots

No response

Steps to Reproduce

TestCafe version

3.6.0

Node.js version

21.7.1

Command-line arguments

testcafe chrome

Browser name(s) and version(s)

No response

Platform(s) and version(s)

No response

Other

No response

[PavelMor25]

Hello @nermin99,

Please try the solution from this thread and let us know your results

[nermin99]

Thanks @PavelMor25

Replacing await $element.exists with await $element.visible worked as expected.

But how come .visible isn't in your documentation?
https://testcafe.io/documentation/402666/reference/test-api/selector

[PavelMor25]

Hello,

This property belongs to element-based DOMNodeState objects, not to the Selector object itself.

Thank you for your report.