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
调试技巧
- 关闭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）
