puppeteer,新款headless chrome
puppeteer
puppeteer是一种谷歌开发的Headless Chrome,因为puppeteer的出现,业内许多自动化测试库停止维护,比如PhantomJS,Selenium IDE for Firefox 。
puppeteer是干啥用的?
官方给了一些功能:
- 页面生成pdf
- 爬spa/ssr类的网站
- 自动提交表单,模拟用户操作,ui测试等等
- 提供自动化测试环境
- 分析网页性能问题,基于chrome timeline
其实对于这么一个浏览器,我们能做的还有很多,比如前端监控,定期查询页面异常。这种思想产生的page-monitor。主要的功能其实就是基于它是一个浏览器,它可以模拟用户输入。能做什么依赖你的想象。
用code介绍一下puppeteer
页面生成pdf
const puppeteer = require('puppeteer'); (async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('http://open.toutiao.com', {waitUntil: 'networkidle2'});
await page.pdf({path: 'hn.pdf', format: 'A4'});
await browser.close();
})();
puppeteer是基于node v6.4.0,但是await/async的语法需要node v7.6.0以上才支持。
可以npm i puppeteer
然后在命令行看一下效果。
代码都是api没有什么可以讲的。需要说的一点就是open.toutiao.com下面的文章内容都是异步接口请求,puppeteer是怎么获取内容的?
page.goto的配置项waitUntil:networkidle2, 等待一直到500ms内的请求数不超过2个。其实不保证准确获得内容,那把等待时间写长一点就可以了。await page.waitFor(2000);
调试
- puppeteer并不是只有headless模式,打开puppeteer的ui界面:
puppeteer.launch({headless: false)
,再放慢puppeteer执行的动作puppeteer.launch({headless: false, slowMo: 250})
,就可以轻松调试。 - ‘打call?’
page.on('console', msg => console.log('PAGE LOG:', msg.text()));
事件监听轻松打出页面的log。
爬虫
这里爬一下头条的新闻标题:
(async () => {
const browser = await puppeteer.launch({headless: false, slowMo: 250});
const page = (await browser.pages())[0];
page.on('console', msg => console.log('PAGE LOG:', msg.text()));
await page.goto('https://open.toutiao.com'); await page.evaluate(() => console.log(`url is ${location.href}`)); const newsTitle = await page.evaluate((sel) => {
const $els = document.querySelectorAll(sel);
return Array.from($els).map((v) => {
console.log(v.innerText); // 会被page.on 'console' 监听到
return v.innerText
})
}, 'section h3');
console.log(newsTitle) // 可以处理新闻标题。
await page.screenshot({path: 'toutiao.png'}); // 屏幕快照
await browser.close();
})();
模拟用户操作
这个功能用途挺多的,比如自动登陆,e2e测试,刷赞,抢票什么的,当然如果能跳过验证码的话。
github 登陆
模拟输入用户名和密码。
await page.goto('https://github.com/login');
await page.click('#login_field');
await page.type('username'); await page.click('#password');
await page.type('password'); await page.click('#login > form > div.auth-form-body.mt-3 > input.btn.btn-primary.btn-block'); await page.waitForNavigation();
puppetter提供了page.focus,page.click,page.type,page.$eval(获取dom属性)等等api,鼠标位置,按键按下,tap,页面跳转众多用户可操作的api,都可以通过程序来模拟。
对这种模拟登陆,puppeteer还贴心的提供了这种api - -!
page.type('#mytextarea', 'World', {delay: 100}); // Types slower, like a user
ui测试
之前分享过的testcafe,跟puppeteer的api非常像,testcafe是一个自动化测试框架,他与puppeteer不同的一点就是他集成了mocha断言库。
puppeteer和testcafe都提供了一套自动化测试的环境。puppeteer做e2e的测试需要自己选一个断言库,不过无伤大雅。
请求拦截/模拟请求
puppeteer比testcafe好的一点就是支持请求拦截,记得当初用testcafe测试请求是否被发出用了很多黑科技,提过issue。。
const puppeteer = require('puppeteer'); puppeteer.launch({headless: false, slowMo: 250}).then(async browser => {
const page = await browser.newPage();
await page.setRequestInterception(true);
page.on('console', msg => console.log('PAGE LOG:', msg.text()));
page.on('request', interceptedRequest => {
if (interceptedRequest.url().endsWith('.png') || interceptedRequest.url().endsWith('.jpg'))
interceptedRequest.abort();
else
interceptedRequest.continue();
});
await page.goto('https://open.toutiao.com');
// await browser.close();
});
提供了request,response事件,可以拦截请求,首先需要打开这个开关await page.setRequestInterception(true);
。
这里的例子就是停掉所有的png和jpg请求。
拦截能做的东西有很多,比如一些爬虫可以通过拦截请求捕获一些数据,来处理一些东西。
修改环境
puppeteer可以通过page.setViewport,page.setUserAgent来修改访问的环境。
await page.setViewport({
width: 1920,
height: 1080
}); await page.setUserAgent('Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36');
puppeteer/DeviceDescriptors
还给我们封装好了一些环境,比如:
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); // emulate的配置有Viewport,UserAgent等等。之前的setUserAgent等方法是它的语法糖。
await page.goto('https://www.google.com');
// other actions...
await browser.close();
});
性能测试
可以生成一个trace.json的文件,供chrome控制台解析,await page.metrics()
还可以给出一些性能测试的数据。
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.tracing.start({path: 'trace.json'})
await page.goto('https://open.toutiao.com')
await page.tracing.stop()
const metrics = await page.metrics()
console.log(metrics)
await browser.close();
})();
// output
{ Timestamp: 27888.820538,
Documents: 2,
Frames: 1,
JSEventListeners: 58,
Nodes: 171,
LayoutCount: 20,
RecalcStyleCount: 26,
LayoutDuration: 0.042335,
RecalcStyleDuration: 0.010091,
ScriptDuration: 0.124838,
TaskDuration: 0.000039,
JSHeapUsedSize: 6388448,
JSHeapTotalSize: 10334208 }
puppeteer,新款headless chrome的更多相关文章
- puppeteer,新款headless chrome!
puppeteer puppeteer是一种谷歌开发的Headless Chrome,因为puppeteer的出现,业内许多自动化测试库停止维护,比如PhantomJS,Selenium IDE fo ...
- PuppeteerSharp: 更友好的 Headless Chrome C# API
前端就有了对 headless 浏览器的需求,最多的应用场景有两个 UI 自动化测试:摆脱手工浏览点击页面确认功能模式 爬虫:解决页面内容异步加载等问题 也就有了很多杰出的实现,前端经常使用的莫过于 ...
- Headless Chrome入门
原文地址:Getting Started with Headless Chrome By EricBidelman Engineer @ Google working on web tooling ...
- Puppeteer: 更友好的 Headless Chrome Node API
很早很早之前,前端就有了对 headless 浏览器的需求,最多的应用场景有两个 UI 自动化测试:摆脱手工浏览点击页面确认功能模式 爬虫:解决页面内容异步加载等问题 也就有了很多杰出的实现,前端经常 ...
- puppeteer(headless chrome)实现网站登录
puppeteer简介 puppeteer是Chrome团队开发的一个node库,可以通过api来控制浏览器的行为,比如点击,跳转,刷新,在控制台执行js脚本等等.有了这个神器,写个爬虫,自动签到,网 ...
- Headless Chrome:服务端渲染JS站点的一个方案【上篇】【翻译】
原文链接:https://developers.google.com/web/tools/puppeteer/articles/ssr 注:由于英文水平有限,没有逐字翻译,可以选择直接阅读原文 tip ...
- Headless Chrome:服务端渲染JS站点的一个方案【中篇】【翻译】
接上篇 防止重新渲染 其实说不对客户端代码做任何修改是忽悠人的.在我们的Express 应用中,通过Puppteer加载页面,提供给客户端响应,但是这个过程是有一些问题的. js脚本在服务端的Head ...
- Serverless 实战——使用 Rendertron 搭建 Headless Chrome 渲染解决方案
为什么需要 Rendertron? 传统的 Web 页面,通常是服务端渲染的,而随着 SPA(Single-Page Application) 尤其是 React.Vue.Angular 为代表的前端 ...
- Headless Chrome Node API
puppeteer Headless Chrome Node API https://github.com/GoogleChrome/puppeteer https://pptr.dev/ PWA h ...
随机推荐
- css背景色 透明字体不透明
.demo{ padding: 25px; background-color: rgba(,,,0.5);/* IE9.标准浏览器.IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */ }
- HTML5-SVG-基础篇
什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺 ...
- nginx压测工具--wrk
基本使用 命令行敲下wrk,可以看到使用帮助 Usage: wrk <options> <url> Options: -c, --connections <N> C ...
- windows电脑连接蓝牙耳机的正确步骤
前言 我使用的是小米运动蓝牙耳机,操作系统为win7,废话少说直接上教程 是否支持蓝牙功能 按住win+R,打开[运行],输入devmgmt.msc,回车. 只要有Bluetooth 无线电收发器,那 ...
- 【XSY2808】董先生的休闲方案 组合数学
题目描述 有\(n\)个方案,编号为\(1\ldots n\). 最开始你不知道每个方案的编号. 你要按顺序提出这些方案. 每一个时刻你要做以下事情: 如果你阅读过下一个方案,就提出这个方案. 否则随 ...
- 【XSY2772】数列 特征多项式 数学
题目描述 给你一个数列: \[ f_n=\begin{cases} a^n&1\leq n\leq k\\ \sum_{i=1}^k(a-1)f_{n-i}&n>k \end{c ...
- WINDOWS 包管理器 Chocolatey
https://chocolatey.org/ - 官网 安装: @"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe& ...
- thinkphp 5内置验证规则-基本版
内置规则 系统内置的验证规则如下: 格式验证类 require 验证某个字段必须,例如: 'name'=>'require' number 或者 integer 验证某个字段的值是否为数字(采用 ...
- mysql安转过程中出现的问题! Fatal error: Can't open and lock privilege tables: Table 'mysql.user' doesn't exis
net start mysql启动失败,报错信息如上,因缺少mysql这个库 所以跳过 在my.ini中添加 --skip-grant-tables 再启动mysql 然后进入mysql 倒入一个从其 ...
- C# 新语法收集
内联变量 使用int.tryparst时,先要申明变量,用于out参数 int d; int.tryparse(s,out d); 使用内联变量写法可以如下.功能一样简化了写化 int.trypars ...