自動化測試-e2e測試框架選擇

前言

記得前兩年，nightmare仍是很火的。因此，我在本身的前端腳手架也集成了它。不過，過去了那麼久，不知道如今的形式如何。

由於最近發現面向的跨境項目業務愈來愈複雜，每一個組員都負責着多個項目，一下作作A，一下作作B，而後有檔期就會被安排作作跨境。所以，由於注意力不能集中，再加上對業務的不瞭解，就時不時會寫一些影響到之前邏輯的bug。

這不得不讓咱們去規劃作自動化迴歸測試的事情，雖然網站業務繁瑣，但至少得保證每次組員的修改，不會影響主流程。

羅列

首先，我先羅列出我調研的e2e框架或庫，讓你們有個大致的認識。

1. PhantomJS 英文解釋： PhantomJS is a headless WebKit scriptable with JavaScript.
   中文解釋： 一個基於 webkit 內核的無頭瀏覽器，沒有 UI 界面。
   補充： 它就是一個瀏覽器，只是內部的點擊、翻頁等人爲相關操做須要程序設計實現。

---

2. NightmareJS 英文解釋： A high-level browser automation library. Under the covers it uses Electron, which is similar to PhantomJS but roughly twice as fast and more modern.
   中文解釋： 一個輕量級瀏覽器自動化測試庫。基於Electron，和PhantomJS相似，可是快了大約2倍且更現代。
   補充： 它的接口比PhantomJS友好不少，大大提升了開發效率：
   並且，它還提供了chrome插件-daydream，它可以錄製你在頁面上的操做，而且生成對應的代碼。這也是我爲何當初選擇它的重要的緣由之一。
   可是，如今NightmareJS好像難產了，核心代碼的更新是在一年多前，並且daydream的插件安裝頁面也404中。果斷拋棄。

---

3. Puppeteer 英文解釋： Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol. Puppeteer runs headless by default, but can be configured to run full (non-headless) Chrome or Chromium.
   中文解釋： Puppeteer是一個提供創建在DevTools協議（devtools-protocol），控制Chrome或Chromium的高階API node庫。Puppeteer默認無界面運行，不過能夠經過配置變爲有界面運行Chrome或Chromium。
   補充： 它由Chrome DevTools維護，並且和NightmareJS同樣，也提供了自動生成代碼的Chrome插件-puppeteer-recorder。因此它徹底能夠替代NightmareJS，或者說就是NightmareJS涼了的緣由吧。
   Puppeteer還分puppeteer和puppeteer-core，區別可參閱 puppeteer-vs-puppeteer-core。
   總之，若是對各個瀏覽器兼容性測試沒有要求的話，我的認爲是最好的e2e自動化測試庫。

---

4. Selenium-webdriver 英文解釋： Selenium is a browser automation library. Most often used for testing web-applications, Selenium may be used for any task that requires automating interaction with the browser.
   中文解釋： Selenium是一個瀏覽器自動化測試庫。大都用來測試web應用，Selenium能夠用來作任何須要和瀏覽器交互的任務。
   補充： 底層基於webdriver實現，因此，能夠自動化測試各類瀏覽器，只要對應的瀏覽器實現了webdriver功能（現代瀏覽器，IE是涼涼的）均可以用它來自動調起和測試。
   啓動瀏覽器的lancher/driver已經繼承到selenium-webdriver中了：

const webdriver = require('selenium-webdriver');
const chrome = require('selenium-webdriver/chrome');
const firefox = require('selenium-webdriver/firefox');
 
let driver = new webdriver.Builder()
    .forBrowser('firefox')
    .setChromeOptions(/* ... */)
    .setFirefoxOptions(/* ... */)
    .build();
複製代碼

---

5. Nightwatch 英文解釋： End-to-end testing framework written in Node.js and using the Webdriver API.
   中文解釋： Node.js調用Webdriver API實現的端到端(e2e)測試框架。
   補充： 咱們注意到，它是一個framework而不是一個library。以前介紹到的庫的話，每每要結合其它庫，好比mocha，chai等，而後經過一番折騰結合，才能實現完整的測試功能。
   framework雖然也不是說不須要裝任何額外的庫或插件，可是，基礎的東西，它都已經集成到框架中了，它能大大減小你的折騰時間。
   同Selenium，它也是基於webdriver實現，因此，能夠也自動化測試各類瀏覽器。
   啓動各個瀏覽器只需裝對應瀏覽器的laucher/driver就好：

Geckodriver (Firefox):
Geckodriver is the WebDriver service used to drive the Mozilla Firefox Browser.
$ npm install geckodriver --save-dev
Chromedriver:
Chromedriver is the WebDriver service used to drive the Google Chrome Browser.
$ npm install chromedriver --save-dev
複製代碼

---

6. Protractor 英文解釋： E2E test framework for Angular apps.
   中文解釋： 爲Angular應用而生的e2e測試框架。

分類

說到對比，就得先分類，先搞清服務的維度。

如圖，我將這些測試庫或框架，以底層實現的方式分爲兩類：

1. 非Webdriver類；
2. Webdriver類；

非Webdriver能對應測試瀏覽器單一；

而Webdriver類，以前也說過，不侷限某個特定瀏覽器，只要想測的瀏覽器有Webdriver能力就均可以跑自動化。

對比

Protractor太針對Angular了，因此就不加入對比：

名稱	接口易用	框架	跨瀏覽器	自動生成代碼插件	社區活躍
PhantomJS					yes
NightmareJS	yes			yes
Puppeteer	yes			yes	yes
Selenium	yes		yes		yes
Nightwatch	yes	yes	yes		yes

因此，比對下來的結論就是：

• 若是須要跨瀏覽器，我更傾向於Nightwatch；
• 若是不須要，Puppeteer是首選；

馬路邊邊

在調研的過程當中，還發現了一款挺有意思的e2e測試框架——cypress。

它的優勢：

1. 酷

   啓動它後，它會有一個可視化界面提供給用戶進行操做，並且，操做的過程和結果都體如今了web頁面上，整個測試過程高端大氣上檔次。

2. 方便 由於是框架，因此基礎的東西都已經集成處理好了：

它的缺點：

1. 不跨瀏覽器 當我看到它文檔的Unsupported-Browsers，我就以爲不香了；

2. 沒有自動生成代碼的插件 以前咱們也看到了，非Webdriver雖然不能跨瀏覽器，可是畢竟是提供自動生成代碼的插件，仍是很方便的。因此，我就以爲它也不酷了，啥花裏胡哨的東西。

總結

重要的話說兩遍：

• 若是須要跨瀏覽器，我更傾向於Nightwatch；
• 若是不須要，Puppeteer是首選；

參考資料

Chromium

Comparison of browser engines

electronjs.org

原文

來自 CodeLittlePrince/blog/issues/23