侦听事件

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

以下是支持的事件列表:

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中侦听事件的方法都能使用，例如on，once， removeListener等等。

以下是支持的事件列表:

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的窗口中定义事件处理程序，可以参考这个示例。