TestCafe에서 'WebComponentsReady'이벤트를 기다리는 가장 좋은 방법은 무엇입니까?

Question

TestCafe 테스트를 실행하기 전에 페이지의 웹 구성 요소가 업그레이드 될 때까지 기다려야합니다. 즉, 테스트를 실행하기 전에 WebComponentsReady 이벤트를 기다립니다. 이 작업을 수행하는 가장 좋은 방법은 무엇입니까?

Answer 1

이벤트가 발생하면 TestCafe가 페이지의 모든 동작을 실행하기 시작합니다. 보시다시피 WebComponentsReady 이벤트는 DOMContentReady 전에 제기 될 수 있습니다. TestCafe는 ClientFunction를 사용하여 브라우저에서 일부 이벤트를 기다릴 수 있습니다 :

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

await waitForWebComponentsReady(); 

그러나, TestCafe가 WebComponentReady 이벤트가 발생하기 전에이 코드가 실행된다는 것을 보장 할 수는 없습니다. 따라서이 약속은 해결되지 않습니다.

해결 방법으로 필요한 웹 구성 요소가로드되었는지 확인하는 다른 방법을 찾을 수 있습니다. 예를 들어, 당신은 몇 가지 요소가 페이지에 표시되는지 확인할 수 있습니다

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