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!的更多相关文章

  1. puppeteer,新款headless chrome

    puppeteer puppeteer是一种谷歌开发的Headless Chrome,因为puppeteer的出现,业内许多自动化测试库停止维护,比如PhantomJS,Selenium IDE fo ...

  2. PuppeteerSharp: 更友好的 Headless Chrome C# API

    前端就有了对 headless 浏览器的需求,最多的应用场景有两个 UI 自动化测试:摆脱手工浏览点击页面确认功能模式 爬虫:解决页面内容异步加载等问题 也就有了很多杰出的实现,前端经常使用的莫过于 ...

  3. Headless Chrome入门

    原文地址:Getting Started with Headless Chrome  By EricBidelman  Engineer @ Google working on web tooling ...

  4. Puppeteer: 更友好的 Headless Chrome Node API

    很早很早之前,前端就有了对 headless 浏览器的需求,最多的应用场景有两个 UI 自动化测试:摆脱手工浏览点击页面确认功能模式 爬虫:解决页面内容异步加载等问题 也就有了很多杰出的实现,前端经常 ...

  5. puppeteer(headless chrome)实现网站登录

    puppeteer简介 puppeteer是Chrome团队开发的一个node库,可以通过api来控制浏览器的行为,比如点击,跳转,刷新,在控制台执行js脚本等等.有了这个神器,写个爬虫,自动签到,网 ...

  6. Headless Chrome:服务端渲染JS站点的一个方案【上篇】【翻译】

    原文链接:https://developers.google.com/web/tools/puppeteer/articles/ssr 注:由于英文水平有限,没有逐字翻译,可以选择直接阅读原文 tip ...

  7. Headless Chrome:服务端渲染JS站点的一个方案【中篇】【翻译】

    接上篇 防止重新渲染 其实说不对客户端代码做任何修改是忽悠人的.在我们的Express 应用中,通过Puppteer加载页面,提供给客户端响应,但是这个过程是有一些问题的. js脚本在服务端的Head ...

  8. Serverless 实战——使用 Rendertron 搭建 Headless Chrome 渲染解决方案

    为什么需要 Rendertron? 传统的 Web 页面,通常是服务端渲染的,而随着 SPA(Single-Page Application) 尤其是 React.Vue.Angular 为代表的前端 ...

  9. Headless Chrome Node API

    puppeteer Headless Chrome Node API https://github.com/GoogleChrome/puppeteer https://pptr.dev/ PWA h ...

随机推荐

  1. CentOS 7安装Oracle 11gR2以及设置自启动

    一.环境准备 1.正确无误的CentOS 7系统环境 CentOS 7安装:http://www.cnblogs.com/VoiceOfDreams/p/8043958.html 2.正确的JDK环境 ...

  2. yum错误,Cannot find a valid baseurl for repo: base 和 No more mirrors to try

    可能出错原因: 1. yum 配置错误 2. 虚拟机无法连接外网 3. 域名解析没有 如何解决这个错误? 1. 网上找 /ect/yum.conf 和 /etc/yum.repos.d/CentOS- ...

  3. 使用telnet发送HTTP请求

    使用telnet发送HTTP请求 写这篇博客,其实没有太大的实际意义,但是还是很有必要的,如果用好Telnet指令,就可以很好的理解HTTP的一些概念,特别是http1.1的持续链接. 要想使用Tel ...

  4. 一、Python表达式基础

    Python 能执行简单的计算器的功能: 如>>2+2 ==> 4,1/2==>0.5或者这样写1/2.0==>0.5(取浮点型) 1//2 ==>0 (" ...

  5. grep使用技巧一:模式pattern为字符串文件

    pattern文件: antc  areq  bdos  bogt   …… igs.txt文件: abmf    298.4725   16.2623   abpo     47.2292  -19 ...

  6. redis动态配置

    Config get CONFIG GET parameter CONFIG GET 命令用于取得运行中的 Redis 服务器的配置参数(configuration parameters),在 Red ...

  7. 理解DNS

    理解DNS 写在前面: 目前,我们大部分的网络通信都是基于TCP/IP协议的,而TCP/IP又基于IP地址作为唯一标识进行通信,随着需要记忆的IP地址数量的增多,肯定会超出我们的记忆能力范围,但如果使 ...

  8. IIS6/7 配置问题

    IIS7 / IIS6 HttpMoudles 在web.config 中不同的配置 原创 2011年04月25日 08:44:00 标签: iis / server 4357 昨天把我们写的程序布署 ...

  9. 缓存之ehcache

    1.EhCache缓存框架简介 EhCache 是一个纯Java的进程内缓存框架,具有快速.精干等特点,是Hibernate中默认的CacheProvider. 我们使用EhCache缓存框架主要是为 ...

  10. python--关于赋值与深浅拷贝的认识

    作为一个自学python的小白,平时用到深浅拷贝的机会很少,因此对其也是一知半解.但是,作为一个立志成为后端工程狮的男人,眼里揉不了沙子,于是专门花时间补了补课,在此记录一下学习心得.    在讲深浅 ...