怎麼為大中型的vue.js項目編寫e2e測試？

01-11

比較詳細的github上的代碼也行啊。

我們的口號是：搞事！搞事！搞事！ —— 魯迅

不請自來。

E2E測試

E2E（end to end）測試是一個邊界比較模糊的概念，大概有這樣幾個特徵吧：

把整個系統當作一個黑盒
測試人員模擬真實用戶在瀏覽器中操作UI
測試出的問題可能是前端也可能是後端導致的

因此，E2E測試一般是由測試工程師來做。稍小的項目可能根據測試用例（excel）操作一遍就完了，稍大一點的會寫一些自動化測試的代碼。稍微問了一下，這邊的測試比較喜歡用python～

前端E2E

一般來說，我的Unit test是和業務代碼同步編寫的，調試和開發炒雞方便。

主要的業務流程可能會寫E2E，不過規模要小很多，主要目的是：

便於給PM展示業務流程
便於修改Bug之後的回歸

有些大佬不太喜歡E2E，就不自己寫了，等測試工程師的代碼～

準備

現在vue.js的項目大多是vue-cli的webpack template生成～

vue init webpack my-project ? Project name my-project ? Project description A Vue.js project ? Author name ? Vue build standalone ? Install vue-router? Yes ? Use ESLint to lint your code? Yes ? Pick an ESLint preset Standard ? Set up unit tests Yes ? Pick a test runner jest ? Setup e2e tests with Nightwatch? Yes // 這裡是Yes哦～

你可以直接跑下面的命令開始測試。

npm run e2e

說明

webpack template的E2E測試框架是nightwatch。

官網偶爾會掛掉，看github也行。它的架構是這樣的：

稍微解釋一下運行的過程：

測試編寫測試腳本
runner.js 引入依賴、瀏覽器內核並運行腳本
nightwatch.js 在後台打開一個 java 進程，用於操作瀏覽器
java 進程收到腳本的指令
java 進程操作瀏覽器

所以在運行之前要確保PC中有JDK哦～

配置

既然是大型項目，相比開啟dev-server應該也要幾十秒吧，所以稍微修改一下配置。

// test/e2e/runner.js process.env.NODE_ENV = "testing"


var opts = process.argv.slice(2)

if (opts.indexOf("--config") === -1) {

  opts = opts.concat(["--config", "test/e2e/nightwatch.conf.js"])

}

if (opts.indexOf("--env") === -1) {

  opts = opts.concat(["--env", "chrome"])

}
var spawn = require("cross-spawn")

var runner = spawn("./node_modules/.bin/nightwatch", opts, { stdio: "inherit" })
runner.on("exit", function (code) {

  process.exit(code)

})

runner.on("error", function (err) { throw err })

在開始e2e測試的時候就不會再自動開啟dev-server啦，想測就測～

npm run dev npm run e2e // 新開一個命令行，專門用於在dev上進行測試

編寫測試腳本

nightwatch 在測試用例編寫的時候還是很舒服的。

我們在test/e2e/specs文件夾下建立對頁面的測試。

module.exports = { "default e2e tests": function (browser) { const devServer = browser.globals.devServerURL browser .url(devServer) ... // 你的測試代碼 .end() } }

無回調的鏈式操作

.url("http://www.google.com") // 打開地址 .waitForElementVisible("body", 1000) // 等待界面顯示 .assert.title("Google") // 斷言title為Google .assert.visible("input[type=text]") // 斷言輸入框顯示 .setValue("input[type=text]", "rembrandt van rijn") // 設置輸入框的值 .waitForElementVisible("button[name=btnG]", 1000) // 等待按鈕顯示 .click("button[name=btnG]") // 點擊按鈕 .pause(1000) // 暫停等待請求 .assert.containsText("ol#rso li:first-child", "Rembrandt - Wikipedia") // 斷言包含字元串 .end();

豐富的API

clearValue click deleteCookie deleteCookies end getAttribute getCookie getCookies getCssProperty getElementSize getLocation getLocationInView getTagName getText getTitle getValue init injectScript isVisible maximizeWindow moveToElement pause resizeWindow saveScreensshot setCookie setValue submitForm switchWindow urlHash waitForElementNotPresent waitForElementNotVisible waitForElementPresent waitForElementVisible

內置斷言庫

attriuteEquals containsText cssClassPresent cssClassNotPresent cssProperty elementPresent elementNotPresent hidden title urlContains value valueContains visible

支持Xpath

... .setValue("//div[@class="form-container"]//input[1]", "test") .click("//button[@type="button"]/span[text()="搜索"]") .saveScreenshot("test/e2e/reports/table.png")

愉快的編寫測試用例吧～

結束

嘿嘿，其實就是一個爬蟲啦～

祝題主玩的開心，以上。

測試，尤其是自動化測試在現代 WEB 工程中有著非常重要的角色，與交付過程集成良好的自動化測試流程可以在新版發布時幫你快速回歸產品功能，也可以充當產品文檔。

在這篇專欄文章中我結合自身實踐和 GitHub 趨勢對比了最受歡迎的 5 個 Node.js E2E 測試解決方案：最受歡迎的 5 款 Node.js 端到端測試框架

https://github.com/vuejs-templates/webpack/tree/master/template/test/e2e

怎麼為大中型的vue.js項目編寫e2e測試？

E2E測試

前端E2E

準備

說明

配置

編寫測試腳本

推薦閱讀

結束