本文做者奇舞團前端開發工程師馮通html
vue-cli 是我最喜歡的腳手架工具, 提供了不少開箱即用的功能, 每次新建一個項目, 我都會一路回車按下來, 惟獨到這一步...前端
Setup e2e tests with Nightwatch?vue
每到此處, 我都會無情的選擇 no, 這也是我惟一不使用默認配置的選項java
那咱們真的不會用 e2e tests 嗎?git
先來看一下 e2e 測試和 unit 測試有什麼區別程序員
分層的自動化測試
敏捷大師 Mike Cohn 提出了測試金字塔概念, 認爲測試應該系分爲不一樣的粒度github
Martin Fowler 大師在此基礎上提出分層自動化測試的概念, 也就是如圖所示web
分層自動化測試是這樣分層的chrome
- 單元測試 (unit tests)
- 服務接口測試 (service tests)
- 用戶界面測試 (e2e tests)
單元測試和服務測試始終不是真實的使用場景, 真正能測到人機交互的只有UI測試vue-cli
咱們今天討論的就是這個門檻最高, 成本也最大的金字塔頂端測試, 也稱爲 e2e 測試
e2e 自動化測試
如何肯定用戶能夠順利走完流程呢? 一個流程能夠很長
- 打開網頁
- 瀏覽商品
- 加入購物車
- 下單確認
- 付款
單純依靠人力來測試完整功能很是耗時耗力, 這時候自動化測試就體現價值了
自動化測試是把人的測試行爲轉化爲機器執行的程序, 能夠提升效率, 解放生產力, 節省人力成本和時間成本, 下降人類易出錯的風險
現代比較流行的 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 程序
從官方示意圖中看出, 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
- Chrome Driver: chromedriver.chromium.org/
- Firefox GeckoDriver: github.com/mozilla/gec…
- IE Driver: github.com/SeleniumHQ/…, 支持IE7-IE11
- Opera Driver: github.com/operasoftwa…
- Safari 自帶 SafariDriver: webkit.org/blog/6900/w…
要注意的是, vue-cli 目前綁定的仍是 Nightwatch@0.9.x, 但 Nightwatch@1.0 已經在 beta 階段了, vue 做者表示等到 Nightwatch 穩定後就會切到 1.0, 相信不遠的未來咱們會見到搭載 Nightwatch@1.0 的 vue-cli