Headless Testing入坑指南
Headless Testing是什麼
Headless是指沒有介面的瀏覽器運行環境。 那麼Headless Testing也就不難理解，是基於無介面化提供的命令列工具和api進行的前端測試手段。
為什麼要使用Headless Testing
Headless Testing有下面的優勢：
- 比真實瀏覽器更快
- 抓取數據更加方便
- 便於構建自動化測試腳本
- 輕鬆類比多個瀏覽器
●比真實瀏覽器更快
由於無頭測試不需要啟動瀏覽器的GUI介面，所以你可以繞過真正流覽的載入CSS、JAVAScript和打開、繪製HTML的所有環節。
●擷取資料更加方便
如果沒有無頭測試工具的話，在抓取頁面數據時，你需要打開一個瀏覽器，輸入頁面位址，找到指定的頁面數據。 而有了無頭測試工具之後，這一切操作都可以自動化完成。
●便於建構自動化測試文稿
你可以利用無頭測試工具和js的測試框架（如mocha、jasmin、karma等）輕鬆地進行前端頁面的單元測試。 因為你可以利用無頭測試工具提供的命令列+api來自動化地替代大量的簡單重複操作，如輸入頁面位址、刷新頁面、表單提交、確認顯示數據是否正確等等。
●輕鬆類比多個瀏覽器
在非自動化的測試流程中，測試人員為了能在不同瀏覽器（不同內核、不同尺寸）上確認頁面的表現與運行是否正常，不得不來回切換瀏覽器，移動端測試還不得不切換機型。 如果有了無頭測試則可以輕鬆通過api和配置項來控制當前瀏覽器的屬性。 此外，你也可以通過腳本進行併發測試。
無頭測試工具
無頭測試工具有很多，下面列出一些比較流行的：
- PhantomJS + CasperJS
- Nightmare + mocha
- Headless Chrome
- Puppeteer
PhantomJS + CasperJS
PhantomJS是一個無頭的WebKit框架，它對外提供了JAVAScript API來與WebKit框架進行交互。 他可以幫助開發者實現頁面測試，頁面截屏，頁面自動化交互，網路監控等功能。
CasperJS專為PhantomJS而生，它提供了一個基本的測試套件，它允許你運行完整的功能測試，也允許你從Web頁面中獲取數據。
安裝phantomjs方法
# To install PhantomJS, run the command below
brew install phantomjs安裝casperjs方法
npm i casperjs下面是一個使用PhantomJS+CasperJS來進行無頭測試的例子。
首先你需要創建一個caspergoogle.js檔，它的代碼如下：
varlinks=[];varcasper=require('casper').create();functiongetLinks(){varlinks=document.querySelectorAll('h3 a');returnArray.prototype.map.call(links,function(e){returne.textContent;});}casper.start('http://google.com/',function(){等待頁面載入完成this.waitForSelector('form[action="/search"]');});casper.then(function(){在Google的搜索框中搜索casperjsthis.fill('form[action="/search"]',{q:'casperjs'},true);});casper.then(function(){將casper的搜尋結果聚合起來links=this.evaluate(getLinks);現在再搜索phantomjsthis.fill('form[action="/search"]',{q:'phantomjs'},true);});casper.then(function(){再將phantomjs的搜尋結果也聚合起來links=links.concat(this.evaluate(getLinks));});casper.run(function(){將最終結果以好看的格式輸出到主控台this.echo(links.length+' links found:');this.echo(' - '+links.join('n - ')).exit();});上面的例子里，我們用CasperJS抓取了http://Google.com的數據，然後我們利用CasperJS向搜索框中類比輸入了一段字串，然後把運行結果輸出到了終端。
為了運行上面的例子，你需要執行下面這個命令。
casperjs caspergoogle.js
Nightmare+Mocha
Nightmare是Segment的一套高級瀏覽器自動化庫。
Nightmare對外提供了一些類比用戶的簡單操作，如goto、type或click等。 他提供的API全部都是同步的，不是深度嵌套在回調中的。 它最初設計用於在沒有對外提供api的網站上自動執行任務，但它最常用的點是UI測試和爬去數據。
Mocha是一個運行在Node和瀏覽器上的測試框架。 他可以輔助Nightmare更好的完成自動化測試。
將Nightmare和Mocha安裝成開發依賴的方法：
npm install --save-dev mocha
npm install --save-dev nightmare下面是一個基於Nightmare和Mocha的例子：
varNightmare=require('nightmare');varexpect=require('chai').expect;// jshint ignore:line
describe('test duckduckgo search results',function(){it('should find the nightmare github link first',function(done){varnightmare=Nightmare()nightmare.goto('https://duckduckgo.com').type('#search_form_input_homepage','github nightmare').click('#search_button_homepage').wait('#zero_click_wrapper .c-info__title a').evaluate(function(){returndocument.querySelector('#zero_click_wrapper .c-info__title a').href}).end().then(function(link){expect(link).to.equal('https://github.com/segmentio/nightmare');done();})});});這裡我還使用到了斷言庫——chai。 在上面的例子中，我們先跳轉到"duckduckgo.com"網站，然後在指定的元素內輸入"github nightmare"，接著通過選擇器點擊指定的按鈕，再等到指定的元素出現后，最終確認元素中的連結是否與期待一致。
Headless Chrome
Headless Chrome是在無頭環境下運行Chrome瀏覽器的一種方式，最終達到幫助開發者完成自動化測試的目的。 目前Chrome 59以上已經支持無頭運行。
Headless Chrome帶來了由Chromium和Blink渲染引擎提供的所有現代web平臺功能。 這是一種不需要在螢幕上打開視窗的全新頁面交互方式。
要想體驗Headless Chrome很簡單，你只需要在控制台輸入下面的命令。 運行該命令之前，你需要確保兩個事情，一是你要安裝最新的chrome版本，另一個是你需要將chrome加入到環境變數中。
chrome --headless --disable-gpu你可以利用Headless Chrome將頁面轉換為pdf
chrome --headless --disable-gpu --screenshot https://www.baidu.com/你可以Headless Chrome對頁面進行截屏
chrome --headless --disable-gpu --screenshot https://www.baidu.com/就像你看到的一樣，Headless Chrome是通過命令行的方式來與瀏覽器進行交互。 如果你想利用它進行自動化腳本或者寫代碼來控制的話，你就需要學習Puppeteer了。
Puppeteer
Puppeteer是Chrome團隊開發的Node庫。 它提供了一系列的高級別API來控制Headless Chrome。 它和其他自動化測試框架一樣，如PhantomJS和NightmareJS，不過它只適用於59+版本的Chrome。
安裝Puppeteer的方法
npm i puppeteer下面的例子中，使用Puppeteer來對頁面進行截屏。
constpuppeteer=require('puppeteer');(async()=>{constbrowser=awaitpuppeteer.launch();constpage=awaitbrowser.newPage();awaitpage.goto('https://www.baidu.com',{waitUntil:'networkidle2'});awaitpage.pdf({path:'page.pdf',format:'A4'});awaitbrowser.close();})();下面的例子中，使用Puppeteer來對頁面數據進行抓取。
constpuppeteer=require('puppeteer');(async()=>{constbrowser=awaitpuppeteer.launch();constpage=awaitbrowser.newPage();awaitpage.goto('https://google.com',{waitUntil:'networkidle'});// 输入想要搜索的内容
awaitpage.type('英俊潇洒你冲哥');awaitpage.click('input[type="submit"]');// 等待结果
awaitpage.waitForSelector('h3 a');// 遍历并输出页面中的结果
constlinks=awaitpage.evaluate(()=>{constanchors=Array.from(document.querySelectorAll('h3 a'));returnanchors.map(anchor=>anchor.textContent);});console.log(links.join('n'));browser.close();})();總結
在本文中，我們瞭解了無頭測試如何幫助作為開發者的你，並探索了一些無頭測試工具和範例。
無頭測試在web開發中是非常有用的工具。 通過無頭測試，您可以生成網站的截圖和pdf檔，從網站上抓取內容，自動提交表單，並模擬鍵盤輸入。
當與無頭瀏覽器結合使用時，它允許你在完全成熟的瀏覽器中做任何你可以做的事情，而不需要瀏覽器。
題外話：如果您覺得這篇文章對您有説明，如果您對前端技術感興趣，您可以關注公眾號——"較真的前端"。 那裡有更多技術乾貨等著您。
參考文章：
1. Introduction to Headless Browser Testing