puppeteer介绍

https://pptr.dev/

Puppeteer是什么

Puppeteer 是一个Node库，它提供高级API，通过DevTools Protocol 来控制Chrome 或 Chromium。 Puppeteer 默认运行为headless ，但是可以配置为运行为non-headless 。

可以做什么

生成页面截图或PDF
抓取SPA 并生成预渲染内容（SSR）
自动化表单提交、UI测试，键盘输入等
创建最新的自动化测试环境。使用最新的JavaScript和浏览器功能直接在最新版本的Chrome中运行测试。
捕获站点的时间线跟踪，以帮助诊断性能问题。
测试Chrome扩展程序。

安装

npm i puppeteer
# or "yarn add puppeteer"

注意：安装时会下载最新的Chromium （~170MB Mac, ~282MB Linux, ~280MB Win）。跳过安装参见 Environment variables.

puppeteer-core

从1.7版本开始发布puppeteer-core ，他默认不会下载Chromium 。
npm i puppeteer-core
puppeteer-core 使用已安装的浏览器或远程浏览器。
See puppeteer vs puppeteer-core.

使用

注意： Puppeteer要求node的版本至少6.4.0 ，但是下例中使用的async/await要求node版本大于7.6.0。

Puppeteer的使用类似其他浏览器测试框架，首选创建Browser ，open Pages ，然后使用API操作页面。

实例1 浏览https://example.com 并截图保存

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});

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

node example.js 执行。
Puppeteer初始化页面大小为 800*600px，这也是截图的大小页面大小可以通过 Page.setViewport().定制。

创建PDF

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://news.ycombinator.com', {waitUntil: 'networkidle2'});
  await page.pdf({path: 'hn.pdf', format: 'A4'});

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

更多信息参见 See Page.pdf()

在页面中执行脚本

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');

  // Get the "viewport" of the page, as reported by the page.
  const dimensions = await page.evaluate(() => {
    return {
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight,
      deviceScaleFactor: window.devicePixelRatio
    };
  });

  console.log('Dimensions:', dimensions);

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

evaluate的更多信息参见 See Page.evaluate()

默认运行时设置

1. 使用headless 模式

默认使用headless模式，可以通过设置 'headless' option 来修改。
const browser = await puppeteer.launch({headless: false}); // default is true

2.运行绑定的Chromium版本

默认情况下Puppeteer下载使用绑定的Chromium版本，保证api正常工作，要使用不同版本，在创建Browser时传递相应路径。

const browser = await puppeteer.launch({executablePath: '/path/to/Chrome'});

更多信息参见： See Puppeteer.launch()

对于Chromium 与 Chrome的区别参见 See this article

3. 创建新的用户profile

Chromium 在每次运行时都会清理并创建自己的user profile。

资源 Resources

API Documentation
Examples
Community list of Puppeteer resources

调试技巧

关闭headless 模式
调慢速度slowMo

 const browser = await puppeteer.launch({
   headless: false,
   slowMo: 250 // slow down by 250ms
 });

获取控制台输出，监听console事件。对于page.evaluate()很遍历：

 page.on('console', msg => console.log('PAGE LOG:', msg.text()));

 await page.evaluate(() => console.log(`url is ${location.href}`));

使用debugger模式

启动时使用 devtools：true

const browser = await puppeteer.launch({devtools: true});

修改默认的超时时间

jest: `jest.setTimeout(100000);`

jasmine: `jasmine.DEFAULT_TIMEOUT_INTERVAL = 100000;`

mocha: `this.timeout(100000);` (don't forget to change test to use [function and not '=>'](https://stackoverflow.com/a/23492442))

添加debugger语句

await page.evaluate(() => {debugger;});

启用详细日志

 # Basic verbose logging
 env DEBUG="puppeteer:*" node script.js

 # Debug output can be enabled/disabled by namespace
 env DEBUG="puppeteer:*,-puppeteer:protocol" node script.js # everything BUT protocol messages
 env DEBUG="puppeteer:session" node script.js # protocol session messages (protocol messages to targets)
 env DEBUG="puppeteer:mouse,puppeteer:keyboard" node script.js # only Mouse and Keyboard API calls

 # Protocol traffic can be rather noisy. This example filters out all Network domain messages
 env DEBUG="puppeteer:*" env DEBUG_COLORS=true node script.js 2>&1 | grep -v '"Network'

使用 ndb
npm install -g ndb （或使用npx）
向代码中添加 debugger
在测试命令前添加 ndb 或 npx ddb ，如 ndb jest or ndb mocha (or npx ndb jest / npx ndb mocha）