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。。

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