Events
Playwright allows listening to various types of events happening in the web page, such as network requests, creation of child pages, dedicated workers etc. There are several ways to subscribe to such events:
Waiting for event#
Most of the time, scripts will need to wait for a particular event to happen. Below are some of the typical event awaiting patterns.
Wait for a request with the specified url:
// Note that Promise.all prevents a race condition// between clicking and waiting for the request.const [request] = await Promise.all([ page.waitForRequest('**/*logo*.png'), // This action triggers the request page.goto('https://wikipedia.org')]);console.log(request.url());Wait for popup window:
// Note that Promise.all prevents a race condition// between clicking and waiting for the popup.const [popup] = await Promise.all([ page.waitForEvent('popup'), // This action triggers the popup page.evaluate('window.open()')]);await popup.goto('https://wikipedia.org');Adding/removing event listener#
Sometimes, events happen in random time and instead of waiting for them, they need to be handled. Playwright supports traditional language mechanisms for subscribing and unsubscribing from the events:
page.on('request', request => console.log(`Request sent: ${request.url()}`));const listener = request => console.log(`Request finished: ${request.url()}`);page.on('requestfinished', listener);await page.goto('https://wikipedia.org');
page.off('requestfinished', listener);await page.goto('https://www.openstreetmap.org/');Adding one-off listeners#
If certain event needs to be handled once, there is a convenience API for that:
page.once('dialog', dialog => dialog.accept("2021"));await page.evaluate("prompt('Enter a number:')");