哪個才是最適合你的 Web UI 自動化測試框架
參考：https://zhuanlan.zhihu.com/p/30385812
最近，項目上出於系統性穩定性、減少測試工作量考慮，打算在 Web 前端引入 BDD。由於上一個項目寫了一定的 Cucumber 代碼（BDD 測試框架之一），這個框架選型的責任便落到了我的肩膀上了。
在我們進行框架選型的時候，着重考慮了一個因素：測試實現腳本是由開發人員編寫的，因此最好尋找 JavaScript 支持的框架。在搜索了一天后，選擇了三個框架 Cucumber、Robot、Gauge。以下是上述的三個框架入選的原因：
Cucumber，團隊的開發人員有一些有相關的開發經驗、支持 JavaScript。
Robot Framework，測試人員接受過相關的培訓、不支持 JavaScript。
Gauge，可以生成更好的測試報告及自由的書寫、支持 JavaScript。不過，主要是我寫膩了 Cucumber。
隨后，便使用三個不同的框架寫了幾個 UI 測試的 DEMO。在開始之前，讓我們了解什么是 BDD。
BDD
Behavior Driven Development，行為驅動開發是一種敏捷軟件開發的技術，它鼓勵軟件項目中的開發者、QA 和非技術人員或商業參與者之間的協作。
與一般的自動化測試（如單元測試、服務測試、UI 測試）不一樣的是，BDD 是由多方參與的測試開發方式。如在使用 Protractor 寫 Angular 的 E2E 測試的時候，所以的測試都是前端測試人員編寫的。BDD 最重要的一個特性是：由非開發人員編寫測試用例，而這些測試用例是使用自然語言編寫的 DSL（領域特定語言）。
換多話來說，業務人員、測試人員、客戶等利益相關者，以習慣的方式編寫相關的測試用例，再由開發人員去實現相關的測試。如下圖所示：
BDD 流程
由業務人員編寫的測試用例，將是使用如下的形式實現的：
* 當我在網站的首頁
* 輸入用戶名 "demo"
* 輸入密碼 "mode"
* 提交登錄信息
* 用戶應該跳轉到歡迎頁
對於能支持中文的 BDD 框架來說，這就是業務人員和測試人員等編寫的用例，他們能輕松地編寫出這樣的用例，而開發人員便是去實現這一個又一個的 DSL 語句。
在我之前的一個項目里，我們遇到了一個問題：測試用例也是由開發人員編寫的。這種做法不僅不能體現 BDD 的價值，而且對於開發人員來說，這是在糟蹋代碼。如果完全是由開發人員編寫的測試，那么為什么我們需要寫一個額外的 DSL 層呢？
接下來，讓我們看看三個測試的一個簡單對比表：
BDD 框架對比
從某程程度上來看，三個框架差不了多少，每個框架也各自都有自己的問題。
- Cucumber 的 Javascript 版本不支持 HTML 的報表生成。
- Gauge 雖然比較適合我們的要求，但是相關的中文資料比較少。
- Robot 主要的問題是不支持 JavaScript，以及要按 Robot 定義的方式來編寫代碼。
以下是三個框架的示例及詳細的對比。
Cucumber.js
Cucumber 是一個能夠理解用普通語言 描述的測試用例的支持行為驅動開發（BDD）的自動化測試工具，用Ruby編寫，支持Java和.Net等多種開發語言。
- 使用自然語言，更易讀
- 支持表格參數
- 支持多種格式的Report：html、junit etc.
- 支持多種語言
- 支持四種狀態的測試步驟：Passed、Failed、Skipped、Pending
- 支持使用變形器消除重復
- 一個商用的在線 Cucumber 系統：Cucumber Pro
DSL Code Examples
示例代碼：https://github.com/phodal/bdd-frameworks-compare/tree/master/cucumber
# language: zh-CN 功能: 失敗的登錄 場景大綱: 失敗的登錄 假設 當我在網站的首頁 當 輸入用戶名 <用戶名> 當 輸入密碼 <密碼> 當 提交登錄信息 那么 頁面應該返回 "Error Page" 例子: |用戶名 |密碼 | |'Jan1' |'password'| |'Jan2' |'password'| Cucumber 支持比較固定的 DSL 格式，即三段式 Given-When-Then，對應的中文便是：假設-當-那么。作為一個歷史悠久的框架，它的中文資料相當的豐富，只是在 JavaScript 方面有些不足，不能生成對應的 HTML 報告。
其實現代碼如下所示：
Step Code Examples
defineSupportCode(function({Given, When, Then}) { Given('當我在網站的首頁', function() { return this.driver.get('http://0.0.0.0:7272/'); }); When('輸入用戶名 {string}', function (text) { return this.driver.findElement(By.id('username_field')).sendKeys(text) }); When('輸入密碼 {string}', function (text) { return this.driver.findElement(By.id('password_field')).sendKeys(text) }); When('提交登錄信息', function () { return this.driver.findElement(By.id('login_button')).click() }); Then('頁面應該返回 {string}', function (string) { this.driver.getTitle().then(function(title) { expect(title).to.equal(string); }); }); }); 從代碼實現上來說，也是固定的三段式。其底層依賴於 Selenium，因此寫法上與 Gauge 的區別並不大。
Robot Framework
Robot Framework是一款python編寫的功能自動化測試框架。具備良好的可擴展性，支持關鍵字驅動，可以同時測試多種類型的客戶端或者接口，可以進行分布式測試執行。
關鍵特性：
- 使用關鍵字的機制，更容易上手
- 提供了RIDE，對於不熟悉編碼的人來說比較友好
- 能夠精細的控制關鍵字的scope
- Log 和 Report 非常好
- 使用變量文件的機制來描述不同的環境
- 豐富的關鍵字庫
- 內置變量
DSL Code Examples
示例代碼：https://github.com/phodal/bdd-frameworks-compare/tree/master/robot
*** Settings ***
Documentation 登錄測試 2
...
Suite Setup 打開瀏覽器到登錄頁1
Suite Teardown Close Browser
Test Setup 轉到登錄頁
Test Template 使用錯誤的失敗憑據應該登錄失敗
Resource resource.robot
*** Test Cases *** USER NAME PASSWORD
無效的用戶名 invalid ${VALID PASSWORD}
無效的密碼 ${VALID USER} invalid
無效的用戶名和密碼 invalid whatever
*** Keywords ***
使用錯誤的失敗憑據應該登錄失敗
[Arguments] ${username} ${password}
輸入用戶名 ${username}
輸入密碼 ${password}
提交登錄信息
登錄應該不成功
登錄應該不成功
Location Should Be ${ERROR URL}
Title Should Be Error Page
從上面的代碼來看，Robot 在某些特定的關鍵字上，必須使用英語。在關鍵的代碼如關閉瀏覽器，仍然需要使用 Close Browser 英語這些來實現。
Step Code Examples
打開瀏覽器到登錄頁
Open Browser ${LOGIN URL} ${BROWSER}
Maximize Browser Window
Set Selenium Speed ${DELAY}
Login Page Should Be Open
Login Page Should Be Open
Title Should Be Login Page
轉到登錄頁
Go To ${LOGIN URL}
Login Page Should Be Open
輸入用戶名
[Arguments] ${username}
Input Text username_field ${username}
輸入密碼
[Arguments] ${password}
Input Text password_field ${password}
提交登錄信息
Click Button login_button
應該跳轉到歡迎頁
Location Should Be ${WELCOME URL}
Title Should Be Welcome Page
與上面的 Cucumber 相比，Robot 對於英語的非開發人員來說更加友好。換句話來說，Robot 更像是一個適合於 QA 的語言。作為一個開發人員，可能不太喜歡這種形式。
報告示例
不過，Robot 提供了一份說盡的報告。細致的展示了每一個測試，以及其步驟時間等等。
Gauge
Gauge 是 Go 開發的一個跨平台測試自動化工具。它給作者提供了用商業語言測試用例的能力。
關鍵特性：
- 基於 markdown 的豐富的標記
- 支持用任何程序語言來編寫測試代碼
- 支持 plugin 的模塊化架構
- 跨語言實現一致性。
- 簡單，靈活和豐富的語法
- 開源的，因此它可以自由共享，同時被他人改進
- 商業語言測試 : 支持可執行文件的概念
- 幫助您創建可維護和可理解的測試套件
- 支持外部數據來源
- IDE Support
DSL Code Examples
示例代碼：https://github.com/phodal/bdd-frameworks-compare/tree/master/gaugejs
失敗的登錄
===
|用戶名 |密碼 |
|--------|--------|
|Jan1 |password|
|Jan2 |password|
失敗的登錄
-----------
* 當我在網站的首頁
* 輸入用戶名 <用戶名>
* 輸入密碼 <密碼>
* 提交登錄信息
* 頁面應該返回 "Error Page"
與 Robot 和 Cucumber 不一樣的是，Gauge 使用的是大家更熟悉的 Markdown 形式的 DSL。並且從形式上來說，更加自由。List 中的每一行，就代表着一個元素。因此，其對應的實現代碼也更加的自由。
Step Code Examples
step("當我在網站的首頁", async function () { await page.goto('http://0.0.0.0:7272/'); }); step("輸入用戶名 <query>", async function (query) { await page.click('#username_field'); await page.type(query) }); step("輸入密碼 <query>", async function (query) { await page.click('#password_field'); await page.type(query) }); step("提交登錄信息", async function () { await page.click('#login_button') }); step("頁面應該返回 <query>", async function(query){ await page.waitFor('h1'); const text = await await page.$eval('#container h1', h1 => { return h1.innerHTML; }); expect(text).to.equal(query); }); 上面采用的是 Node.js 8 支持的異步寫法，除此與 cucumber.js 寫的代碼並沒有太多的差異。
報告示例
至於，Gauge 生成的 UI 並沒有 Robot 那么詳細，但是看上去現代。
那么，你喜歡哪個 BDD 框架呢？