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為前端開發者提供了更好的體驗，也為測試人員被能夠編寫更可靠的自動化測試提供了新的工具。