Puppeteer – 事件处理

侦听事件

Page类通过继承Node.js的EventEmitter类发送事件,这表明node.js中侦听事件的方法都能使用,例如ononceremoveListener等等。

以下是支持的事件列表:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // 在解析DOM并准备就绪时发出(无需等待资源)
  page.once('domcontentloaded', () => console.info('√ DOM is ready'));

  // 当页面完全加载时发出
  page.once('load', () => console.info('√ Page is loaded'));

  // 当页面附加一个frame时发出
  page.on('frameattached', () => console.info('√ Frame is attached'));

  // 当页面内的frame导航到新URL时发出
  page.on('framenavigated', () => console.info('➞ Frame is navigated'));

  // 当页面中的脚本使用“console.timeStamp”时发出
  page.on('metrics', data => console.info(`➞ Timestamp added at ${data.metrics.Timestamp}`));

  // 当页面中的脚本使用“console”时发出
  page.on('console', message => console[message.type()](`➞ ${message.text()}`));

  // 当页面发生错误事件时发出(例如,页面崩溃)
  page.on('error', error => console.error(`✖ ${error}`));

  // 当页面中的脚本有未捕获异常时发出
  page.on('pageerror', error => console.error(`✖ ${error}`));

  // 当页面中的脚本使用“alert”、“prompt”、“confirm”或“beforeunload”时发出
  page.on('dialog', async dialog => {
    console.info(`➞ ${dialog.message()}`);
    await dialog.dismiss();
  });

  // 当打开属于浏览器环境/上下文的新页面时发出
  page.on('popup', () => console.info('➞ New page is opened'));

  // 当页面产生请求时发出
  page.on('request', request => console.info(`➞ Request: ${request.url()}`));

  // 当页面生成的请求失败时发出
  page.on('requestfailed', request => console.info(`✖ Failed request: ${request.url()}`));

  // 当页面生成的请求成功完成时发出
  page.on('requestfinished', request => console.info(`➞ Finished request: ${request.url()}`));

  // 当接收到响应时发出
  page.on('response', response => console.info(`➞ Response: ${response.url()}`));

  // 当页面创建专用的网络工作者时发出
  page.on('workercreated', worker => console.info(`➞ Worker: ${worker.url()}`));

  // 当页面销毁专用的网络工作者时发出
  page.on('workerdestroyed', worker => console.info(`➞ Destroyed worker: ${worker.url()}`));

  // 当页面分离frame时发出
  page.on('framedetached', () => console.info('√ Frame is detached'));

  // 关闭页面后发出
  page.once('close', () => console.info('√ Page is closed'));

  await page.goto('https://www.qikegu.com');

  await browser.close();
})();

输出:

G:\qikegu\puppeteer>node puppeteer_demo9.js
➞ Request: https://www.qikegu.com/
➞ Response: https://www.qikegu.com/
➞ Frame is navigated
➞ Request: https://www.qikegu.com/wp-includes/css/dist/block-library/style.min.css?ver=5.0.4
➞ Request: https://www.qikegu.com/wp-content/plugins/wedocs/assets/css/frontend.css?ver=1.4.1
➞ Request: https://cdn.jsdelivr.net/npm/katex/dist/katex.min.css?ver=0.10.0-beta
➞ Request: https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css?ver=0.7.4
➞ Request: https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css?ver=5.0.4
➞ Request: https://www.qikegu.com/wp-content/themes/bulmawp/style.css?ver=5.0.4
➞ Request: https://www.qikegu.com/wp-content/themes/bulmawp/assets/css/prism.css?ver=5.0.4
➞ Request: https://www.qikegu.com/wp-content/themes/bulmawp/assets/js/prism.js?ver=5.0.4
➞ Request: https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
➞ Request: https://www.qikegu.com/wp-content/uploads/2019/03/logo.png
➞ Request: https://www.qikegu.com/wp-includes/js/wp-emoji-release.min.js?ver=5.0.4
➞ Response: https://www.qikegu.com/wp-includes/css/dist/block-library/style.min.css?ver=5.0.4
➞ Finished request: https://www.qikegu.com/wp-includes/css/dist/block-library/style.min.css?ver=5.0.4
➞ Response: https://www.qikegu.com/wp-content/plugins/wedocs/assets/css/frontend.css?ver=1.4.1
➞ Finished request: https://www.qikegu.com/wp-content/plugins/wedocs/assets/css/frontend.css?

...

手动触发事件

下面的脚本模拟触发部分事件:


const puppeteer = require('puppeteer'); (async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); // 当页面中的脚本使用“console.timeStamp”时发出 page.on('metrics', data => console.info(`➞ Timestamp added at ${data.metrics.Timestamp}`)); // 当页面中的脚本使用“console”时发出 page.on('console', message => console[message.type()](`➞ ${message.text()}`)); // 当页面中的脚本使用“alert”、“prompt”、“confirm”或“beforeunload”时发出 page.on('dialog', async dialog => { console.info(`➞ ${dialog.message()}`); await dialog.dismiss(); }); // 当页面发生错误事件时发出(例如,页面崩溃) page.on('error', error => console.error(`✖ ${error}`)); // 触发 `metrics` 事件 await page.evaluate(() => console.timeStamp()); // 触发 `console` 事件 await page.evaluate(() => console.info('A console message within the page')); // 触发 `dialog` 事件 await page.evaluate(() => alert('An alert within the page')); // 触发 `error` 事件 await page.emit('error', new Error('An error within the page')); // 触发 `close` 事件 await page.close(); await browser.close(); })();

evaluate在页面上下文中执行提供的脚本。

Puppeteer – 事件处理

侦听事件

Page类通过继承Node.js的EventEmitter类发送事件,这表明node.js中侦听事件的方法都能使用,例如ononceremoveListener等等。

以下是支持的事件列表:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // 在解析DOM并准备就绪时发出(无需等待资源)
  page.once('domcontentloaded', () => console.info('√ DOM is ready'));

  // 当页面完全加载时发出
  page.once('load', () => console.info('√ Page is loaded'));

  // 当页面附加一个frame时发出
  page.on('frameattached', () => console.info('√ Frame is attached'));

  // 当页面内的frame导航到新URL时发出
  page.on('framenavigated', () => console.info('➞ Frame is navigated'));

  // 当页面中的脚本使用“console.timeStamp”时发出
  page.on('metrics', data => console.info(`➞ Timestamp added at ${data.metrics.Timestamp}`));

  // 当页面中的脚本使用“console”时发出
  page.on('console', message => console[message.type()](`➞ ${message.text()}`));

  // 当页面发生错误事件时发出(例如,页面崩溃)
  page.on('error', error => console.error(`✖ ${error}`));

  // 当页面中的脚本有未捕获异常时发出
  page.on('pageerror', error => console.error(`✖ ${error}`));

  // 当页面中的脚本使用“alert”、“prompt”、“confirm”或“beforeunload”时发出
  page.on('dialog', async dialog => {
    console.info(`➞ ${dialog.message()}`);
    await dialog.dismiss();
  });

  // 当打开属于浏览器环境/上下文的新页面时发出
  page.on('popup', () => console.info('➞ New page is opened'));

  // 当页面产生请求时发出
  page.on('request', request => console.info(`➞ Request: ${request.url()}`));

  // 当页面生成的请求失败时发出
  page.on('requestfailed', request => console.info(`✖ Failed request: ${request.url()}`));

  // 当页面生成的请求成功完成时发出
  page.on('requestfinished', request => console.info(`➞ Finished request: ${request.url()}`));

  // 当接收到响应时发出
  page.on('response', response => console.info(`➞ Response: ${response.url()}`));

  // 当页面创建专用的网络工作者时发出
  page.on('workercreated', worker => console.info(`➞ Worker: ${worker.url()}`));

  // 当页面销毁专用的网络工作者时发出
  page.on('workerdestroyed', worker => console.info(`➞ Destroyed worker: ${worker.url()}`));

  // 当页面分离frame时发出
  page.on('framedetached', () => console.info('√ Frame is detached'));

  // 关闭页面后发出
  page.once('close', () => console.info('√ Page is closed'));

  await page.goto('https://www.qikegu.com');

  await browser.close();
})();

输出:

G:\qikegu\puppeteer>node puppeteer_demo9.js
➞ Request: https://www.qikegu.com/
➞ Response: https://www.qikegu.com/
➞ Frame is navigated
➞ Request: https://www.qikegu.com/wp-includes/css/dist/block-library/style.min.css?ver=5.0.4
➞ Request: https://www.qikegu.com/wp-content/plugins/wedocs/assets/css/frontend.css?ver=1.4.1
➞ Request: https://cdn.jsdelivr.net/npm/katex/dist/katex.min.css?ver=0.10.0-beta
➞ Request: https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css?ver=0.7.4
➞ Request: https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css?ver=5.0.4
➞ Request: https://www.qikegu.com/wp-content/themes/bulmawp/style.css?ver=5.0.4
➞ Request: https://www.qikegu.com/wp-content/themes/bulmawp/assets/css/prism.css?ver=5.0.4
➞ Request: https://www.qikegu.com/wp-content/themes/bulmawp/assets/js/prism.js?ver=5.0.4
➞ Request: https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
➞ Request: https://www.qikegu.com/wp-content/uploads/2019/03/logo.png
➞ Request: https://www.qikegu.com/wp-includes/js/wp-emoji-release.min.js?ver=5.0.4
➞ Response: https://www.qikegu.com/wp-includes/css/dist/block-library/style.min.css?ver=5.0.4
➞ Finished request: https://www.qikegu.com/wp-includes/css/dist/block-library/style.min.css?ver=5.0.4
➞ Response: https://www.qikegu.com/wp-content/plugins/wedocs/assets/css/frontend.css?ver=1.4.1
➞ Finished request: https://www.qikegu.com/wp-content/plugins/wedocs/assets/css/frontend.css?

...

手动触发事件

下面的脚本模拟触发部分事件:


const puppeteer = require('puppeteer'); (async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); // 当页面中的脚本使用“console.timeStamp”时发出 page.on('metrics', data => console.info(`➞ Timestamp added at ${data.metrics.Timestamp}`)); // 当页面中的脚本使用“console”时发出 page.on('console', message => console[message.type()](`➞ ${message.text()}`)); // 当页面中的脚本使用“alert”、“prompt”、“confirm”或“beforeunload”时发出 page.on('dialog', async dialog => { console.info(`➞ ${dialog.message()}`); await dialog.dismiss(); }); // 当页面发生错误事件时发出(例如,页面崩溃) page.on('error', error => console.error(`✖ ${error}`)); // 触发 `metrics` 事件 await page.evaluate(() => console.timeStamp()); // 触发 `console` 事件 await page.evaluate(() => console.info('A console message within the page')); // 触发 `dialog` 事件 await page.evaluate(() => alert('An alert within the page')); // 触发 `error` 事件 await page.emit('error', new Error('An error within the page')); // 触发 `close` 事件 await page.close(); await browser.close(); })();

evaluate在页面上下文中执行提供的脚本。

输出:

G:\qikegu\puppeteer>node puppeteer_demo10.js
➞ Timestamp added at 1245064.356762
➞ A console message within the page
➞ An alert within the page
✖ Error: An error within the page

要侦听页面中触发的自定义事件,可以使用exposeFunction方法,在page的窗口中定义事件处理程序,可以参考这个示例

G:\qikegu\puppeteer>node puppeteer_demo10.js
➞ Timestamp added at 1245064.356762
➞ A console message within the page
➞ An alert within the page
✖ Error: An error within the page

要侦听页面中触发的自定义事件,可以使用exposeFunction方法,在page的窗口中定义事件处理程序,可以参考这个示例



浙ICP备17015664号 浙公网安备 33011002012336号 联系我们 网站地图  
@2019 qikegu.com 版权所有,禁止转载