Puppeteer介绍

​Puppeteer​​​1​​ 翻译是操纵木偶的人,利用这个工具,我们能做一个操纵页面的人。​​Puppeteer​​​是一个​​Nodejs​​​的库,支持调用Chrome的API来操纵Web,相比较​​Selenium​​​或是​​PhantomJs​​​,它最大的特点就是它的操作​​Dom​​​可以完全在内存中进行模拟既在​​V8​​​引擎中处理而不打开浏览器,而且关键是这个是​​Chrome​​团队在维护,会拥有更好的兼容性和前景。

Puppeteer用处

  • 利用网页生成PDF、图片
  • 爬取SPA应用,并生成预渲染内容(即“SSR” 服务端渲染)
  • 可以从网站抓取内容
  • 自动化表单提交、UI测试、键盘输入等
  • 帮你创建一个最新的自动化测试环境(chrome),可以直接在此运行测试用例6.捕获站点的时间线,以便追踪你的网站,帮助分析网站性能问题。

安装Pupeteer

Puppeteer本身依赖6.4以上的Node,但是为了异步超级好用的async/await,推荐使用7.6版本以上的Node。另外headless Chrome本身对服务器依赖的库的版本要求比较高,centos服务器依赖偏稳定,v6很难使用headless Chrome,提升依赖版本可能出现各种服务器问题(包括且不限于无法使用ssh),最好使用高版本服务器。

# 安装命令
npm i puppeteer --save

# 错误信息
ERROR: Failed to download Chromium r515411!
Set "PUPPETEER_SKIP_CHROMIUM_DOWNLOAD" env variable to skip download.

# 设置环境变量跳过下载 Chromium
set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1

# 或者可以这样干,只下载模块而不build
npm i --save puppeteer --ignore-scripts

# 成功安装模块
+ puppeteer@0.13.0
added 1 package in 1.77s

解决安装报错问题​2​:

设置下载代理:

vi .npmrc
type puppeteer_download_host = https://npm.taobao.org/mirrors
yarn add puppeteer -D

PUPPETEER_DOWNLOAD_HOST=https://storage.googleapis.com.cnpmjs.org
npm i puppeteer

忽略浏览器的下载:

env PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true npm i puppeteer -D

例子1 打开一个页面

const puppeteer = require('puppeteer');
// 模拟iPhone 6
const devices = require('puppeteer/DeviceDescriptors');
const iPhone = devices['iPhone 6'];

// launch一个Browser对象
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();
});

例子2 特殊配置

const puppeteer = require('puppeteer');

(async () => {
const browser = await (puppeteer.launch({
// 若是手动下载的chromium需要指定chromium地址, 默认引用地址为 /项目目录/node_modules/puppeteer/.local-chromium/
executablePath: '/Users/huqiyang/Documents/project/z/chromium/Chromium.app/Contents/MacOS/Chromium',
//设置超时时间
timeout: 15000,
//如果是访问https页面 此属性会忽略https错误
ignoreHTTPSErrors: true,
// 打开开发者工具, 当此值为true时, headless总为false
devtools: false,
// 关闭headless模式, 不会打开浏览器
headless: false
}));
const page = await browser.newPage();
await page.goto('https://www.jianshu.com/u/40909ea33e50');
await page.screenshot({
path: 'jianshu.png',
type: 'png',
// quality: 100, 只对jpg有效
fullPage: true,
// 指定区域截图,clip和fullPage两者只能设置一个
// clip: {
// x: 0,
// y: 0,
// width: 1000,
// height: 40
// }
});
browser.close();
})();

例子3 截图

const puppeteer = require('puppeteer');

(async () => {
const pathToExtension = require('path').join(__dirname, '../chrome-mac/Chromium.app/Contents/MacOS/Chromium');
const browser = await puppeteer.launch({
headless: false,
executablePath: pathToExtension
});
const page = await browser.newPage();
await page.setViewport({width: 1000, height: 500});
await page.goto('https://weibo.com/rmrb');
await page.waitForNavigation();
await page.screenshot({path: 'rmrb.png'});
await browser.close();
})();

  1. ​https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pageclickselector-options​​​ ​​↩︎​