2. 程式人生 > >哪個才是最適合你的 Web UI 自動化測試框架

哪個才是最適合你的 Web UI 自動化測試框架

阿新 • • 發佈：2019-01-20

最近，專案上出於系統性穩定性、減少測試工作量考慮，打算在 Web 前端引入 BDD。由於上一個專案寫了一定的 Cucumber 程式碼（BDD 測試框架之一），這個框架選型的責任便落到了我的肩膀上了。

?wxfrom=5&wx_lazy=1

在我們進行框架選型的時候，著重考慮了一個因素：測試實現指令碼是由開發人員編寫的，因此最好尋找 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 流程

由業務人員編寫的測試用例，將是使用如下的形式實現的：

  1. *當我在網站的首頁

  2. *輸入使用者名稱"demo"

  3. *輸入密碼"mode"

  4. *提交登入資訊

  5. *使用者應該跳轉到歡迎頁

對於能支援中文的 BDD 框架來說，這就是業務人員和測試人員等編寫的用例，他們能輕鬆地編寫出這樣的用例，而開發人員便是去實現這一個又一個的 DSL 語句。

在我之前的一個專案裡，我們遇到了一個問題：測試用例也是由開發人員編寫的

。這種做法不僅不能體現 BDD 的價值，而且對於開發人員來說，這是在糟蹋程式碼。如果完全是由開發人員編寫的測試，那麼為什麼我們需要寫一個額外的 DSL 層呢？

接下來，讓我們看看三個測試的一個簡單對比表：

BDD 框架對比: Cucumber.js vs Robot Framework vs Gauge.js

x Cucumber Gauge Robot
程式語言支援 Java,Ruby,JavaScript 等 13 種語言 Java, JavaScript, Ruby 等 6 種語言 Python, Java, C
支援的系統 所有主流系統 所有主流系統 所有主流系統
多語言支援 UTF-8 UTF-8 使用者關鍵字及用例層面支援UTF-8
中文社群支援 完善 待完善 完善
Report JS 不支援 HTML 粗粒度 細粒度
失敗時截圖 不支援 支援 支援

從某程程度上來看，三個框架差不了多少，每個框架也各自都有自己的問題。

  1. Cucumber 的 Javascript 版本不支援 HTML 的報表生成。

  2. Gauge 雖然比較適合我們的要求，但是相關的中文資料比較少。

  3. 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

  1. # language: zh-CN

  2. 功能:失敗的登入

  3. 場景大綱:失敗的登入

  4. 假設當我在網站的首頁

  5. 當輸入使用者名稱<使用者名稱>

  6. 當輸入密碼<密碼>

  7. 當提交登入資訊

  8. 那麼頁面應該返回"Error Page"

  9. 例子:

  10. |使用者名稱|密碼|

  11. |'Jan1'|'password'|

  12. |'Jan2'|'password'|

Cucumber 支援比較固定的 DSL 格式，即三段式 Given-When-Then，對應的中文便是：假設-當-那麼。作為一個歷史悠久的框架，它的中文資料相當的豐富，只是在 JavaScript 方面有些不足，不能生成對應的 HTML 報告。

其實現程式碼如下所示：

Step Code Examples

  1. defineSupportCode(function({Given,When,Then}){

  2. Given('當我在網站的首頁',function(){

  3. returnthis.driver.get('http://0.0.0.0:7272/');

  4. });

  5. When('輸入使用者名稱 {string}',function(text){

  6. returnthis.driver.findElement(By.id('username_field')).sendKeys(text)

  7. });

  8. When('輸入密碼 {string}',function(text){

  9. returnthis.driver.findElement(By.id('password_field')).sendKeys(text)

  10. });

  11. When('提交登入資訊',function(){

  12. returnthis.driver.findElement(By.id('login_button')).click()

  13. });

  14. Then('頁面應該返回 {string}',function(string){

  15. this.driver.getTitle().then(function(title){

  16.        expect(title).to.equal(string);

  17. });

  18. });

  19. });

從程式碼實現上來說，也是固定的三段式。其底層依賴於 Selenium，因此寫法上與 Gauge 的區別並不大。

Robot Framework

Robot Framework是一款python編寫的功能自動化測試框架。具備良好的可擴充套件性，支援關鍵字驅動，可以同時測試多種型別的客戶端或者介面，可以進行分散式測試執行。

關鍵特性：

  • 使用關鍵字的機制，更容易上手

  • 提供了RIDE，對於不熟悉編碼的人來說比較友好

  • 能夠精細的控制關鍵字的scope

  • Log 和 Report 非常好

  • 使用變數檔案的機制來描述不同的環境

  • 豐富的關鍵字型檔

  • 內建變數

DSL Code Examples

示例程式碼：https://github.com/phodal/bdd-frameworks-compare/tree/master/robot

  1. ***Settings***

  2. Documentation登入測試2

  3. ...

  4. SuiteSetup開啟瀏覽器到登入頁1

  5. SuiteTeardownCloseBrowser

  6. TestSetup轉到登入頁

  7. TestTemplate使用錯誤的失敗憑據應該登入失敗

  8. Resource          resource.robot

  9. ***TestCases***               USER NAME        PASSWORD

  10. 無效的使用者名稱                      invalid          ${VALID PASSWORD}

  11. 無效的密碼                        ${VALID USER}    invalid

  12. 無效的使用者名稱和密碼                 invalid          whatever

  13. ***Keywords***

  14. 使用錯誤的失敗憑據應該登入失敗

  15. [Arguments]    ${username}    ${password}

  16. 輸入使用者名稱    ${username}

  17. 輸入密碼    ${password}

  18. 提交登入資訊

  19. 登入應該不成功

  20. 登入應該不成功

  21. LocationShouldBe    ${ERROR URL}

  22. TitleShouldBeErrorPage

從上面的程式碼來看，Robot 在某些特定的關鍵字上，必須使用英語。在關鍵的程式碼如關閉瀏覽器，仍然需要使用 Close Browser 英語這些來實現。

Step Code Examples

  1. 開啟瀏覽器到登入頁

  2. OpenBrowser    ${LOGIN URL}    ${BROWSER}

  3. MaximizeBrowserWindow

  4. SetSeleniumSpeed    ${DELAY}

  5. LoginPageShouldBeOpen

  6. LoginPageShouldBeOpen

  7. TitleShouldBeLoginPage

  8. 轉到登入頁

  9. GoTo    ${LOGIN URL}

  10. LoginPageShouldBeOpen

  11. 輸入使用者名稱

  12. [Arguments]    ${username}

  13. InputText    username_field    ${username}

  14. 輸入密碼

  15. [Arguments]    ${password}

  16. InputText    password_field    ${password}

  17. 提交登入資訊

  18. ClickButton    login_button

  19. 應該跳轉到歡迎頁

  20. LocationShouldBe    ${WELCOME URL}

  21. TitleShouldBeWelcomePage

與上面的 Cucumber 相比，Robot 對於英語的非開發人員來說更加友好。換句話來說，Robot 更像是一個適合於 QA 的語言。作為一個開發人員，可能不太喜歡這種形式。

報告示例

不過，Robot 提供了一份說盡的報告。細緻的展示了每一個測試，以及其步驟時間等等。

?Robot Framework Report

Gauge

Gauge 是 Go 開發的一個跨平臺測試自動化工具。它給作者提供了用商業語言測試用例的能力。

關鍵特性：

  • 基於 markdown 的豐富的標記

  • 支援用任何程式語言來編寫測試程式碼

  • 支援 plugin 的模組化架構

  • 跨語言實現一致性。

  • 簡單，靈活和豐富的語法

  • 開源的，因此它可以自由共享，同時被他人改進

  • 商業語言測試 : 支援可執行檔案的概念

  • 幫助您建立可維護和可理解的測試套件

  • 支援外部資料來源

  • IDE Support

DSL Code Examples

示例程式碼：https://github.com/phodal/bdd-frameworks-compare/tree/master/gaugejs

  1. 失敗的登入

  2. ===

  3. |使用者名稱|密碼|

  4. |--------|--------|

  5. |Jan1|password|

  6. |Jan2|password|

  7. 失敗的登入

  8. -----------

  9. *當我在網站的首頁

  10. *輸入使用者名稱<使用者名稱>

  11. *輸入密碼<密碼>

  12. *提交登入資訊

  13. *頁面應該返回"Error Page"

與 Robot 和 Cucumber 不一樣的是，Gauge 使用的是大家更熟悉的 Markdown 形式的 DSL。並且從形式上來說，更加自由。List 中的每一行，就代表著一個元素。因此，其對應的實現程式碼也更加的自由。

Step Code Examples

  1. step("當我在網站的首頁", async function(){

  2.  await page.goto('http://0.0.0.0:7272/');

  3. });

  4. step("輸入使用者名稱 <query>", async function(query){

  5.  await page.click('#username_field');

  6.  await page.type(query)

  7. });

  8. step("輸入密碼 <query>", async function(query){

  9.  await page.click('#password_field');

  10.  await page.type(query)

  11. });

  12. step("提交登入資訊", async function(){

  13.  await page.click('#login_button')

  14. });

  15. 相關推薦

    哪個才是最適合你的 Web UI 自動化測試框架

    最近，專案上出於系統性穩定性、減少測試工作量考慮，打算在 Web 前端引入 BDD。由於上一個專案寫了一定的 Cucumber 程式碼（BDD 測試框架之一），這個框架選型的責任便落到了我的肩膀上了。 在我們進行框架選型的時候，著重考慮了一個因素：測試實現指令碼是由開發人員編寫的，因此最好尋找 Jav

    基於webdriver的web UI自動化測試框架（系統架構+測試指令碼應用架構）

    1.首先是自動化測試系統架構如下圖: 2.測試指令碼的應用架構: 3實際應用後的工程結構: 框架的配置檔案（只是簡單的用properties檔案） #------------------# #  測試框架配置 #------------------# #

    簡單Web UI 自動化測試框架 pyse

    WebUI automation testing framework based on Selenium and unittest. 基於 selenium 和 unittest 的 Web UI自動化測試框架。 特點 預設使用CSS定位，同時支援多種定位方法（id\name\class\link_te

    Robot Framework進行web ui自動化測試，瀏覽器配置說明

    org .html open fire img row sele title cnblogs 轉載請註明出處，謝謝； chrome瀏覽器： 1、從如下地址下載與本地瀏覽器版本號一致的chromedriver.exe驅動文件； http://chromedriver.stor

    Java+Selenium Web UI自動化測試的一些小總結

    The 隱藏 ase 默認 get over rip cli 不可 - Chrome 關於Chrome的配置網上信息很多，直說一點，當選擇在linux環境跑用例的時候，我們會優先選擇headless run，默認情況下headless run的瀏覽器大小好像只有900*76

    安裝protractor進行前端自動化測試-web ui自動化測試

    安裝protractor進行前端自動化測試 介紹 protractor 是個 Node.js 程式。所以首先得安裝 Node.js。然後就可以使用npm 安裝 protractor 了。 通常 protractor 使用 Jasmine 測試框架作為他的測試介面。 下面的

    論Web UI自動化測試的不穩定性（二）

    Web UI自動化測試的不穩定性有兩個層面： 技術層面–沒有構造健壯的能穩定執行的指令碼 非技術層面–專案原因或者用Web UI自動化企圖達到不合適的目標，造成指令碼頻繁改動，維護成本高 第一點在上一篇博文裡從程式碼層面分析過了，今天主要說說第二點。

    Web UI自動化測試原理

    因為是轉載文章 在此標明出處，以前有文章是轉的沒標明的請諒解，因為有些已經無法找到出處，或者與其它原因。 如有冒犯請聯絡本人，或刪除，或標明出處。 因為好的文章，以前只想收藏，但連線有時候會失效，所以現在碰到好的直接轉到自己這裡。 目前市面上有很多Web U

    WEB UI自動化測試之AutoMagic自動化測試平臺開源

    作者介紹：網名: Ray介紹：笑起來像個孩子，冷起來是個迷。部落格：http://www.cnblogs.com/tsbc/2018年3月29日，Ray說準備把AutoMagic自動化測試管理平臺開源了！！！這是個好訊息，因為AutoMagic在其所在的企業中實踐應用，沉澱了

    Web UI自動化測試中處理頁面元素過期問題

    Stale Element Reference Exception You have probably been directed to this page because you've seen a StaleElementReferenceException in your tests. Comm

    WEB-UI自動化測試實踐

      一、設計背景 隨著IT行業的發展，產品愈漸複雜，web端業務及流程更加繁瑣，目前UI測試僅是針對單一頁面，操作量大。為了滿足多頁面功能及流程的需求及節省工時，設計了這款UI 自動化測試程式。旨在提供介面，整合到蝸牛自動化測試框架，方便用例的設計。 整個程式是基於 selenium 設計的。程式對

    基於APPIUM測試微信公眾號的UI自動化測試框架（結合Allure2測試報告框架）

    clas ava sed rom pos enabled via 代碼管理 ons 框架初衷 前兩周組內的小夥伴跟我說她現在測試的微信公眾號項目（保險）每次上新產品時測試起來很費時，存在大量的重復操作（點點點），手工測試每個產品可能需要半天到一天的時間，復雜的產品需要兩

    UI自動化測試框架-testcafe實踐(結果報告格式化-jenkins-Visual Studio)

    目錄 前情回顧 原理 結果報告格式化輸出-HTML 更多的結果報告 結合CI IDE 外掛使用 新增debug 前情回顧 入門篇UI自動化測試框架-testcafe入門 回顧： testcafe安裝 一個js檔案可以包含多個fixture

    自動化測試中級篇——LazyAndroid UI自動化測試框架使用指南

    簡介       一直以來，安卓UI自動化測試都存在以下兩個障礙，一是測試工具Mokey/Appium等的學習成本較高，不方便剛接觸移動端自動化的新手入門；另一個是，在測試程式碼書寫中耗費在控制元件元素查詢上的時間太多，在一些稍微複雜的應用中尤其突出。LazyAndroid正

    淘寶新UI自動化測試框架特點

    　　1.基於關鍵字驅動方式item.operation(value)原理，使得指令碼、業務、資料分離，有效提升了系統的可擴充套件性 　　2.通過Chrome外掛的方式進行頁面元素定位自動拾取，降低頁面元素拾取與定位的難度 　　3.使用原生selenium元素查詢方式

    快速打造屬於你的介面自動化測試框架

    ![](https://img2020.cnblogs.com/blog/2029875/202006/2029875-20200622173637203-655189065.png) #### 1 介面測試 介面測試是對系統或元件之間的介面進行測試，主要是校驗資料的交換，傳遞和控制管理過程，以及相互邏輯依賴

    什麽樣的大數據平臺架構，才是最適合你的？

    構圖 上線 革命 權限 變現 RoCE 周期 結果 現在 技術最終為業務服務，沒必要一定要追求先進性，各個企業應根據自己的實際情況去選擇自己的技術路徑。 　　它不一定具有通用性，但從一定程度講，這個架構可能比BAT的架構更適應大多數企業的情況，畢竟，大多數企業，數據沒到那個

    搭建基於IDEA+Selenium+Java+TestNG+Maven+Jenkins+SVN的Web端UI自動化測試環境

    第一步：工具下載安裝配置 第二步：整合各個工具到自動化測試環境 1.IDEA上的各種操作 a.通過在idea工具，新建一個maven專案,在右邊載入框這裡，選擇maven-archetype-quickstart,然後點選next b.輸入Group Id:域.公司簡稱；Artifact Id：專案名稱

    什麼樣的大資料平臺架構，才是最適合你的？

       技術最終為業務服務，沒必要一定要追求先進性，各個企業應根據自己的實際情況去選擇自己的技術路徑。 　　它不一定具有通用性，但從一定程度講，這個架構可能比BAT的架構更適應大多數企業的情況，畢竟，大多數企業，資料沒到那個份上，也不可能完全自研，商業和開源的結合可能更好一點，

    python 和 selenium實現web UI功能自動化測試框架（米兔888）

    之前分享了python和requests搭配實現的介面自動化測試框架，今天，我再來整理分析下基於python和selenium的web UI自動化測試，希望能對大家有所幫助，也是自己整理知識學習的方法，跟大家一起努力，奮鬥在自動化測試的道路上。其實UI自動化和介面自動化框架的