如何等待一个元素在 TestCafe 中消失？答案

【问题标题】：How to wait for an element to disappear in TestCafe?如何等待一个元素在 TestCafe 中消失？
【发布时间】：2019-03-03 15:31:31
【问题描述】：

当我需要等待一个元素变得可见时，我可以简单地将选择器调用为这样的函数：

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

但是我怎样才能等待一个元素消失呢？

【问题讨论】：

标签： testing automation automated-tests e2e-testing testcafe

【解决方案1】：

要等待元素消失，您可以使用我们内置的断言等待机制。请参阅the documentation 了解有关其工作原理的更多信息。

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

或者你可以使用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
});

【讨论】：

什么是像上面那样的“反向”功能。那么，与其“消失”，不如等待一个元素“出现”？
@TallKU，在他们的文档中有一个例子：devexpress.github.io/testcafe/documentation/test-api/…
你是 100% 正确的，但总是有超时限制。我的应用程序并不总是“表现”相同。因此，一个测试操作第一次运行可能需要 10 秒，但下一次运行需要 40 秒。我并不总是希望等待 40 秒（因为这是我注意到的观察时间）。我宁愿等待元素“出现”或“消失”。我有其他代码会杀死它的测试运行时间超过一定时间。所以，我希望代码以等待的方式“动态”，但不使用测试咖啡馆代码中的预定义超时
timeout 参数定义了等待的限制。使用间隔检查条件。所以你可以将timeout设置为50秒，但是当条件满足时会执行一个动作。如果条件在 10 秒后执行，timeout 将被忽略。

【解决方案2】：

当你等待一个元素接收 display:none; ::

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

【讨论】：