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


Posted in Javascript onMarch 05, 2019

出现的背景

Chrome59(linux、macos)、 Chrome60(windows)之后,Chrome自带headless(无界面)模式很方便做自动化测试或者爬虫。但是如何和headless模式的Chrome交互则是一个问题。通过启动Chrome时的命令行参数仅能实现简易的启动时初始化操作。Selenium、Webdriver等是一种解决方案,但是往往依赖众多,不够扁平。

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

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();
})()

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js中匿名函数的N种写法
Sep 08 Javascript
function foo的原型与prototype属性解惑
Nov 19 Javascript
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
Jun 22 Javascript
JS网页图片按比例自适应缩放实现方法
Jan 15 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
Sep 09 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
Apr 03 Javascript
JavaScript中函数声明与函数表达式的区别详解
Aug 18 Javascript
JS常用函数和常用技巧小结
Oct 15 Javascript
深入理解JavaScript中的尾调用(Tail Call)
Feb 07 Javascript
详解webpack + vue + node 打造单页面(入门篇)
Sep 23 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
Mar 13 Javascript
vue自动路由-单页面项目(非build时构建)
Apr 30 Javascript
[jQuery] 事件和动画详解
Mar 05 #jQuery
Vue 事件处理操作实例详解
Mar 05 #Javascript
Vue插槽原理与用法详解
Mar 05 #Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
Mar 05 #Javascript
JavaScript函数定义方法实例详解
Mar 05 #Javascript
C#程序员入门学习微信小程序的笔记
Mar 05 #Javascript
JavaScript函数的4种调用方法实例分析
Mar 05 #Javascript
You might like
支持php4、php5的mysql数据库操作类
2008/01/10 PHP
.htaccess文件保护实例讲解
2011/02/06 PHP
PHP flock 文件锁详细介绍
2012/12/29 PHP
php获取网页标题和内容函数(不包含html标签)
2014/02/03 PHP
php5.2以下版本无json_decode函数的解决方法
2014/05/25 PHP
php无法连接mysql数据库的正确解决方法
2016/07/01 PHP
Symfony2获取web目录绝对路径、相对路径、网址的方法
2016/11/14 PHP
离开页面时检测表单元素是否被修改,提示保存的js代码
2010/08/25 Javascript
javascript获取作用在元素上面的样式属性代码
2012/09/20 Javascript
Javascript无阻塞加载具体方式
2013/06/28 Javascript
chrome下img加载对height()的影响示例探讨
2014/05/26 Javascript
jquery访问ashx文件示例代码
2014/08/11 Javascript
微信WeixinJSBridge API使用实例
2015/05/25 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
2017/05/20 Javascript
JS自定义滚动条效果简单实现代码
2020/10/27 Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
2017/12/26 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
2018/01/21 Javascript
Vue-Router2.X多种路由实现方式总结
2018/02/09 Javascript
NodeJS实现一个聊天室功能
2019/11/25 NodeJs
Vue实现验证码功能
2019/12/03 Javascript
JS猜数字游戏实例讲解
2020/06/30 Javascript
基于python编写的微博应用
2014/10/17 Python
Python中运行并行任务技巧
2015/02/26 Python
在Python的Bottle框架中使用微信API的示例
2015/04/23 Python
详解python的几种标准输出重定向方式
2016/08/15 Python
详解Python判定IP地址合法性的三种方法
2018/03/06 Python
python实现根据给定坐标点生成多边形mask的例子
2020/02/18 Python
详解修改Anaconda中的Jupyter Notebook默认工作路径的三种方式
2021/01/24 Python
Lentiamo丹麦:购买便宜的隐形眼镜
2021/01/13 全球购物
搞笑获奖感言
2014/01/30 职场文书
《老山界》教学反思
2014/04/08 职场文书
ktv筹备计划书
2014/05/03 职场文书
蜗居观后感
2015/06/11 职场文书
农村房屋租赁合同(范本)
2019/07/23 职场文书
go类型转换及与C的类型转换方式
2021/05/05 Golang
Win10加载疑难解答时出错发生意外错误的解决方法
2022/07/07 数码科技