Issue listening for custom event via puppeteer

Question

I am currently working on a GitLab CI test environment and I have a test harness which we use to test our SDK. I have gone about setting up a custom event that is fired on the page which designates the end of the test run. In my puppeteer implementation I am wanting to listen for this custom event "TEST_COMPLETE".

I have not been successful in getting this to work so I figured I would at least make sure the custom-event.js example on the puppeteer repo worked and there too I am not seeing what I believe I should be getting. I cloned the main repo below and performed an npm install. When I execute the js test below, setting headless:false and don't close the browser, I do not see any log in console that shows any custom event being fired.

It is my understanding that I should see some console event message with 'fired' and then 'app-ready' event and info, but this is not the case. Even if I interact with the page I don't see anything outside of some 'features_loaded' and 'features_unveil' logs.

https://github.com/puppeteer/puppeteer/blob/main/examples/custom-event.js

Anyone able to get the expected behavior on this code today? Not sure if this worked previously and has broke since or I am just doing something wrong. Any info would be of great help, Thanks!

Answer 1

Not sure if this is what you need, but I can get the message 'TEST_COMPLETE fired.' in Node.js console with this simplified code (puppeteer 8.0.0):

import puppeteer from 'puppeteer';

const browser = await puppeteer.launch();

try {
  const [page] = await browser.pages();

  await page.goto('https://example.org/');

  await page.exposeFunction('onCustomEvent', async (type) => {
    console.log(`${type} fired.`);
    await browser.close();
  });

  await page.evaluate(() => {
    document.addEventListener('TEST_COMPLETE', (e) => {
      window.onCustomEvent('TEST_COMPLETE');
    });

    document.dispatchEvent(new Event('TEST_COMPLETE'));
  });
} catch (err) { console.error(err); }