waitFor custom event feature request

There is no API at the moment to wait for a custom event in the node context, right?

Example:

await page.goto('gridwithimages.com', {waitUntil: 'grid-load'});
await page.screenshot();

I only found custom-event.js, which is quite verbose and doesn’t await until the event is fired anyway.

[john-doherty]

I created a method to simplify this await waitForEvent('app-ready', 10)

/**
 * Wait for the browser to fire an event (including custom events)
 * @param {string} eventName - Event name
 * @param {integer} seconds - number of seconds to wait.
 * @returns {Promise} resolves when event fires or timeout is reached
 */
async function waitForEvent(eventName, seconds) {

    seconds = seconds || 30;

    // use race to implement a timeout
    return Promise.race([

        // add event listener and wait for event to fire before returning
        page.evaluate(function(eventName) {
            return new Promise(function(resolve, reject) {
                document.addEventListener(eventName, function(e) {
                    resolve(); // resolves when the event fires
                });
            });
        }, eventName),

        // if the event does not fire within n seconds, exit
        page.waitFor(seconds * 1000)
    ]);
}

[joao-conde]

I created a method to simplify this await waitForEvent('app-ready', 10)

/**
 * Wait for the browser to fire an event (including custom events)
 * @param {string} eventName - Event name
 * @param {integer} seconds - number of seconds to wait.
 * @returns {Promise} resolves when event fires or timeout is reached
 */
async function waitForEvent(eventName, seconds) {

    seconds = seconds || 30;

    // use race to implement a timeout
    return Promise.race([
        page.evaluate(function(eventName) {
            return new Promise(function(resolve, reject) {
                document.addEventListener(eventName, function(e) {
                    resolve(); // resolves when the event fires
                });
            });
        }, eventName),

        page.waitFor(seconds * 1000)
    ]);
}

This is very useful, could this be made part of the Puppeteer API?

I refactored to this:

async function waitForEvent(page, event, timeout = 5000) {
     return Promise.race([
         page.evaluate(
             event => new Promise(resolve => document.addEventListener(event, resolve, { once: true })),
             event
         ),
         page.waitForTimeout(timeout)
     ]);
}