I have an issue with playwright's page.waitForEvent():
I'd like my tests to wait for a specific event fired by our app after navigating to a different page after clicking a link. There is a component on a newly-navigated-to page that takes time to load and we fire a custom event that signals that it's ready to be used.
The event firing looks like this:
const event = new Event('componentReady')
window.dispatchEvent(event)
In my playwright tests I'm trying to wait for this event, as per documentation:
const [frame, _] = await Promise.all([
this.page.waitForEvent('componentReady'),
this.page.locator('button').click(),
])
The problem is that my tests hang and eventually timeout at this page.waitForEvent() without detecting my 'componentReady' event. Has anyone experimented with page.waitForEvent() before? Is there something wrong I'm doing here?
Currently my tests just wait for some predefined time, but with different network conditions and on different hardware it's sometimes too much of a wait and it wastes time, or too little of a wait resulting in failing tests, since stuff has not loaded yet. Obviously this is not ideal and I'd like to avoid this by use of proper signaling.
Note: I've verified that event is actually being fired, making a listener that prints to console.
window.addEventListener('componentReady', (e) => { console.log('Fired event "componentReady"', e) })
Indeed, when playwright clicks on the button, I can see that the message below is being printed to console. I've even injected the listener above during test runtime via page.evaluate() and if I pause test execution and open DevTools -> Console of the browser that playwright is running in, I also can see console output.
I can't seem to find any other reports of issues with page.waitForEvent() so I will be grateful for any advice or pointers to resources that may help.