Puppeteer是谷歌官方出品的一个通过DevTools协议控制headless Chrome的Node库。可以通过Puppeteer的提供的api直接控制Chrome模拟大部分用户操作来进行UI Test或者作为爬虫访问页面来收集数据。
Puppeteer本身依赖6.4以上的Node,但是为了异步超级好用的async/await,推荐使用7.6版本以上的Node。另外headless Chrome本身对服务器依赖的库的版本要求比较高,centos服务器依赖偏稳定,v6很难使用headless Chrome,提升依赖版本可能出现各种服务器问题(包括且不限于无法使用ssh),最好使用高版本服务器。
Puppeteer因为是一个npm的包,所以安装很简单:
npm i puppeteer
或者
yarn add puppeteer
Puppeteer安装时自带一个最新版本的Chromium,可以通过设置环境变量或者npm config中的PUPPETEER_SKIP_CHROMIUM_DOWNLOAD跳过下载。如果不下载的话,启动时可以通过puppeteer.launch([options])配置项中的executablePath指定Chromium的位置。
puppeteer.launch(options)
参数名称 | 参数类型 | 参数说明 |
---|---|---|
ignoreHTTPSErrors | boolean | 在请求的过程中是否忽略 Https 报错信息,默认为 false |
headless | boolean | 是否以“无头”的模式运行chrome,也就是不显示UI,默认为true |
executablePath | string | 可执行文件的路径,Puppeteer 默认是使用它自带的 chrome webdriver, 如果你想指定一个自己的 webdriver 路径,可以通过这个参数设置 |
slowMo | number | 使 Puppeteer 操作减速,单位是毫秒。如果你想看看 Puppeteer 的整个工作过程,这个参数将非常有用 |
args | Array(String) | 传递给 chrome 实例的其他参数,比如你可以设置浏览器窗口大小具体参数 |
timeout | number | 等待chrome实例启动的最长时间,默认是3000ms,如果传入0,则不限制时间 |
dumpio | boolean | 是否将浏览器锦程stdout和stderr导入到process.stdout和process.stderr中,默认为false |
userDataDir | string | 设置用户数据目录,默认linux是在~/.config目录,window 默认在 C:Users{USER}AppDataLocalGoogleChromeUser Data, 其中 {USER} 代表当前登录的用户名 |
env | Object | 指定对chromium可见的环境变量,默认为process.env |
devtools | boolean | 是否为每个选项卡自动打开DevTools面板,这个选项只有当headless设置为false的时候有效 |
browser对象
方法名 | 说明 |
---|---|
browser.close() | 返回一个promise对象,用于关闭浏览器 |
browser.newPage() | 返回一个promise对象,创建一个page实例 |
page对象
方法名 | 说明 |
---|---|
page.goto(url[, options]) | 返回一个promise对象,url是目标链接 |
page.waitForSelector() | 等待某个选择器的元素加载之后,这个元素可以是异步加载的 |
page.evaluate(pageFunction[,args]) | 返回一个可序列化的普通对象,pageFunction 表示要在页面执行的函数, args 表示传入给 pageFunction 的参数 |
Puppeteer类似其他框架,通过操作Browser实例来操作浏览器作出相应的反应。
const puppeteer = require('puppeteer');
/* 爬虫的目标链接地址: 豆瓣电影 */
const url = `https://movie.douban.com/tag/#/?sort=R&range=0,10&tags=`;
const sleep = time => new Promise(resolve => {
setTimeout(resolve, time);
});
(async () => {
console.log('crawler start to visit the target address');
/* dumpio 是否将浏览器进程stdout和stderr导入到process.stdout和process.stderr中 */
const browser = await puppeteer.launch({
args: ['--no-sandbox'],
dumpio: false
});
const page = await browser.newPage();
await page.goto(url, {
waitUntil: 'networkidle2'
});
await sleep(3000);
await page.waitForSelector('.more');
for(let i = 0; i < 1; i++) {
await sleep(3000);
await page.click('.more');
}
const result = await page.evaluate(() => {
let $ = window.$;
let nodeItems = $('.list-wp a');
let links = [];
/* 获取对应的元素节点 */
if(nodeItems.length >= 1) {
nodeItems.each((index, item) => {
let elem = $(item);
let movieId = elem.find('div').data('id');
let title = elem.find('.title').text();
let rate = Number(elem.find('.rate').text());
let poster = elem.find('img').attr('src').replace('s_ratio_poster','l_ratio_poster');
links.push({
movieId,
title,
rate,
poster,
})
})
}
return links;
});
browser.close();
console.log(result)
})();
const puppeteer = require('puppeteer');
const url = 'https://cn.vuejs.org/v2/guide/';
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(url, { waitUntil: 'networkidle0' });
/* 选择你要输出的那个PDF文件路径,把爬取到的内容输出到PDF中,必须是存在的PDF,可以是空内容,如果不是空的内容PDF,那么会覆盖内容 */
let pdfFilePath = './index.pdf';
/* 根据你的配置选项,我们这里选择A4纸的规格输出PDF,方便打印 */
await page.pdf({
path: pdfFilePath,
format: 'A4',
scale: 1,
printBackground: true,
landscape: false,
displayHeaderFooter: false
});
browser.close();
})()
Chrome自带headless(无界面)模式很方便做自动化测试或者爬虫。但是如何和headless模式的Chrome交互则是一个问题。通过启动Chrome时的命令行参数仅能实现简易的启动时初始化操作。
Puppeteer是Chrome团队开源的Node库,其提供基于DevTools协议的高阶API让开发人员能够控制Headless Chrome、Chromium、Chrome等浏览器,通过Puppeteer能够将平时手动使用浏览器的操作通过代码的方式自动化执行
这两天开始看puppeteer,发现居然也能被某数的前端js检测出来!?想找找到底哪个环节把webdriver属性加上的,但是文本搜索发现puppeteer源码中并没有……后来chrome中用chrome:version看了下命令行启动参数
Puppeteer是无头浏览器中的佼佼者,基于nodejsd,提供了简单好用的API。在介绍Puppeteer的基本用法前,我们需要了解一下什么是无头浏览器
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!