深入理解Puppeteer的入门教程和实践

更新时间：2019年03月05日 14:24:46 作者：任乃千

这篇文章主要介绍了深入理解Puppeteer的入门教程和实践，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

出现的背景

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，但是为了异步超级好用的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类似其他框架，通过操作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();
})()

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

nodejs教程之异步I/O
nodejs的核心之一就是非阻塞的异步IO，于是想知道它是怎么实现的，经过一份研究，找到些答案，在此跟大家分享下。
2014-11-11
使用node.js搭建服务器
最近需要完成一个课程设计，被项目经理（组长）分配写界面功能，下面小编通过本文给大家分享使用使用node搭建小型服务器的方法，需要的朋友参考下
2017-05-05
nodejs+express最简易的连接数据库的方法
这篇文章主要介绍了nodejs+express 最简易的连接数据库，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-12-12
Node.js返回JSONP详解
下面小编就为大家带来一篇Node.js返回JSONP详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-05-05
Node.js中处理特殊字符的文件名解决方案
在Node.js中,通过path模块提供的basename方法,我们可以轻松地从文件路径中提取文件名,在这篇文章中,我们将介绍一种安全稳妥的方法,结合使用dirname和长度计算,以处理特殊字符的文件名,感兴趣的朋友跟随小编一起看看吧
2024-03-03
Node.js API详解之 timer模块用法实例分析
这篇文章主要介绍了Node.js API详解之 timer模块用法,结合实例形式分析了Node.js API中timer模块基本功能、原理、用法及操作注意事项,需要的朋友可以参考下
2020-05-05
Node.js dgram模块实现UDP通信示例代码
这篇文章主要介绍了Node.js dgram模块实现UDP通信示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
抛弃Nginx使用nodejs做反向代理服务器
每当提起反向代理器，人们通常一想到的就是 Nginx，但是今天我们暂时忽略大名鼎鼎的 Nginx，采用同样也是使用单线程、事件循环的服务端小弟——Nodejs 来达成。
2014-07-07
npm安装的全局包/工具不能使用,不是内部/外部命令的解决方法
这篇文章主要给大家介绍了关于npm安装的全局包/工具不能使用,不是内部/外部命令的解决方法,文中通过图文将解决的方法介绍的非常详细,需要的朋友可以参考下
2023-03-03
利用express启动一个server服务的方法
下面小编就为大家带来一篇利用express启动一个server服务的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09