前文：記錄一次項目代碼遷移過程
上文代碼遷移的目的就是為了新增vue腳手架自帶的UI測試架構，工具有了，就需要實踐運作在項目中了（修改配置檔案、編寫測試腳本等）。
一、單元測試
測試架構 karma + mocha + chai。
（1）修改配置檔案“test/unit/index.js”:
index.js 配置了哪些檔案會被當成單測腳本，哪些檔案可以被當成測試源檔案（被測對象）。
代碼如下（暫時不用修改）：
import Vue from 'vue'
Vue.config.productionTip = false
// require all test files (files that ends with .spec.js)
// 單測腳本為'目前目錄下的specs目錄下的滿足以 .spec字尾的檔案'，即/test/unit/specs/*.spec.js
const testsContext = require.context('./specs', true, /\.spec$/)
testsContext.keys().forEach(testsContext)
// require all src files except main.js for coverage.
// you can also change this to match only the subset of files that
// you want coverage for.
const srcContext = require.context('../../src', true, /^\.\/(?!main(\.js)?$)/)
srcContext.keys().forEach(srcContext)
（2）修改配置檔案“karma.conf.js”:
未修改前：
// This is a karma config file. For more details see
// http://karma-runner.github.io/0.13/config/configuration-file.html
// we are also using it with karma-webpack
// https://github.com/webpack/karma-webpack
var webpackConfig = require('../../build/webpack.test.conf')
module.exports = function karmaConfig (config) {
config.set({
// to run in additional browsers:
// 1. install corresponding karma launcher
// http://karma-runner.github.io/0.13/config/browsers.html
// 2. add it to the `browsers` array below.
browsers: ['PhantomJS'],
frameworks: ['mocha', 'sinon-chai', 'phantomjs-shim'],
reporters: ['spec', 'coverage'],
files: ['./index.js'],
preprocessors: {
'./index.js': ['webpack', 'sourcemap']
},
webpack: webpackConfig,
webpackMiddleware: {
noInfo: true
},
coverageReporter: {
dir: './coverage',
reporters: [
{ type: 'lcov', subdir: '.' },
{ type: 'text-summary' }
]
}
})
}
修改後（修改了browsers 和frameworks）：
// This is a karma config file. For more details see
// http://karma-runner.github.io/0.13/config/configuration-file.html
// we are also using it with karma-webpack
// https://github.com/webpack/karma-webpack
var webpackConfig = require('../../build/webpack.test.conf')
module.exports = function karmaConfig (config) {
config.set({
// to run in additional browsers:
// 1. install corresponding karma launcher
// http://karma-runner.github.io/0.13/config/browsers.html
// 2. add it to the `browsers` array below.
browsers: ['Chrome'],
frameworks: ['mocha', 'sinon-chai'],
reporters: ['spec', 'coverage'],
files: ['./index.js'],
preprocessors: {
'./index.js': ['webpack', 'sourcemap']
},
webpack: webpackConfig,
webpackMiddleware: {
noInfo: true
},
coverageReporter: {
dir: './coverage',
reporters: [
{ type: 'lcov', subdir: '.' },
{ type: 'text-summary' }
]
}
})
}
試運作：#npm run unit
報錯： ERROR [launcher]: Cannot load browser "Chrome": it is not registered! Perhaps you are missing some plugin?
原因：因為沒有安裝對應的 karma-chrome-launcher
解決：#npm install karma-chrome-launcher --save-dev【之前寫過博文 配置karma支援Chrome浏覽器】
（3）編寫測試腳本并運作
編寫測試腳本略（TODO）
【實際項目中，根據代碼模闆可以自動生成相應的界面單測腳本，把代碼下載下傳好後，複制到 test/unit/specs/ 目錄下，運作即可】
#npm run unit // 會報錯
#karma start test/unit/karma.conf.js // 能運作，但是有一個很大的問題——不能自動監控，即使在karma.conf.js中添加了 "autoWatch: true"也不行 （TODO 待解決，必須解決！）
二、E2E測試
（0）環境配置
需要有 jdk 環境、
（1）NightWatch配置（test/e2e/nightwatch.conf.js）
采用預設的配置，加了一點注釋，如下：
require('babel-register')
var config = require('../../config')
// http://nightwatchjs.org/gettingstarted#settings-file
module.exports = {
// 1，基本配置：測試用例源路經、輸出路徑、基礎指令路徑、全局路徑globals_path
src_folders: ['test/e2e/specs'],
output_folder: 'test/e2e/reports',
custom_assertions_path: ['test/e2e/custom-assertions'],
// 2，selenium配置：是否開啟、路徑、端口等
selenium: {
start_process: true,
server_path: require('selenium-server').path,
host: '127.0.0.1',
port: 4444,
cli_args: { // 指定将要運作的webdriver
'webdriver.chrome.driver': require('chromedriver').path
}
},
// 3，測試配置——制定測試時各個環境的設定，預設是default，通過--env加環境名可以指定配置的任意環境。
test_settings: {
default: {
selenium_port: 4444,
selenium_host: 'localhost',
silent: true,
globals: {
devServerURL: 'http://localhost:' + (process.env.PORT || config.dev.port)
}
},
chrome: {
desiredCapabilities: {
browserName: 'chrome',
javascriptEnabled: true,
acceptSslCerts: true
}
},
firefox: {
desiredCapabilities: {
browserName: 'firefox',
javascriptEnabled: true,
acceptSslCerts: true
}
}
}
}
（2）運作器配置（test/e2e/runner.js）
runner.js是E2E測試的檔案入口，此處采用預設的配置，如下：
// 1. start the dev server using production config
process.env.NODE_ENV = 'testing'
const webpack = require('webpack')
const DevServer = require('webpack-dev-server')
const webpackConfig = require('../../build/webpack.prod.conf')
const devConfigPromise = require('../../build/webpack.dev.conf')
let server
devConfigPromise.then(devConfig => {
const devServerOptions = devConfig.devServer
const compiler = webpack(webpackConfig)
server = new DevServer(compiler, devServerOptions)
const port = devServerOptions.port
const host = devServerOptions.host
return server.listen(port, host)
})
.then(() => {
// 2. run the nightwatch test suite against it
// to run in additional browsers:
// 1. add an entry in test/e2e/nightwatch.conf.js under "test_settings"
// 2. add it to the --env flag below
// or override the environment flag, for example: `npm run e2e -- --env chrome,firefox`
// For more information on Nightwatch's config file, see
// http://nightwatchjs.org/guide#settings-file
let 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'])
}
const spawn = require('cross-spawn')
const runner = spawn('./node_modules/.bin/nightwatch', opts, { stdio: 'inherit' })
runner.on('exit', function (code) {
server.close()
process.exit(code)
})
runner.on('error', function (err) {
server.close()
throw err
})
})
（3） 測試運作，編寫測試腳本
- 指令：#npm run e2e
- 報錯：Error: Cannot find module 'webpack-dev-server'
>> 解決：#npm install webpack-dev-server --save-dev
-
又報錯：
.../webAdmin-web/test/e2e/runner.js:12
devConfigPromise.then(devConfig => {
^
TypeError: devConfigPromise.then is not a function
>> 解決：//TODO
暫時不能解決，不知道為什麼。之前做的 e2e_demo 可以運作，記錄一下：點選檢視源碼，可以對比着修改，先跳過。
三、腳本錄制與回放
E2E測試涉及到業務，手動編寫測試case不僅費時，也不一定能寫的全面。故而引入腳本錄制工具——uirecorder。
腳本的回放——？？？？？
（1）安裝 uirecorder
#cd ${projectRootPath} // 轉到項目根目錄
#mkdir test/uirecorder // 在“test”目錄下建立檔案夾“uirecorder”
#cd test/uirecorder // 轉到uirecorder目錄
#cnpm install uirecorder mocha -g // 安裝uirecorder 及 mocha
#uirecorder --version // 檢查 uirecorder 安裝成功與否
出現如下所示的結果，即安裝成功：
#mocha --version // 檢查 mocha 版本
（2）初始化 uirecorder 配置
#cd ${projectRootPath}/test/uirecorder // 轉到項目中的uirecorder根目錄
#uirecorder init // 初始化uirecorder配置
一路回車即可，過程記錄：
[user1@localhost uirecorder]$ uirecorder init
__ ______ ____ __
/ / / / _/ / __ \___ _________ _________/ /__ _____
/ / / // / / /_/ / _ \/ ___/ __ \/ ___/ __ / _ \/ ___/
/ /_/ // / / _, _/ __/ /__/ /_/ / / / /_/ / __/ /
\____/___/ /_/ |_|\___/\___/\____/_/ \__,_/\___/_/ v2.5.37
Official Site: http://uirecorder.com
------------------------------------------------------------------
? Path擴充屬性配置,除id,name,class之外 (data-id,data-name,type,data-type,role,da? Path擴充屬性配置,除id,name,class之外 data-id,data-name,type,data-type,role,data-role,da
ta-value
? 屬性值黑名單正則
? class值黑名單正則
? 斷言前隐藏
? WebDriver域名或IP 127.0.0.1
? WebDriver端口号 4444
? 需要同時測試的浏覽器清單 chrome, ie 11
config.json 檔案儲存成功
package.json 檔案建立成功
README.md 檔案建立成功
screenshots 檔案夾建立成功
commons 檔案夾建立成功
uploadfiles 檔案夾建立成功
.editorconfig 檔案建立成功
.gitignore 檔案建立成功
install.sh 檔案建立成功
run.bat 檔案建立成功
run.sh 檔案建立成功
hosts 檔案建立成功
.vscode/launch.json 檔案建立成功
Start install project dependencies...
--------------------------------------------
✔ Installed 7 packages
✔ Linked 183 latest versions
✔ Run 0 scripts
deprecate [email protected] › node-uuid@^1.4.1 Use uuid module instead
Recently updated (since 2018-02-28): 2 packages (detail see file /home/user1/workspace/git/code-move/webAdmin-web/test/uirecorder/node_modules/.recently_updates.txt)
✔ All packages installed (206 packages installed from npm registry, used 8s, speed 331.56kB/s, json 190(1.99MB), tarball 601.42kB)
Start install webdriver dependencies...
--------------------------------------------
> [email protected] installdriver /home/user1/workspace/git/code-move/webAdmin-web/test/uirecorder
> selenium-standalone install --drivers.firefox.baseURL=http://npm.taobao.org/mirrors/geckodriver --baseURL=http://npm.taobao.org/mirrors/selenium --drivers.chrome.baseURL=http://npm.taobao.org/mirrors/chromedriver --drivers.ie.baseURL=http://npm.taobao.org/mirrors/selenium
----------
selenium-standalone installation starting
----------
---
selenium install:
from: http://npm.taobao.org/mirrors/selenium/3.7/selenium-server-standalone-3.7.1.jar
to: /home/user1/workspace/git/code-move/webAdmin-web/test/uirecorder/node_modules/[email protected]@selenium-standalone/.selenium/selenium-server/3.7.1-server.jar
---
chrome install:
from: http://npm.taobao.org/mirrors/chromedriver/2.33/chromedriver_linux64.zip
to: /home/user1/workspace/git/code-move/webAdmin-web/test/uirecorder/node_modules/[email protected]@selenium-standalone/.selenium/chromedriver/2.33-x64-chromedriver
---
firefox install:
from: http://npm.taobao.org/mirrors/geckodriver/v0.19.1/geckodriver-v0.19.1-linux64.tar.gz
to: /home/user1/workspace/git/code-move/webAdmin-web/test/uirecorder/node_modules/[email protected]@selenium-standalone/.selenium/geckodriver/0.19.1-x64-geckodriver
-----
selenium-standalone installation finished
-----
------------------------------------------------------------------
發現新版本: 2.5.37 → 2.5.40
執行指令更新：npm i uirecorder -g
------------------------------------------------------------------
>> 完成後，uirecorder在項目中的目錄結構如下所示：
>> 安裝相關依賴：
（3）PC錄制腳本
1、本地啟動項目
#npm run dev
2、另開一個終端，啟動webDriver伺服器 Selenium standalone server
- 前提：
Selenium standalone server已安裝【#npm install selenium-standalone -g】
- 指令：
#selenium-standalone start
或者 #npm run server
>> 出現 Selenium started 字樣即成功！
- 注意：
保持 Selenium standalone server 一直是打開狀态，不要關閉該終端！
3、 開始錄制腳本
#cd ${projectRootPath}/test/uirecorder // 轉到uirecorder根路徑
#uirecorder start specs/demo.spec.js // 開始錄制，腳本名為demo.spec.js，存放在目前目錄（uirecorder根目錄）下的specs目錄下
出現如下圖所示的界面，輸入“y”或“Y”即可：
在錄制浏覽器中輸入要測試的URL，點選“開始錄制”：
然後就是在界面上各種手動點點點點，輸入等.....，點選“結束錄制”即完成了本次的錄制，腳本“demo.spec.js”也生成完畢，去對應的目錄下去檢視吧！以下是在錄制過程中記錄的執行過程：
4、測試腳本的回放
轉到項目中 uirecorder 根目錄；
#source run.sh specs/demo.spec.js 或者 mocha specs/demo.spec.js
記錄一下過程：
[user1@localhost uirecorder]$ source run.sh specs/demo.spec.js
> [email protected] singletest /home/user1/workspace/git/code-move/webAdmin-web/test/uirecorder
> mocha --reporter mochawesome-uirecorder --bail "specs/demo.spec.js"
[mochawesome] Generating report files...
specs/demo.spec : chrome
✓ url: http://localhost:8080 (2136ms)
✓ waitBody: (684ms)
✓ click: password ( input[name="password"], 72, 27, 0 ) (776ms)
✓ sendKeys: 123456
✓ click: 登入 ( #app button, 117, 30, 0 ) (801ms)
✓ scrollElementTo: #app div:nth-child(3) > div.contract-trigger, 95, 14 (664ms)
✓ click: 系統管理 ( #app li[role="menuitem"]:nth-child(5) > div.el-submenu__title, 136, 29, 0 ) (736ms)
✓ scrollElementTo: #app ul.sidebar-container, 0, 209 (675ms)
✓ click: 系統管理 ( //span[text()="系統管理"], 53, 2, 0 ) (728ms)
✓ scrollElementTo: #app ul.sidebar-container, 0, 0 (657ms)
✓ click: 工作任務管理 ( //span[text()="工作任務管理"], 17, 5, 0 ) (816ms)
✓ scrollElementTo: #app span > div.el-select > div:nth-child(3) > div.contract-trigger, 95, 14 (668ms)
✓ click: div > div.el-select > div.el-input--suffix > input[type="text"].el-input__inner, 120, 30, 0 (800ms)
1) scrollElementTo: div.el-zoom-in-top-enter-to > div.el-scrollbar > div.el-scrollbar__wrap > ul.el-select-dropdown__list > div.resize-triggers > div.expand-trigger, 16, 16
13 passing (52s)
1 failing
1) specs/demo.spec : chrome scrollElementTo: div.el-zoom-in-top-enter-to > div.el-scrollbar > div.el-scrollbar__wrap > ul.el-select-dropdown__list > div.resize-triggers > div.expand-trigger, 16, 16:
Error: the string "Wait element displayed timeout: div.el-zoom-in-top-enter-to > div.el-scrollbar > div.el-scrollbar__wrap > ul.el-select-dropdown__list > div.resize-triggers > div.expand-trigger ,30000ms" was thrown, throw an Error :)
at Runner.fail (node_modules/[email protected]@mocha/lib/runner.js:233:11)
at node_modules/[email protected]@mocha/lib/runner.js:566:18
at done (node_modules/[email protected]@mocha/lib/runnable.js:293:5)
at node_modules/[email protected]@mocha/lib/runnable.js:354:11
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:160:7)
[mochawesome] Report saved to reports/index.html
[mochawesome] Report saved to reports/index.xml
[user1@localhost uirecorder]$
注意點：
- 13個case passing，1個failing，導緻後續的case都不再回放。
- 由 mochawesome 生成的測試報告為：
reports/index.html
reports/index.xml
- 在浏覽器中檢視測試報告：
reports/index.html： reports/index.xml：