TestCafeで 'WebComponentsReady'イベントを待つ最善の方法は何ですか？

Question

TestCafeテストを実行する前に、ページ内のWebコンポーネントがアップグレードされるのを待ちます（つまり、テストを実行する前に、WebComponentsReadyイベントを待つ）。これを行う最善の方法は何ですか？

Answer 1

イベントが発生した後、TestCafeはページ上の任意のアクションの実行を開始します。ご覧のとおり、イベントは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(); 
    });