出现的背景
chrome59(linux、macos)、 chrome60(windows)之后，chrome自带headless(无界面)模式很方便做自动化测试或者爬虫。但是如何和headless模式的chrome交互则是一个问题。通过启动chrome时的命令行参数仅能实现简易的启动时初始化操作。selenium、webdriver等是一种解决方案，但是往往依赖众多，不够扁平。
puppeteer是谷歌官方出品的一个通过devtools协议控制headless chrome的node库。可以通过puppeteer的提供的api直接控制chrome模拟大部分用户操作来进行ui test或者作为爬虫访问页面来收集数据。
环境和安装
puppeteer本身依赖6.4以上的node，但是为了异步超级好用的，推荐使用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类似其他框架，通过操作browser实例来操作浏览器作出相应的反应。
我要评论
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newpage();
await page.goto('http://rennaiqian.com');
await page.screenshot({path: 'example.png'});
await page.pdf({path: 'example.pdf', format: 'a4'});
await browser.close();
})();
上述代码通过puppeteer的launch方法生成了一个browser的实例，对应于浏览器，launch方法可以传入配置项，比较有用的是在本地调试时传入{headless:false}可以关闭headless模式。
const browser = await puppeteer.launch({headless:false})
browser.newpage方法可以打开一个新选项卡并返回选项卡的实例page，通过page上的各种方法可以对页面进行常用操作。上述代码就进行了截屏和打印pdf的操作。
一个很强大的方法是page.evaluate(pagefunction, ...args)，可以向页面注入我们的函数，这样就有了无限可能
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newpage();
await page.goto('http://rennaiqian.com');
// get the "viewport" of the page, as reported by the page.
const dimensions = await page.evaluate(() => {
return {
width: document.documentelement.clientwidth,
height: document.documentelement.clientheight,
devicescalefactor: window.devicepixelratio
};
});
console.log('dimensions:', dimensions);
await browser.close();
})();
需要注意的是evaluate方法中是无法直接使用外部的变量的，需要作为参数传入，想要获得执行的结果也需要return出来。因为是一个开源一个多月的项目，现在项目很活跃，所以使用时自行查找api才能保证参数、使用方法不会错。
调试技巧
1.关掉无界面模式，有时查看浏览器显示的内容是很有用的。使用以下命令可以启动完整版浏览器：
const browser = await puppeteer.launch({headless: false})
2.减慢速度，slowmo选项以指定的毫秒减慢puppeteer的操作。这是另一个看到发生了什么的方法：
const browser = await puppeteer.launch({
headless:false,
slowmo:250
});
3.捕获console的输出,通过监听console事件。在page.evaluate里调试代码时这也很方便：
page.on('console', msg => console.log('page log:', ...msg.args));
await page.evaluate(() => console.log(`url is ${location.href}`));
4.启动详细日志记录，所有公共api调用和内部协议流量都将通过puppeteer命名空间下的debug模块进行记录
# basic verbose logging env debug="puppeteer:*" node script.js # debug output can be enabled/disabled by namespace env debug="puppeteer:*,-puppeteer:protocol" node script.js # everything but protocol messages env debug="puppeteer:session" node script.js # protocol session messages (protocol messages to targets) env debug="puppeteer:mouse,puppeteer:keyboard" node script.js # only mouse and keyboard api calls # protocol traffic can be rather noisy. this example filters out all network domain messages env debug="puppeteer:*" env debug_colors=true node script.js 2>&1 | grep -v '"network'
爬虫实践
很多网页通过user-agent来判断设备，可以通过page.emulate(options)来进行模拟。options有两个配置项，一个为useragent，另一个为viewport可以设置宽度(width)、高度(height)、屏幕缩放(devicescalefactor)、是否是移动端(ismobile)、有无touch事件(hastouch)。
const puppeteer = require('puppeteer');
const devices = require('puppeteer/devicedescriptors');
const iphone = devices['iphone 6'];
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();
});
上述代码则模拟了iphone6访问某网站，其中devices是puppeteer内置的一些常见设备的模拟参数。
很多网页需要登录，有两种解决方案：
1、让puppeteer去输入账号密码
常用方法：点击可以使用page.click(selector[, options])方法，也可以选择聚焦page.focus(selector)。
输入可以使用page.type(selector, text[, options])输入指定的字符串，还可以在options中设置delay缓慢输入更像真人一些。也可以使用keyboard.down(key[, options])来一个字符一个字符的输入。
2、如果是通过cookie判断登录状态的可以通过page.setcookie(...cookies)，想要维持cookie可以定时访问。
tip：有些网站需要扫码，但是相同域名的其他网页却有登录，就可以尝试去可以登录的网页登录完利用cookie访问跳过扫码。
简单例子
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch({headless: false});
const page = await browser.newpage();
await page.goto('https://baidu.com');
await page.type('#kw', 'puppeteer', {delay: 100});
page.click('#su')
await page.waitfor(1000);
const targetlink = await page.evaluate(() => {
return [...document.queryselectorall('.result a')].filter(item => {
return item.innertext && item.innertext.includes('puppeteer的入门和实践')
}).tostring()
});
await page.goto(targetlink);
await page.waitfor(1000);
browser.close();
})()
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
asp.net中ajax和一般处理程序（handler.ashx）的交互
egg.js创建项目，目录介绍，简单使用，sequelize mysql使用
网友评论