puppeteer简介
puppeteer 翻译是操纵木偶的人,利用这个工具,我们能做一个操纵页面的人。puppeteer是一个nodejs的库,支持调用Chrome的API来操纵Web,相比较Selenium或是PhantomJs,它最大的特点就是它的操作Dom可以完全在内存中进行模拟既在V8引擎中处理而不打开浏览器,而且关键是这个是Chrome团队在维护,会拥有更好的兼容性和前景。
puppeteer功能
- 生成页面的截图和PDF。
- 抓取SPA并生成预先呈现的内容(即“SSR”)。
- 从网站抓取你需要的内容。
- 自动表单提交,UI测试,键盘输入等
- 创建一个最新的自动化测试环境。使用最新的JavaScript和浏览器功能,直接在最新版本的Chrome中运行测试。
- 捕获您的网站的时间线跟踪,以帮助诊断性能问题。
puppeteer轻松入门
1. 环境和安装
Puppeteer 至少需要 Node v6.4.0,如要使用 async / await,只有 Node v7.6.0 或更高版本才支持。 node下载地址: https://nodejs.org/zh-cn/
2. 创建项目
2.1 创建test目录,进入目录执行npm init
2.2 安装 puppeteer
yarn add puppeteer 或者 npm i puppeteer
可能会出现以下报错:
-
ERROR: Failed to download Chromium r515411! Set "PUPPETEER_SKIP_CHROMIUM_DOWNLOA
-
D" env variable to skip download.
是因为在执行安装的过程中需要执行install.js,这里会下载Chromium,官网建议是进行跳过,我们可以执行 —ignore-scripts 忽略这个js执行。也可以通过设置环境变量set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1阻止下载 Chromium (因为封网,直接下载会失败)
npm i --save puppeteer --ignore-scripts
2.3 手动下载Chromium
下载地址:https://download-chromium.appspot.com/ (打开蓝灯FQ软件...)
把下载刚刚下载的文件解压出来会有chrome-win32文件夹,把里面的文件拷贝到项目新建的chromium文件夹中
2.4 新建index.js(截图功能), 代码如下:
-
const puppeteer = require('puppeteer');
-
-
(async () => {
-
const browser = await puppeteer.launch();
-
const page = await browser.newPage();
-
await page.goto('https://y.qq.com');
-
await page.screenshot({path: 'yqq.png'});
-
browser.close();
-
})();
-
打开cmd执行index.js
-
node index.js
-
这时候可能出现以下错误:
-
(node:8672) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejec
-
tion id: 1): AssertionError [ERR_ASSERTION]: Chromium revision is not downloaded
-
. Run "npm install"
-
(node:8672) [DEP0018] DeprecationWarning: Unhandled promise rejections are depre
-
cated. In the future, promise rejections that are not handled will terminate the
-
Node.js process with a non-zero exit code.
-
显示chromium 未下载错误,因为chromium默认的下载路径是在node_modules/puppeteer/.local-chromium/目录,这时候我们的chromium是在项目根目录,所以需要配置指定路径,修改index.js文件():
-
const puppeteer = require('puppeteer');
-
-
(async () => {
-
const browser = await puppeteer.launch({
-
executablePath: './chromium/chrome.exe',
-
headless: false
-
});
-
const page = await browser.newPage();
-
await page.goto('http://music.163.com/');
-
await page.screenshot({path: 'music.png'});
-
browser.close();
-
})();
-
puppeteer launch参数说明:
- executablePath: 运行Chromium或Chrome可执行文件的路径
- headless: 是否运行在浏览器headless模式,true为不打开浏览器执行,默认为true
- timeout: 等待浏览器实例启动的最长时间(以毫秒为单位)。默认为30000(30秒)。通过0禁用超时
- args: 传递给浏览器实例的其他参数
更多参数请参照官网,再次执行index.js可能出现以下错误:
-
Error: Protocol error (Page.getFrameTree): 'Page.getFrameTree' wasn 't found undefined
-
刚开始找了好久没找到答案,然后上万能的Google找了下,发现了类似的问题
可能是chromium的版本存在差异,然后重新在chromium官网下载最新版本解压到项目(要注意下相应系统chromium)
执行index.js, 脚本运行chromium浏览器跳转到界面,截图保存到项目中,这样就成功了...
2.5 puppeteer相关地址
puppeteer神器官方文档,可以进行其他强大的功能开发...