Are google devs just wrong with their Puppeteer code: custom-event.js?

Question

When I try the custom-event.js on https://try-puppeteer.appspot.com/ no response is displayed on the log. Surely this demo can be improved by showing some result of the code run ?!?

I've seen the popular answers on Puppeteer: How to listen to object events and the much less appreciated https://stackoverflow.com/a/66713946/2455159 (0 votes!).

NONE OF THE FIRST EXAMPLES work on try-puppeteer and the SECOND ONE DOES !

I get the idea,

First, you have to expose a function that can be called from within the page. Second, you listen for the event and call the exposed function and pass on the event data.

-- but that snippet didn't work (for me ) applied to the https://www.chromestatus.com/features custom event.

What's the bottom line for observing custom events with puppeteer?

Answer 1

There is a difference between the first two examples and the last one: the first ones just illustrate the subscription on an event, but they do not fire this event, so there is no observable reaction there (this can be confusing as a reader would expect the sites to fire the events but they do not). The third example does fire the event.

You can get the first two examples observable even on https://try-puppeteer.appspot.com/ if you add this lines accordingly.

await page.evaluate(() => { document.dispatchEvent(new Event('app-ready')); });

await page.evaluate(() => { document.dispatchEvent(new Event('status')); });

Answer 2

Ok, cracked it, so that a single or some multiple events are detected by Puppeteer. A couple things weren't apparent to me about how puppeteer works:

• puppeteer page ≈ a browser tab
• that js can be attached to that 'tab'
• puppeteer must browse the test url after setup of the 'tab' (timing is critical)

So now combining previous answers, in Node or on try-puppeteer:

// in node wrap with an asynch iife 

const browser = await puppeteer.launch();
const page = await browser.newPage();
 
// Expose a handler to the page
await page.exposeFunction('onCustomEvent', ({ type, detail }) => {
console.log(`Event fired: ${type}, detail: ${detail}`);
});

// listen for events of type 'status' and
// pass 'type' and 'detail' attributes to our exposed function
await page.evaluateOnNewDocument(() => {
  window.addEventListener('status', ({ type, detail }) => {
  window.onCustomEvent({ type, detail });
  });
});

await page.goto('https://puppet.azurewebsites.net/puppeteer/soEvntSingle.html');

// await page.goto('https://puppet.azurewebsites.net/puppeteer/soEvnt.html');

// await page.waitFor(3000);
 
await browser.close();

Detects the events fired from that webpage. Where with devTools you'll see the event is fired by a CustomEvent.

<script>

var event = new CustomEvent('status', { detail: 'ok' });
      
window.addEventListener('status', function(e) {
  console.log('status: ', e.detail);
});

window.dispatchEvent(event);

// setTimeout(window.dispatchEvent, 1000, event);
    
</script>

Switching on commented lines and commenting out respective lines gets Puppeteer to monitor for repeated firing of an event. Then page soEvnt.html fires the CustomEvent 'status' event every second ad nauseam. The Puppeteer test has to terminate at some stage, to report to the terminal (or test infrastructure like Jest) so monitoring is set for 3 seconds.

!Google you can come to me for help any time!