web-dev-qa-db-ja.com

Puppeteer：オブジェクトイベントをリッスンする方法

ページはめ込みオブジェクトによってディスパッチされたイベントをリッスンすることは可能ですか？私が行くページにこのコードがあるとしましょう：

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

ウィンドウオブジェクト（またはそのほかのJSオブジェクト）によってディスパッチされたイベントをリッスンできるようにしたいのですが。 Puppeteerでこれを行うにはどうすればよいですか？

javascriptgoogle-chromeheadlesspuppeteer
10
Vic

まず、ページ内から呼び出すことができる関数を公開する必要があります。次に、イベントをリッスンし、公開された関数を呼び出して、イベントデータを渡します。

// 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(/* ... */);

（指定したコードのように）ページでイベントstatusが発生した場合、Node.jsアプリケーションのコンソールに記録されているのがわかります。

コメントに投稿されているように、より複雑な例は puppeteer examples にあります。

7
Thomas Dondorf

カスタムイベントを実際に待機する場合は、この方法で行うことができます。

const page = await browser.newPage();

/**
  * Attach an event listener to page to capture a custom event on page load/navigation.
  * @param {string} type Event name.
  * @return {!Promise}
  */
function addListener(type) {
  return page.evaluateOnNewDocument(type => {
    // here we are in the browser context
    document.addEventListener(type, e => {
      window.onCustomEvent({ type, detail: e.detail });
    });
  }, type);
}

const evt = await new Promise(async resolve => {
  // Define a window.onCustomEvent function on the page.
  await page.exposeFunction('onCustomEvent', e => {
    // here we are in the node context
    resolve(e); // resolve the outer Promise here so we can await it outside
  });
  await addListener('status'); // setup listener for "status" custom event on page load
  await page.goto('http://example.com');  // N.B! Do not use { waitUntil: 'networkidle0' } as that may cause a race condition
});

console.log(`${evt.type} fired`, evt.detail || '');

https://github.com/GoogleChrome/puppeteer/blob/master/examples/custom-event.js の例に基づいて構築

1
mflodin