Puppeteer 说明记录

<div class="iteye-blog-content-contain" style="font-size: 14px"></div>

 

无头浏览器 通过写脚本来使用无头浏览器访问网站。通过一系列的api 和无头浏览器界面进行交互。

 

安装 Puppeteer

先创建一个测试用的项目，执行 npm init 初始化好 package.json，然后执行以下命令安装 Puppeteer：

npm install puppeteer --save-dev

万事开头难，第一步安装时就会遇到问题（如果没有报错，请跳过这一段）。

Puppeteer 安装过程中会去下载 Chromium，墙内用户则会报错。如果你看到以下信息，说明是下载 Chromium 时连接不上。

ERROR: Failed to download Chromium r588429! Set "PUPPETEER_SKIP_CHROMIUM_DOWNLOAD" env variable to skip download.
Error: Download failed: server returned code 502. URL: https://storage.googleapis.com/chromium-browser-snapshots/Win_x64/588429/chrome-win32.zip

或者

ERROR: Failed to download Chromium r588429! Set "PUPPETEER_SKIP_CHROMIUM_DOWNLOAD" env variable to skip download.
{ Error: connect ETIMEDOUT 172.217.24.48:443

如提示所说，设置 PUPPETEER_SKIP_CHROMIUM_DOWNLOAD 可以跳过安装 Chromium。

PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1 npm install puppeteer --save-dev

此时可以安装成功，但是使用 Puppeteer 时会由于找不到 Chromium 而报错。可以创建一个文件 test.js，内容如下：

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 test.js 则会报错：

$ node test.js
(node:18368) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: Chromium revision is not downloaded. Run "npm install" or "yarn install"
(node:18368) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

一个解决方案是先手动下载 Chromium，然后在执行时通过配置指定 Chromium 位置，这篇文章给出了解决步骤。

但是我更倾向于还原 Puppeteer 安装时的过程。但是由于一些环境原因，即便翻-墙了也只能手动下载 Chromium，无法在安装 Puppeteer 时自动下载 Chromium。

读了一下源码之后，可以这么解决：

1. 安装 Puppeteer，安装失败，提示无法下载 https://storage.googleapis.com/chromium-browser-snapshots/Win_x64/588429/chrome-win32.zip
2. 使用 PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1 npm install puppeteer --save-dev 成功安装 Puppeteer
3. 执行 node test.js 提示无法找到 Chromium
4. 手动下载步骤 1 中的 chrome-win32.zip，注意不同版本、不同系统的下载地址是不一样的
5. 开启一个静态文件服务，使得 http://127.0.0.1:8000/chrome-win32.zip 指向需要下载的文件
6. 改写 downloadURL 方法，使其直接返回 http://127.0.0.1:8000/chrome-win32.zip
7. 执行 node ./node_modules/puppeteer/install.js 完成安装
8. 执行 node test.js 测试能否成功生成截图

至此，成功完成了 Puppeteer 的安装。

 

Puppeteer API

Puppeteer 的大部分 API 的返回值都是 Promise，故推荐使用 async await 来处理异步操作。Puppeteer 的 API 包含以下类：

类名 描述

Puppeteer	主要用于创建一个浏览器实例，也可以用来下载新的 Chromium，或者设置浏览器的默认参数
BrowserFetcher	用于下载和管理 Chromium
Browser	可以创建一个或多个 Page
BrowserContext	创建一个隐身模式的浏览器时需要用到
Page	主要 API，用于操作一个页面，后面会详细介绍
Worker	用于处理 WebWorker
Keyboard	可以触发键盘按键
Mouse	可以触发鼠标动作
TouchScreen	可以触发触摸屏的动作
Tracing	用于分析性能
Dialog	存在于 page 的 dialog 事件回调中，表示调用弹窗后的对象，包括 alert, beforeunload, confirm 和 prompt
ConsoleMessage	存在于 page 的 console 事件回调中，表示调用 console.log 等方法后的对象
Frame	常用于处理包含多个 frame 的页面。page 中的很多方法就是直接调用的主 frame 的方法
ExecutionContext	执行上下文存在于 frame、浏览器插件、worker 中。可以用来直接执行一段 js
JSHandle	通过 page.evaluateHandle 生成，用于将页面中的 handler 挑出来传递使用
ElementHandle	通过 page.$ 生成，用于将页面中某个元素的 handler 挑出来传递使用
Request	在 page.setRequestInterception 方法中使用，可以处理页面的请求
Response	表示页面接收到的响应
SecurityDetails	表示页面的安全信息
Target	可以是 page, background_page, service_worker, browser 等
CDPSession	用于直接和 Devtools 通信
Coverage	用于分析 js 和 css 的代码被页面使用的比例
TimeoutError	超时错误

Page

Page 是 Puppeteer 中最重要的一个 API，也是它的核心所在，这里会介绍一些常用的 Page API。

设置页面环境

方法名 描述

page.emulate	设置 viewport 和 ua
page.setViewport	设置 viewport
page.setUserAgent	设置 ua
page.setRequestInterception	中断所有请求，并可以修改请求的返回值
page.addScriptTag	添加 js 脚本
page.addStyleTag	添加 css
page.setContent	设置整个 html
page.setCacheEnabled	设置缓存是否开启
page.setExtraHTTPHeaders	设置额外的 http 头
page.setGeolocation	设置地理位置
page.setJavaScriptEnabled	设置 js 是否开启
page.setOfflineMode	设置离线模式
page.deleteCookie	删除 cookies
page.setCookie	设置 cookies

 

对象说明

• Browser： 对应一个浏览器实例，一个 Browser 可以包含多个 BrowserContext
• BrowserContext： 对应浏览器一个上下文会话，就像我们打开一个普通的 Chrome 之后又打开一个隐身模式的浏览器一样，BrowserContext 具有独立的 Session(cookie 和 cache 独立不共享)，一个 BrowserContext 可以包含多个 Page
• Page：表示一个 Tab 页面，通过 browserContext.newPage()/browser.newPage() 创建，browser.newPage() 创建页面时会使用默认的 BrowserContext，一个 Page 可以包含多个 Frame
• Frame: 一个框架，每个页面有一个主框架（page.MainFrame()）,也可以多个子框架，主要由 iframe 标签创建产生的
• ExecutionContext： 是 javascript 的执行环境，每一个 Frame 都一个默认的 javascript 执行环境
• ElementHandle: 对应 DOM 的一个元素节点，通过该该实例可以实现对元素的点击，填写表单等行为，我们可以通过选择器，xPath 等来获取对应的元素
• JsHandle：对应 DOM 中的 javascript 对象，ElementHandle 继承于 JsHandle，由于我们无法直接操作 DOM 中对象，所以封装成 JsHandle 来实现相关功能
• CDPSession：可以直接与原生的 CDP 进行通信，通过 session.send 函数直接发消息，通过 session.on 接收消息，可以实现 Puppeteer API 中没有涉及的功能
• Coverage：获取 JavaScript 和 CSS 代码覆盖率
• Tracing：抓取性能数据进行分析
• Response： 页面收到的响应
• Request： 页面发出的请求