先來一張效果圖感受下：
輸入指令後，代碼自動打開浏覽器，進入我們的測試網站，這裡用百度搜尋試一下，自動輸入搜尋内容，自動點選搜尋按鈕，搜尋結果出來之後自動截圖，完全根據腳本自動執行，不用人工幹預，感覺一氣呵成，爽歪歪。。。
demo代碼連接配接：https://github.com/ouxuwen/auto-test-demo
image
為什麼要自動化測試：
開發過程都是打開浏覽器重新整理頁面點點點才能确定UI元件工作情況是否符合自己預期。接入自動化測試以後，通過腳本代替這些手動點選，接入代碼watch後每次儲存檔案都能快速得知自己的的改動是否影響功能，節省了很多時間，畢竟機器幹事情比人總是要快得多。
Selenium 和 Nightwatch
我們這裡使用 Selenium 與 Nightwatch 搭建我們的測試腳本。前者是一款 Web 的自動化測試環境，它将幫我們搭建好測試環境，調取系統安裝的浏覽器，在浏覽器裡執行一切自動化行為；後者是一款 Test Runner，可以簡單了解為前者的控制軟體，它将提供一系列接口供我們編寫測試案例，同時也是與現有前端項目結合的橋梁。
開始搭建
下面馬上來搭建我們的demo工程：
首先要安裝 Java 7 或更高 ，因為這裡啟動selenium-server實際上是啟動一個jar封包件，是以需要java環境，輸入 java -version 檢視java有沒有安裝
image.png
同樣node環境肯定也是必須的啦 node -v。
image.png
建立一個檔案夾auto-test-demo ，執行 npm init -y 初始化 項目：
image
先安裝所需要的依賴，執行以下指令：
npm install --save-dev chromedriver cross-spawn nightwatch selenium-server
image
建立一個nightwatch的配置檔案 ：nightwatch.conf.js ，詳細的配置可以浏覽官網：nightwatch配置說明
// http://nightwatchjs.org/gettingstarted#settings-file
// 具體的配置項可以去nightwatch的官網檢視
//chormedriver 位址
//http://chromedriver.storage.googleapis.com/index.html
module.exports = {
src_folders: ['tests'],
output_folder: 'reports',
custom_assertions_path: "",
selenium: {
start_process: true,
server_path: require('selenium-server').path, //設定selenium-server 的jar包路徑
host: '127.0.0.1',
port: 4444,
cli_args: {
'webdriver.chrome.driver': require('chromedriver').path //設定chromedriver 的jar包路徑
}
},
test_settings: {
default: {
selenium_port: 4444,
selenium_host: 'localhost',
silent: true,
globals:""
},
chrome: {
desiredCapabilities: {
browserName: 'chrome',
javascriptEnabled: true,
acceptSslCerts: true
}
},
firefox: {
desiredCapabilities: {
browserName: 'firefox',
javascriptEnabled: true,
acceptSslCerts: true
}
}
}
}
建立測試腳本檔案夾tests,在裡面建立一個測試用例 demo.js
module.exports = {
'Find the answer.': function (client) {
// 定義 baidu 頁面中的節點.
const searchInput = '#kw'
const searchBtn = '#su'
const question = '少林足球'
// 啟動浏覽器并打開 baidu.com.
client.url('https://www.baidu.com/').maximizeWindow()
// 確定 "body" 和輸入框可以使用.
client.expect.element('body').to.be.present
client.expect.element(searchInput).to.be.visible
client.pause(2000) // 稍等兩秒.
// 輸入 "what is microsoft" 然後搜尋.
client.setValue(searchInput, question)
client.click(searchBtn)
client.pause(2000)
// 截一張圖然後儲存到 "reports/answer.png".
client.expect.element('body').to.be.present
client.saveScreenshot('reports/answers.png')
client.end()
}
}
建立執行測試用例腳本test.js:
process.env.NODE_ENV = 'testing'
let opts = process.argv.slice(2)
if (opts.indexOf('--config') === -1) {
opts = opts.concat(['--config', 'nightwatch.conf.js'])
}
if (opts.indexOf('--env') === -1) {
opts = opts.concat(['--env', 'chrome'])
}
//跨平台執行
const spawn = require('cross-spawn')
//調用 spawn 函數時，自動根據目前的運作平台，來決定是否生成一個 shell 來執行所給的指令。
const runner = spawn('./node_modules/.bin/nightwatch', opts, { stdio: 'inherit' })
runner.on('exit', function (code) {
process.exit(code)
})
runner.on('error', function (err) {
throw err
})
建立完成後，整個檔案夾目錄應該是這樣的：
image
開始測試：輸入指令 node test.js
image
測試成功啦~~
為了友善起見，可以把指令寫到package.json檔案裡
image