Puppeteer入门教程-526互联

Puppeteer 简介

Puppeteer 是一个node库，他提供了很多操纵Chrome的API, 让我们可以通过 javascript 模拟人工操作浏览器。既然是浏览器，那么我们在浏览器上做的事情, 都可以通过 Puppeteer切换成自动操作；具体 Puppeteer 可以做

生成网页截图或者 PDF
高级爬虫，可以爬取大量异步渲染内容的网页
模拟键盘输入、表单自动提交、登录网页等，实现 UI 自动化测试
捕获站点的时间线，以便追踪你的网站，帮助分析网站性能问题

运行环境

查看 Puppeteer 的官方 API 你会发现满屏的 async, await 之类，这些都是 ES7 的规范，所以你需要：

Nodejs 的版本不能低于 v7.6.0, 需要支持 async, await.

需要最新的 chrome driver

chrome driver 在通过 npm 安装 Puppeteer 的时候会自动跟着下载；

安装puppeteer

通过 npm 可以直接安装

npm i puppeteer

基本用法

直接用官网的入门 Demo 演示

const puppeteer = require(' puppeteer')；

(async () => {
    // 创建一个浏览器实例 Browser 对象
	const browser= await puppeteer.launch()；
    
    // 通过 Browser 对象创建页面 Page 对象
	const page = await browser.newPage()；

    // page.goto() 跳转到指定的页面
	await page.goto('https://example.com’)；
    
    // 对当前页面截图
	await page.screenshot({path: 'example.png'})；
  
    // 关闭浏览器
	await browser.close()；
})()；

创建浏览器方法详解(puppeteer.launch(options))

使用 puppeteer.launch() 运行 puppeteer，它会 return 一个 promise，使用 then 方法获取 browser 实例，当然高版本的的 nodejs 已经支持 await 特性了，所以上面的例子使用 await 关键字，这一点需要特殊说明一下，Puppeteer 几乎所有的操作都是异步的, 为了方便代码维护和阅读，我们优先使用await 将异步操作转成同步操作；本文所有 demo 代码都是用 async, await 方式实现。这个也是 Puppeteer 官方推荐的写法。

options 参数详解

参数名称	参数类型	参数说明
ignoreHTTPSErrors	boolean	在请求的过程中是否忽略 Https 报错信息，默认为 false
headless	boolean	是否以"无头"的模式运行 chrome, 也就是不显示 UI，默认为 true
executablePath	string	可执行文件的路径，Puppeteer 默认是使用它自带的 chrome webdriver, 如果你想指定一个自己的 webdriver 路径，可以通过这个参数设置
slowMo	number	使 Puppeteer 操作减速，单位是毫秒。如果你想看看 Puppeteer 的整个工作过程，这个参数将非常有用
args	Array(String)	传递给 chrome 实例的其他参数，比如你可以使用"--ash-host-window-bounds=1024x768" 来设置浏览器窗口大小。更多参数参数列表可以参考这里
handleSIGINT	boolean	是否允许通过进程信号控制 chrome 进程，也就是说是否可以使用 CTRL+C 关闭并退出浏览器
timeout	number	等待 Chrome 实例启动的最长时间。默认为30000（30秒）。如果传入 0 的话则不限制时间
dumpio	boolean	是否将浏览器进程 stdout 和 stderr 导入到 process.stdout 和 process.stderr 中。默认为 false
userDataDir	string	设置用户数据目录，默认linux 是在 ~/.config 目录，window 默认在 C:\Users{USER}\AppData\Local\Google\Chrome\User Data, 其中 {USER} 代表当前登录的用户名
env	Object	指定对 Chromium 可见的环境变量。默认为 process.env。
devtools	boolean	是否为每个选项卡自动打开 DevTools 面板，这个选项只有当 headless 设置为 false 的时候有效

Browser 对象详解

构建Browser对象有两个方法：Puppeteer.launch 和 Puppeteer.connect; Puppeteer.launch 上面案例中有演示，接下来我们看下 Puppeteer.connect 的用法：

const puppeteer = require(' puppeteer')；
(async () => {
	const browser= await puppeteer.launch()；

	// 保存浏览器的链接对象
	const browserWSEndpoint = browser.wsEndpoint();

	// 手动断开链接
	browser.disconnect();

	// 重新建立连接，并创建新的 Browser 实例
	const browser2 = await puppeteer.connect({browserWSEndpoint});

	// 关闭 浏览器
	await browser2.close()；
})()；

Browser 对象 API

方法名称	返回值	说明
browser.close()	Promise	关闭浏览器
browser.disconnect()	void	断开浏览器连接
browser.newPage()	Promise(Page)	创建一个 Page 实例
browser.pages()	Promise(Array(Page))	获取所有打开的 Page 实例
browser.targets()	Array(Target)	获取所有活动的 targets
browser.version()	Promise(String)	获取浏览器的版本
browser.wsEndpoint()	String	返回浏览器实例的 socket 连接 URL, 可以通过这个 URL 重新连接 chrome 实例

完整的API请插件官网文档：https://pptr.dev/api/puppeteer.browser

Page 对象Api

Page 提供了与浏览器中的单个选项卡或扩展程序后台页面进行交互的方法。

一个浏览器实例可能有多个页面实例。也就是多个标签页

Page 实例属性

属性	修饰符	类型	描述
accessibility	readonly	Accessibility	Accessibility 类提供了检查浏览器的可访问性树的方法。辅助功能树由屏幕阅读器或开关等辅助技术使用。
coverage	readonly	Coverage	Coverage 类提供了一些方法来收集有关页面使用的部分 JavaScript 和 CSS 的信息。
keyboard	readonly	Keyboard	Keyboard 提供了一个用于管理虚拟键盘的 API。高级 API 是 Keyboard.type()，它接受原始字符并在页面上生成正确的 keydown、keypress/input 和 keyup 事件。
mouse	readonly	Mouse	Mouse 类在主框架 CSS 像素相对于视口左上角操作。
touchscreen	readonly	Touchscreen	Touchscreen 类公开触摸屏事件。
tracing	readonly	Tracing	Tracing 类公开跟踪审核接口。

Page 实例方法

这里列举出常用的几个

方法	修饰符	描述
$(selector)		在页面内部运行 document.querySelector。如果没有元素与选择器匹配，则返回值解析为 null。
$$(selector)		该方法在页面内运行 document.querySelectorAll，如果没有元素与选择器匹配，则返回值解析为[]。
$$eval(selector, pageFunction, args)		该方法在页面内运行 Array.from(document.querySelectorAll(selector)) 并将结果作为第一个参数传递给 pageFunction。
$eval(selector, pageFunction, args)		该方法在页面内运行 document.querySelector，并将结果作为第一个参数传递给 pageFunction。
$x(expression)		该方法将 XPath 表达式相对于页面文档作为上下文节点进行评估。如果不存在此类元素，则该方法解析为空数组。
addScriptTag(options)		向页面添加具有所需 URL 或内容的