vue-cli 自動化測試 Nightwatch 詳解

奇舞週刊發表於2019-03-03
Vue

本文作者奇舞團前端開發工程師馮通

vue-cli 是我最喜歡的腳手架工具, 提供了很多開箱即用的功能, 每次新建一個專案, 我都會一路回車按下來, 唯獨到這一步…

Setup e2e tests with Nightwatch?

每到此處, 我都會無情的選擇 no, 這也是我唯一不使用預設配置的選項

vue-cli 自動化測試 Nightwatch 詳解

那我們真的不會用 e2e tests 嗎?

先來看一下 e2e 測試和 unit 測試有什麼區別

分層的自動化測試

敏捷大師 Mike Cohn 提出了測試金字塔概念, 認為測試應該系分為不同的粒度

Martin Fowler 大師在此基礎上提出分層自動化測試的概念, 也就是如圖所示

vue-cli 自動化測試 Nightwatch 詳解

分層自動化測試是這樣分層的

  1. 單元測試 (unit tests)
  2. 服務介面測試 (service tests)
  3. 使用者介面測試 (e2e tests)

單元測試和服務測試始終不是真實的使用場景, 真正能測到人機互動的只有UI測試

我們今天討論的就是這個門檻最高, 成本也最大的金字塔頂端測試, 也稱為 e2e 測試

e2e 自動化測試

如何確定使用者可以順利走完流程呢? 一個流程可以很長

  1. 開啟網頁
  2. 瀏覽商品
  3. 加入購物車
  4. 下單確認
  5. 付款

單純依靠人力來測試完整功能非常耗時耗力, 這時候自動化測試就體現價值了

自動化測試是把人的測試行為轉化為機器執行的程式, 可以提高效率, 解放生產力, 節省人力成本和時間成本, 降低人類易出錯的風險

現代比較流行的 e2e 測試框架有

  • Nightwatch
  • TestCafe
  • Protractor
  • WebdriverIO
  • Cypress

vue-cli 中使用 Nightwatch

Nightwatch 是一個老牌的 e2e 測試工具, 中文名**”守夜者”**, 使用 W3C WebDriver API 協議來驅動瀏覽器

WebDriver 是各大瀏覽器都實現的通用標準, 這也使得它的相容性特別好, 支援各大瀏覽器, 符合國情

如果在 vue-cli 中我們選擇使用 e2e tests

vue-cli 會自動幫我們安裝 selenium-server 和 chromedriver 等必要工具

哪怕你完全不懂 selenium, chromedriver 這些工具也可以盡情的寫 e2e 測試, 開箱即用

在不久前釋出的 vue-cli@3.0 中新增 Nightwatch

$ vue add @vue/e2e-nightwatch
複製程式碼

執行 e2e 測試

$ vue-cli-service test:e2e
複製程式碼

純淨的 WebDriver

要注意的是, vue-cli 目前依賴的還是 Nightwatch@0.9.x

我們看到 vue-cli 安裝的 Nightwatch 會依賴一個 Selenium Server, 一個 java 程式

vue-cli 自動化測試 Nightwatch 詳解

從官方示意圖中看出, Nightwatch 和瀏覽器需要通過 Selenium Server 來通訊

這讓我們 js 程式設計師有點不爽, 既然 WebDriver 已經成為 W3C 推薦標準, 為什麼不能跳過 Selenium 直接驅動瀏覽器呢?

答案是肯定的, 這也正是 Nightwatch@1.0 所做的是事情, 直接驅動瀏覽器

Nightwatch@1.0

Nightwatch@1.0 可以直接驅動瀏覽器, 因此我們直接安裝 Nightwatch@1.0 即可, 無需 Selenium Server

$ npm install nightwatch@1.0.8
複製程式碼

我們一起來學男朋友叫, 哦不~一起來寫一個最迷你的端到端自動化測試

首先 Nightwatch 需要一個配置檔案 nightwatch.conf.js

module.exports = {
  "webdriver": {
    "server_path": "/usr/bin/safaridriver", // 瀏覽器 driver 的 bin 執行路徑
    "start_process": true, // 需要啟動 driver
    "port": 9515 // driver 啟動的埠, 一般是 9515 或 4444
  },
  "test_settings": {
    "default": {
      "desiredCapabilities": {
        "browserName": "safari" // 瀏覽器的名字叫 safari
      }
    }
  }
}
複製程式碼

此處之所以使用 safaridriver 是因為 mac 系統已經內建了 safaridriver, 零安裝成本

然後來寫一個簡單易懂的測試指令碼 e2e.test.js

module.exports = {
  `Basic e2e Test` (browser) {
    browser
      .url(`http://so.com`) // 開啟 so.com 網頁
      .waitForElementVisible(`body`) // 確認能看到 body 元素
      .setValue(`#input`, `Nightwatch`) // 在搜尋框輸入 Nightwatch
      .click(`#search-button`) // 點選搜尋
      .pause(1000) // 等待1秒鐘
      .assert.containsText(`#container`, `Nightwatch`) // 查詢結果包含 Nightwatch
      .end()
  }
}
複製程式碼

執行一下看測試結果

$ nightwatch basic-e2e.test.js

[Basic e2e Test] Test Suite
===========================
Running:  Basic e2e Test

✔ Element <body> was visible after 17 milliseconds.
✔ Testing if element <#container> contains text: "Nightwatch".

OK. 2 assertions passed. (3.419s)
複製程式碼

測試通過, 嗨皮?

各大瀏覽器 driver 安裝

如果想用其他瀏覽器進行測試, 本文也列出了主流瀏覽器 driver 的下載地址

驅動瀏覽器的程式, 我們稱為 driver

要注意的是, vue-cli 目前繫結的還是 Nightwatch@0.9.x, 但 Nightwatch@1.0 已經在 beta 階段了, vue 作者表示等到 Nightwatch 穩定後就會切到 1.0, 相信不遠的將來我們會見到搭載 Nightwatch@1.0 的 vue-cli

關於奇舞週刊

《奇舞週刊》是360公司專業前端團隊「奇舞團」運營的前端技術社群。關注公眾號後，直接傳送連結到後臺即可給我們投稿。

vue-cli 自動化測試 Nightwatch 詳解

相關文章