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 }