Quelle est la meilleure façon d'attendre l'événement 'WebComponentsReady' dans TestCafe?

Question

Je souhaite attendre que les composants Web de la page soient mis à niveau avant d'exécuter les tests TestCafe (en d'autres termes, attendez l'événement WebComponentsReady avant d'exécuter les tests). Quelle est la meilleure façon de procéder?

Answer 1

TestCafe commence à exécuter une action sur la page après que l'événement DOMContentReady a été déclenché. Comme je vois, l'événement WebComponentsReady peut être soulevé avant DOMContentReady. TestCafe vous permet d'attendre certains événements dans le navigateur en utilisant ClientFunction:

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

await waitForWebComponentsReady(); 

Cependant, notez que TestCafe ne peut pas garantir que ce code sera exécuté avant l'événement WebComponentReady est élevé. Par conséquent, cette promesse ne sera pas résolue. En tant que solution, vous pouvez trouver un autre moyen d'identifier si le composant Web requis est chargé. Par exemple, vous pouvez vérifier qu'un élément est visible sur la page:

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

Pendant ce temps, TestCafe a une suggestion fonction de add the capability to execute a custom script before page initialization scripts. Vous serez en mesure d'utiliser un code comme celui-ci lorsque la fonctionnalité est implémentée:

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