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

Question

我想在运行任何TestCafe测试之前等待页面中的Web组件升级（换句话说，在运行测试之前等待WebComponentsReady事件）。做这个的最好方式是什么？

Answer 1

在引发DOMContentReady事件后，TestCafe开始在页面上执行任何操作。正如我所看到的，WebComponentsReady事件可以在DOMContentReady之前提出。 TestCafe让你等待通过ClientFunction在浏览器中的一些事件：

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

await waitForWebComponentsReady(); 

但是，请注意TestCafe不能保证被提出的WebComponentReady事件之前该代码就会被执行。因此，这个承诺不会得到解决。

作为解决方案，您可以找到另一种方法来确定是否加载了所需的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(); 
    });