testing - 在 TestCafe 中等待 'WebComponentsReady' 事件的最佳方法是什么？

Question

我想在运行任何 TestCafe 测试之前等待页面中的 Web 组件升级(换句话说，在运行测试之前等待 WebComponentsReady 事件)。执行此操作的最佳方法是什么？

Answer 1

TestCafe 在 DOMContentReady 事件引发后开始在页面上执行任何操作。如我所见，可以在 DOMContentReady 之前引发 WebComponentsReady 事件。 TestCafe 允许您使用 ClientFunction 在浏览器中等待一些事件:

const waitForWebComponentsReady = ClientFunction(() => {
    return new Promise(resolve => {
        window.addEventListener('WebComponentsReady', resolve);
    });
});

await waitForWebComponentsReady();

但是，请注意 TestCafe 不能保证这段代码会在 WebComponentReady 事件引发之前执行。因此，这个 Promise 不会被解决。

作为解决方案，您可以找到另一种方法来确定是否加载了所需的 Web 组件。例如，您可以检查某些元素在页面上是否可见:

await t.expect(Selector('some-element').visible).ok();

与此同时，TestCafe 对add the capability to execute a custom script before page initialization scripts 提出了一个功能建议.实现该功能后，您将能够使用如下代码:

import { ClientFunction } from 'testcafe';

const initScript = `window.addEventListener('WebComponentsReady', () => window.WebComponentsLoaded = true);`;

fixture `My Fixture`
    .page `http://example.com`
    .addScriptToEachPage(initScript)
    .beforeEach(async t => {
        await t.expect(ClientFunction(() => window.WebComponentsLoaded)()).ok();
    });