Puppeteer简单使用
Puppeteer是 Google Chrome 团队官方的 Headless Chrome 工具，平时常用它来完成一些烦杂的重复性工作，也写过一些爬虫，在浏览器中手动完成的大部分事情都可以使用 Puppeteer 完成。也算是测试同学手中的一大利器吧。
安装
就按管方文档中来吧，主要就是设置两个环境变量：
# 如果不想安装Chromium.app
# export PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1
# 如果要安装Chromium.app，国外的源太慢，切回到国内的源
# export PUPPETEER_DOWNLOAD_HOST=https://storage.googleapis.com.cnpmjs.org
npm i puppeteer
如果没有安装Chromium.app，要用本地的Chrome，只要设置好本地的Chrome位置即可：
const browser = await puppeteer.launch({
executablePath: "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
headless: false,
slowMo: 500,
devtools: true
});
在Docker上运行
docker run -p 8080:3000 --restart always -d --name browserless browserless/chrome
然后在脚本中
const puppeteer = require('puppeteer');
// 从 puppeteer.launch() 为：
const browser = await puppeteer.connect({ browserWSEndpoint: 'ws://localhost:3000' });
const page = await browser.newPage();
...
await page.goto(...);
...
await browser.disconnect();
注意：
因为Chrome默认使用 /dev/shm 共享内存，但是 docker 默认 /dev/shm 很小。所以启动Chrome要添加参数 -disable-dev-shm-usage ，不用/dev/shm共享内存。
获取Console内容
page.on('console', async msg => {
if (msg.text() === 'CONVEY_DONE') {
await browser.close();
}
});
加断点调试
只要在前端 evaluate 的代码中加入 debugger 就可以了，当执行到此处时，会进入调试状态：
await page.evaluate(() => {debugger;});
添加自定义函数
添加MD5函数
const puppeteer = require('puppeteer');
const crypto = require('crypto');
puppeteer.launch().then(async browser => {
const page = await browser.newPage();
await page.exposeFunction('md5', text =>
crypto.createHash('md5').update(text).digest('hex')
);
await page.evaluate(async () => {
// 使用 window.md5 计算哈希
const myString = 'PUPPETEER';
const myHash = await window.md5(myString);
console.log(md5 of ${myString} is ${myHash});
});
await browser.close();
});
添加readfile函数
const puppeteer = require('puppeteer');
const fs = require('fs');
puppeteer.launch().then(async browser => {
const page = await browser.newPage();
await page.exposeFunction('readfile', async filePath => {
return new Promise((resolve, reject) => {
fs.readFile(filePath, 'utf8', (err, text) => {
if (err)
reject(err);
else
resolve(text);
});
});
});
await page.evaluate(async () => {
// 使用 window.readfile 读取文件内容
const content = await window.readfile('/etc/hosts');
console.log(content);
});
await browser.close();
});
向中 window 添加方法的功能很强大，可以避免浏览器的一些限制。
页面加载前定制处理
evaluateOnNewDocument 可以指定函数在所属的页面被创建，并且所属页面的任意 script 执行之前被调用。可以用这个办法修改页面的javascript环境，比如给 Math.random 设定种子等。
下面是在页面加载前重写 navigator.languages 属性的例子：
// preload.js
// 重写 `languages` 属性，使其用一个新的get方法
Object.defineProperty(navigator, "languages", {
get: function() {
return ["en-US", "en", "bn"];
}
});
// preload.js 和当前的代码在同一个目录
const preloadFile = fs.readFileSync('./preload.js', 'utf8');
await page.evaluateOnNewDocument(preloadFile);
再举个重置定位信息的例子：
//Firstly, we need to override the permissions
//so we don't have to click "Allow Location Access"
const context = browser.defaultBrowserContext();
await context.overridePermissions(url, ['geolocation']);
...
const page = await browser.newPage();
//whenever the location is requested, it will be set to our given lattitude, longitude
await page.evaluateOnNewDocument(function () {
navigator.geolocation.getCurrentPosition = function (cb) {
setTimeout(() => {
cb({
'coords': {
accuracy: 21,
altitude: null,
altitudeAccuracy: null,
heading: null,
latitude: 0.62896,
longitude: 77.3111303,
speed: null
}
})
}, 1000)
}
});
请求拦截
举个例子，通过请求拦截器取消所有图片请求，这样可以加快执行的速度：
const puppeteer = require('puppeteer');
puppeteer.launch().then(async browser => {
const page = await browser.newPage();
await page.setRequestInterception(true);
page.on('request', interceptedRequest => {
if (interceptedRequest.url().endsWith('.png') || interceptedRequest.url().endsWith('.jpg'))
interceptedRequest.abort();
else
// 改写request对象
interceptedRequest.continue(
headers: Object.assign({}, request.headers(), {
'SlaveID': '4c625b7861a92c7971cd2029c2fd3c4a'
});
});
await page.goto('https://example.com');
await browser.close();
});
注意 启用请求拦截器会禁用页面缓存。
并行运行
const puppeteer = require('puppeteer')
const parallel = 5;
(async () => {
puppeteer.launch().then(async browser => {
const promises = []
for (let i = 0; i < parallel; i++) {
console.log('Page ID Spawned', i)
promises.push(browser.newPage().then(async page => {
await page.setViewport({ width: 1280, height: 800 })
await page.goto('https://en.wikipedia.org/wiki/' + i)
await page.screenshot({ path: 'wikipedia_' + i + '.png' })
}))
}
await Promise.all(promises)
await browser.close()
})
})();
前端运行的代码
在运用Puppeteer过程中，免不得大量的运行在前端的代码，即运行在浏览器中的代码。主要用于查找元素、获取元元素的属性等，以下举几个例子说明：
定位元素
// button的id和class等属性变化，文本却不变，可以用innerText来准确定位操作它
await page.evaluate(() => {
let btns = [...document.querySelector(".HmktE").querySelectorAll("button")];
btns.forEach(function (btn) {
if (btn.innerText == "Log In")
btn.click();
});
});
获取元素信息
一个thal 中的例子，回调函数可以接收多个参数：
for (let h = 1; h <= numPages; h++) {
// 跳转到指定页码
await page.goto(`${searchUrl}&p=${h}`);
// 执行爬取
const users = await page.evaluate((sInfo, sName, sEmail) => {
return Array.prototype.slice.apply(document.querySelectorAll(sInfo))
.map($userListItem => {
// 用户名
const username = $userListItem.querySelector(sName).innerText;
// 邮箱
const $email = $userListItem.querySelector(sEmail);
const email = $email ? $email.innerText : undefined;
return {
username,
email,
};
})
// 不是所有用户都显示邮箱
.filter(u => !!u.email);
}, USER_LIST_INFO_SELECTOR, USER_LIST_USERNAME_SELECTOR, USER_LIST_EMAIL_SELECTOR);
await page.waitForSelector('.block-items');
const orders = await page.$eval('.block-items', element => {
const ordersHTMLCollection = element.querySelectorAll('.block-item');
const ordersElementArray = Array.prototype.slice.call(ordersHTMLCollection);
const orders = ordersElementArray.map(item => {
const a = item.querySelector('.order-img a');
return {
href: a.getAttribute('href'),
title: a.getAttribute('title'),
};
});
return orders;
});
console.log(`found ${orders.length} order`);
运行于前端的代码，主要是由 page.$eval() 、page.evaluate()之类的函数来执行。它们有些区别。 page.evaluate ，可传入多个参数，或第二个参数作为句柄，而 page.$eval 则针对选中的一个 DOM 元素执行操作。比如：
// 获取 html
// 获取上下文句柄
const bodyHandle = await page.$('body');
// 执行计算
const bodyInnerHTML = await page.evaluate(dom => dom.innerHTML, bodyHandle);
// 销毁句柄
await bodyHandle.dispose();
console.log('bodyInnerHTML:', bodyInnerHTML);
而 page.$eval看上去简洁得多：
const bodyInnerHTML = await page.$eval('body', dom => dom.innerHTML);
console.log('bodyInnerHTML: ', bodyInnerHTML);
截图
Puppeteer 既可以对某个页面进行截图，也可以对页面中的某个元素进行截图：
// 截屏
await page.screenshot({
path: './full.png',
fullPage: true
// 也可截部分
// clip: {x: 0, y: 0, width: 1920, height: 800}
});
// 截元素
let [el] = await page.$x('#order-item');
await el.screenshot({
path: './part.png'
});
避免页面中DOM变化
如果页面中DOM会被javascript改动时，可以考虑合并多个 async ，不要用：
const $atag = await page.$('a.order-list');
const link = await $atag.getProperty('href');
await $atag.click();
而是用用一个 async 代替：
await page.evaluate(() => {
const $atag = document.querySelector('a.order-list');
const text = $atag.href;
$atag.click();
});
两个运行环境
Puppeteer代码是分别跑在Node.js和浏览器两个javascript运行时中的。Puppeteer脚本是运行在Node.js中的，但是 evaluate 、 evaluateHandle 等操作DOM的代码却是运行在浏览器中的。同样，Puppeteer也提供了提供了 ElementHandle 和 JsHandle 将 页面中元素和DOM对象封装成对应的 Node.js 对象，这样可以直接这些对象的封装函数进行操作 Page DOM。理解这些概念很重要。
所以在执行前端代码时，前端代码函数会先被序列化传给浏览器再运行。所以，两个运行时不能共享变量：
// 不能工作，浏览器中访问不到atag这个变量
const atag = 'a';
await page.goto(...);
const clicked = await page.evaluate(() => document.querySelector(atag).click());
只能用变量传递的方式：
const atag = 'a';
await page.goto(...);
const clicked = await page.evaluate(($sel) => document.querySelector($sel).click(), atag);
等待
等待页面加载
几个打开页面的函数，如goto、waitForNavigation、reload等函数内置有等待参数：waitUtil 和 timeout，可以用它来等待页面打开：
await page.goto('...', {
timeout: 60000,
waitUntil: [
'load', //等待 “load” 事件触发
'domcontentloaded', //等待 “domcontentloaded” 事件触发
'networkidle0', //在 500ms 内没有任何网络连接
'networkidle2' //在 500ms 内网络连接个数不超过 2 个
]
});
另外，点击了链接之后，需要使用 page.waitForNavigation 来等待页面加载。
await page.goto(...);
await Promise.all([
page.click('a'),
await page.waitForNavigation()
]);
等待元素或响应
- page.waitForXPath：用XPath等待页面元素，返回对应的 ElementHandle 实例
- page.waitForSelector ：用CSS选择器等待页面元素，返回对应的 ElementHandle 实例
- page.waitForResponse ：等待响应结束，返回 Response 实例
- page.waitForRequest：等待请求发起，返回 Request 实例
await page.waitForXPath('//a');
await page.waitForSelector('#gameAccount');
await page.waitForResponse('.../api/user/123');
await page.waitForRequest('.../api/users');
自定义等待
如果现有的等待机制都不能满足需求，puppeteer 还提供了两个函数：
- page.waitForFunction：等待在页面中自定义函数的执行结果，返回 JsHandle 实例
- page.waitFor：设置指定的等待时间
await page.goto('...', {
timeout: 60000,
waitUntil: 'networkidle2'
});
// 业务代码中设定window中的对象，存在表示加载完成
let acquireHandle = await page.waitForFunction('window.ACQUIREDONE', {
polling: 120
});
const acquireResult = await acquireHandle.jsonValue();
console.info(acquireResult);
基于Puppeteer的框架
从上面看出Puppeteer编写脚本并不是很直观，可以考虑用其它更好的框架，比如Rize 。比如，用Rize写的代码类似于下面这样的，明显比原生的Puppeteer代码要简洁、直观的多。
原生的Puppeteer代码：
const puppeteer = require('puppeteer')
void (async () => {
const browser = await puppeteer.launch()
const page = await browser.newPage()
await page.goto('https://github.com')
await page.screenshot({ path: 'github.png' })
await browser.close()
})()
对比用Rize写的代码：
const Rize = require('rize')
const rize = new Rize()
rize
.goto('https://github.com')
.saveScreenshot('github.png')
.end()
而且用Rize写代码时，仍然可以用原生Puppeteer的Api来写。
性能优化
- 如有可能尽量使用同一个浏览器实例，或多个实例指定相同的缓存路径，这样缓存可以共用
- 通过请求拦截没必要加载的资源，比如图片或媒体等
- 减少打开的 tab 页数量，以免占用太多的资源，长时间运行的Puppeteer脚本，最好定时重启 Chrome 实例
- 启动Chrome时关闭没必要的配置，比如：-no-sandbox（沙箱功能），--disable-extensions（扩展程序）等
作者：OF656
链接：https://www.jianshu.com/p/2f233e60bf33
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
