ChromeHeadless——革新了前端测试以及网站监控!

Chrome已经成为了一个完善的浏览器生态系统，对于前端开发者来说，Chrome Devtools是必备的开发工具之一。Chrome还提供了一种无桌面界面的浏览器模式称之为Headless Mode，具有远程控制、命令行调用、页面性能分析等特性。在前端自动化测试或者网站监控方面，ChromeHeadless的表现相比Selenium等其他测试框架有着明显的优越性。

一、ChromeHeadless让前端自动化测试变得更加高效

自动化测试对于前端开发的重要性已经与日俱增。传统的前端自动化测试框架例如Protractor依赖于Selenium WebDriver来驱动浏览器，执行自动化测试任务时需要启动一个完整的浏览器工作环境。计算机资源的消耗以及前端测试的等待时间也成为了该方法的瓶颈。

与传统方法相比，ChromeHeadless显然更加轻量化且不需要等待可见元素出现，可以显著提高测试的效率。跑完一场自动化测试任务的时间由几十秒甚至几分钟缩短到几秒钟，极大地提高了测试效率。同时开发者可以通过Chrome Remote Debugging Protocol API，自动化地启动或停止ChromeHeadless，也可以通过JavaScript交互、修改页面CSS或者模拟用户操作。

一个简单的例子，在ChromeHeadless中使用Puppeteer对百度进行简单的验证:

const puppeteer = require('puppeteer');

test('百度首页测试', async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://www.baidu.com');
  const title = await page.title();
  expect(title).toBe('百度一下，你就知道');
  await browser.close();
});

二、使用ChromeHeadless进行页面性能检测

在ChromeHeadless中，我们可以交互式地测试资源，网络请求以及页面性能。我们可以使用一些在开发中并不常用却非常有用的Devtools命令来进行性能分析，例如Timelines、Profiles、Audits、Coverage以及使用Tracing API关注关键性能指标。

在下面的代码中，我们模拟加载百度首页并使用Tracing API测量其关键渲染路径时间——从开始导航到首次中断解析并绘制到屏幕上的时间点。

const puppeteer = require('puppeteer');

test('网站性能测试', async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.tracing.start({path: 'trace.json'});
  await page.goto('https://www.baidu.com');
  await page.tracing.stop();
  await browser.close();
});

我们可以使用Chrome browser扩展程序或者分析器将生成的trace.json文件转化为可读的交互式时间轴，分析出渲染瓶颈以及一些性能问题。

三、ChromeHeadless监控网站性能自动化

我们可以使用Headless模式来设置网站性能测试、跟踪用户体验并检测运营问题。我们可以使用Headless绑定服务器，以节省用户端的资源和时间。PhantomJS在Headless浏览器早期领先，目前ChromeHeadless更容易使用而且性能更好，例如Puppeteer的事件驱动特性可以更加轻松地对页面进行操作。

在下面的代码中，我们实现了一个通过检测页面响应时间，同时包含多种浏览器的跨平台脚本：

const puppeteer = require('puppeteer');
const expect = require('chai').expect;

describe('网站性能监控', () => {
  let browser;
  let page;

  before(async () => {
    browser = await puppeteer.launch();
    page = await browser.newPage();
  });

  after(async () => {
    await browser.close();
  });

  it('百度首页响应时间', async () => {
    await page.goto('https://www.baidu.com');
    const result = await page.evaluate(() => {
      return window.performance.timing.loadEventEnd;
    });
    expect(result).to.be.a('number');
  });
});

四、使用ChromeHeadless进行网站截屏测试

当在服务器上运行WebDriver时，屏幕上不会被任何浏览器渲染出来。这也使得很难捕捉可见性和布局变化相关的问题。PhantomJS提供了可决定的、快速的、基于Web的、跨平台的截图机制。ChromeHeadless同样可以输出网站的截图，可以使用Puppeteer对网站的页面截图进行比较。

const puppeteer = require('puppeteer');
const expect = require('chai').expect;

describe('网站截图测试', () => {
  let browser;
  let page;

  before(async () => {
    browser = await puppeteer.launch();
    page = await browser.newPage();
  });

  after(async () => {
    await browser.close();
  });

  it('截图对比测试', async () => {
    await page.goto('https://www.baidu.com');
    await page.setViewport({ width: 1000, height: 500 });
    const screenshot = await page.screenshot();
    expect(screenshot).to.matchImageSnapshot();
  });
});

五、小结

ChromeHeadless提供了一些非常出色的特性，例如快速准确地进行自动化测试、测量网站性能、监控网站性能以及截图测试。ChromeHeadless为前端开发者提供了更好的体验，也为测试人员被能够编写更可靠的自动化测试提供了新的工具。