Puppeteer的入门教程和实践
Puppeteer
出现的背景
Chrome59(linux、macos)、 Chrome60(windows)之后,Chrome 自带headless(无界面)模式很方便做自动化测试或者爬虫。但是如何和 headless 模式的 Chrome 交互则是一个问题。通过启动 Chrome 时的命令行参数仅能实现简易的启动时初始化操作。Selenium、Webdriver 等是一种解决方案,但是往往依赖众多,不够扁平。
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 实例来操作浏览器作出相应的反应。
1 | const puppeteer = require('puppeteer'); |
上述代码通过 puppeteer 的 launch 方法生成了一个 browser 的实例,对应于浏览器,launch 方法可以传入配置项,比较有用的是在本地调试时传入{headless:false}可以关闭 headless 模式。
1 | const browser = await puppeteer.launch({headless:false}) |
browser.newPage 方法可以打开一个新选项卡并返回选项卡的实例 page,通过 page 上的各种方法可以对页面进行常用操作。上述代码就进行了截屏和打印 pdf 的操作。
一个很强大的方法是 page.evaluate(pageFunction, …args),可以向页面注入我们的函数,这样就有了无限可能
1 | const puppeteer = require('puppeteer'); |
需要注意的是 evaluate 方法中是无法直接使用外部的变量的,需要作为参数传入,想要获得执行的结果也需要 return 出来。因为是一个开源一个多月的项目,现在项目很活跃,所以使用时自行查找api才能保证参数、使用方法不会错。
调试技巧
- 关掉无界面模式,有时查看浏览器显示的内容是很有用的。使用以下命令可以启动完整版浏览器:
1 | const browser = await puppeteer.launch({headless: false}) |
- 减慢速度,slowMo 选项以指定的毫秒减慢 Puppeteer 的操作。这是另一个看到发生了什么的方法:
1 | const browser = await puppeteer.launch({ |
3.捕获 console 的输出,通过监听 console 事件。在 page.evaluate 里调试代码时这也很方便:
1 | page.on('console', msg => console.log('PAGE LOG:', ...msg.args)); |
4.启动详细日志记录,所有公共 API 调用和内部协议流量都将通过 puppeteer 命名空间下的 debug 模块进行记录
1 | # Basic verbose logging |
爬虫实践
很多网页通过 user-agent 来判断设备,可以通过 page.emulate(options)来进行模拟。options 有两个配置项,一个为 userAgent,另一个为 viewport 可以设置宽度(width)、高度(height)、屏幕缩放(deviceScaleFactor)、是否是移动端(isMobile)、有无 touch 事件(hasTouch)。
1 | const puppeteer = require('puppeteer'); |
上述代码则模拟了 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 访问跳过扫码。
简单例子
1 | const puppeteer = require('puppeteer'); |