Puppeteer的入门教程和实践

Puppeteer

出现的背景

Chrome59(linux、macos)、 Chrome60(windows)之后，Chrome 自带headless(无界面)模式很方便做自动化测试或者爬虫。但是如何和 headless 模式的 Chrome 交互则是一个问题。通过启动 Chrome 时的命令行参数仅能实现简易的启动时初始化操作。Selenium、Webdriver 等是一种解决方案，但是往往依赖众多，不够扁平。

Puppeteer

Puppeteer 是谷歌官方出品的一个通过 DevTools 协议控制 headless Chrome 的 Node 库。可以通过 Puppeteer 的提供的 api 直接控制 Chrome 模拟大部分用户操作来进行 UI Test 或者作为爬虫访问页面来收集数据。

中文文档

作用：

生成页面 PDF。
抓取 SPA（单页应用）并生成预渲染内容。
自动提交表单，进行 UI 测试，键盘输入等。
创建一个时时更新的自动化测试环境。使用最新的 JavaScript 和浏览器功能直接在最新版本的 Chrome 中执行测试。
捕获网站的 timeline trace，用来帮助分析性能问题。
测试浏览器扩展。

环境和安装

Puppeteer 本身依赖 6.4 以上的 Node，但是为了异步超级好用的async/await，推荐使用 7.6 版本以上的 Node。另外 headless Chrome 本身对服务器依赖的库的版本要求比较高，centos 服务器依赖偏稳定，v6 很难使用 headless Chrome，提升依赖版本可能出现各种服务器问题（包括且不限于无法使用 ssh），最好使用高版本服务器。

Puppeteer 因为是一个 npm 的包，所以安装很简单：

npm i puppeteer

或者

yarn add puppeteer

Puppeteer 安装时自带一个最新版本的 Chromium，可以通过设置环境变量或者 npm config 中的 PUPPETEER_SKIP_CHROMIUM_DOWNLOAD 跳过下载。如果不下载的话，启动时可以通过 puppeteer.launch([options])配置项中的 executablePath 指定 Chromium 的位置。

使用和例子

Puppeteer 类似其他框架，通过操作 Browser 实例来操作浏览器作出相应的反应。

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('http://rennaiqian.com');
  await page.screenshot({path: 'example.png'});
  await page.pdf({path: 'example.pdf', format: 'A4'});
  await browser.close();
})();

上述代码通过 puppeteer 的 launch 方法生成了一个 browser 的实例，对应于浏览器，launch 方法可以传入配置项，比较有用的是在本地调试时传入{headless:false}可以关闭 headless 模式。

1	const browser = await puppeteer.launch({headless:false})

browser.newPage 方法可以打开一个新选项卡并返回选项卡的实例 page，通过 page 上的各种方法可以对页面进行常用操作。上述代码就进行了截屏和打印 pdf 的操作。

一个很强大的方法是 page.evaluate(pageFunction, …args)，可以向页面注入我们的函数，这样就有了无限可能

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('http://rennaiqian.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 方法中是无法直接使用外部的变量的，需要作为参数传入，想要获得执行的结果也需要 return 出来。因为是一个开源一个多月的项目，现在项目很活跃，所以使用时自行查找api才能保证参数、使用方法不会错。

调试技巧

关掉无界面模式，有时查看浏览器显示的内容是很有用的。使用以下命令可以启动完整版浏览器：

1	const browser = await puppeteer.launch({headless: false})

减慢速度，slowMo 选项以指定的毫秒减慢 Puppeteer 的操作。这是另一个看到发生了什么的方法：

const browser = await puppeteer.launch({
  headless:false,
  slowMo:250
});

3.捕获 console 的输出,通过监听 console 事件。在 page.evaluate 里调试代码时这也很方便：

1 2	page.on('console', msg => console.log('PAGE LOG:', ...msg.args)); await page.evaluate(() => console.log(`url is ${location.href}`));

4.启动详细日志记录，所有公共 API 调用和内部协议流量都将通过 puppeteer 命名空间下的 debug 模块进行记录

# 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'

爬虫实践

很多网页通过 user-agent 来判断设备，可以通过 page.emulate(options)来进行模拟。options 有两个配置项，一个为 userAgent，另一个为 viewport 可以设置宽度(width)、高度(height)、屏幕缩放(deviceScaleFactor)、是否是移动端(isMobile)、有无 touch 事件(hasTouch)。

const puppeteer = require('puppeteer');
const devices = require('puppeteer/DeviceDescriptors');
const iPhone = devices['iPhone 6'];

puppeteer.launch().then(async browser => {
  const page = await browser.newPage();
  await page.emulate(iPhone);
  await page.goto('https://www.example.com');
  // other actions...
  await browser.close();
});

上述代码则模拟了 iPhone6 访问某网站，其中 devices 是 puppeteer 内置的一些常见设备的模拟参数。

很多网页需要登录，有两种解决方案：

让 puppeteer 去输入账号密码常用方法：点击可以使用 page.click(selector[, options])方法，也可以选择聚焦 page.focus(selector)。输入可以使用 page.type(selector, text[, options])输入指定的字符串，还可以在 options 中设置 delay 缓慢输入更像真人一些。也可以使用 keyboard.down(key[, options])来一个字符一个字符的输入。
如果是通过 cookie 判断登录状态的可以通过 page.setCookie(…cookies)，想要维持 cookie 可以定时访问。

Tip：有些网站需要扫码，但是相同域名的其他网页却有登录，就可以尝试去可以登录的网页登录完利用 cookie 访问跳过扫码。

简单例子

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();
  await page.goto('https://baidu.com');
  await page.type('#kw', 'puppeteer', {delay: 100});
  page.click('#su')
  await page.waitFor(1000);
  const targetLink = await page.evaluate(() => {
    return [...document.querySelectorAll('.result a')].filter(item => {
      return item.innerText && item.innerText.includes('Puppeteer的入门和实践')
    }).toString()
  });
  await page.goto(targetLink);
  await page.waitFor(1000);
  browser.close();
})()