Puppeteer的入门教程和实践

出现的背景

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

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

环境和安装

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模式。

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})

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

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

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

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内置的一些常见设备的模拟参数。

不少网页须要登陆，有两种解决方案：

1. 让puppeteer去输入帐号密码

经常使用方法：点击能够使用page.click(selector[, options])方法，也能够选择聚焦page.focus(selector)。
输入能够使用page.type(selector, text[, options])输入指定的字符串，还能够在options中设置delay缓慢输入更像真人一些。也能够使用keyboard.down(key[, options])来一个字符一个字符的输入。

1. 若是是经过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();
})()

求赞，另外欢迎访问个人博客