Was ist der beste Weg für ‚WebComponentsReady‘ Veranstaltung in TestCafe warten?

Question

Ich möchte für Web-Komponenten auf der Seite vor dem Ausführen alle TestCafe Tests ein Upgrade warten (Mit anderen Worten, warten Sie auf WebComponentsReady Ereignis bevor die Tests ausgeführt wird). Was ist der beste Weg, dies zu tun?

Answer 1

TestCafe startet eine Aktion auf der Seite ausgeführt werden, nachdem das DOMContentReady Ereignis ausgelöst wird. Wie ich sehe, kann das WebComponentsReady Ereignis vor DOMContentReady angehoben werden. TestCafe ermöglicht es Ihnen, für einige Ereignisse im Browser zu warten, von ClientFunction mit:

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

await waitForWebComponentsReady(); 

Beachten Sie jedoch, dass TestCafe nicht garantieren können, dass dieser Code vor dem Ereignis ausgelöst wird WebComponentReady ausgeführt wird. Daher wird dieses Versprechen nicht gelöst.

Als Lösung können Sie einen anderen Weg finden, um festzustellen, ob die erforderliche Web Component geladen wird. Zum Beispiel können Sie überprüfen, ob ein Element auf der Seite sichtbar ist:

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

Inzwischen TestCafe haben eine Idee für zu add the capability to execute a custom script before page initialization scripts. Sie können Code wie folgt verwenden, wenn das Feature implementiert:

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