7

When I need to wait for an element to become visible I can simple call the selector as a function like this:

await element.with({ visibilityCheck: true })();

But how can I wait for an element to disappear?

Alex Skorkin
  • 4,264
  • 3
  • 25
  • 47
Adam Genshaft
  • 756
  • 10
  • 22

2 Answers2

16

To wait for an element to disappear you can use our built-in waiting mechanism for assertions. Please see the documentation for more information on how it works.

import { Selector } from 'testcafe';

fixture `fixture`
    .page `http://localhost/testcafe/`;

test('test 2', async t => {
    //step 1

    //wait for the element to disappear (assertion with timeout)
    await t.expect(Selector('element').exists).notOk({ timeout: 5000 });

    //next steps
});

Or you can use the ClientFunction:

import { ClientFunction } from 'testcafe';

fixture `fixture`
    .page `http://localhost/testcafe/`;

const elementVisibilityWatcher = ClientFunction(() => {
    return new Promise(resolve => {
        var interval = setInterval(() => {
            if (document.querySelector('element'))
                return;

            clearInterval(interval);
            resolve();
        }, 100);
    });
});

test('test 1', async t => {
    //step 1

    //wait for the element to disappear
    await elementVisibilityWatcher();

    //next steps
});
Vladimir A.
  • 2,202
  • 2
  • 10
  • 28
  • What would be a the 'reverse' function like the one above. So, instead of 'disappear', what about waiting for an element to 'appear'? – TallKU Aug 12 '19 at 16:52
  • 2
    @TallKU, there's an example for that in their documentation: https://devexpress.github.io/testcafe/documentation/test-api/built-in-waiting-mechanisms.html – icfantv Aug 12 '19 at 19:39
  • you are 100% correct, but that ALWAYS has a timeout limit. My application doesn't always 'behave' the same. So, one test action might take 10 seconds the first run, but then the next run it takes 40 seconds. I do not always want to have to wait 40 seconds (since that is the observed time I have noticed). I'd rather just wait for the element to 'appear' or 'disappear'. I have other code that kills the test of it runs longer than a certain time. So, I want the code to be 'dynamic' in a way that it waits , but not using a pre-defined timeout within the test cafe code – TallKU Aug 12 '19 at 20:09
  • 3
    The `timeout` parameter defines a limit of waiting. The condition is checked with an interval. So you can set the `timeout` to 50 seconds, but an action will be performed when the condition is met. If the condition is executed after 10 seconds, the `timeout` will be ignored. – Artem Aug 14 '19 at 08:21
1

This do the job when you awaiting an element to receive display:none; ::

await browser.expect( Selector(".m-loader").visible ).notOk({ timeout: 30000 });
Biosonic
  • 76
  • 3