第一次寫測試是在看《Python Web開發(fā):測試驅(qū)動方法》的樣章的時候登刺，當(dāng)通過一行命令就可以打開瀏覽器并完成指定操作時卢厂，感覺非常有趣。在無聊的時候河劝，想到是否可以利用這種方式來簡化每日寫日報的工作壁榕，于是找到了selenium + nightwatch搭建的前端測試環(huán)境，在實現(xiàn)了這個小目標(biāo)后赎瞎，想著將學(xué)習(xí)到的東西用在項目中牌里。個人覺得該測試環(huán)境最大的作用應(yīng)該是可以簡化填寫表單的操作，如果項目存在很多表單务甥，在進(jìn)行業(yè)務(wù)測試的時候牡辽，如果每次都要填寫一遍表單，將會是一個非吵伲枯燥無聊的工作态辛。正在進(jìn)行的項目剛好有非常多的表單，所以嘗試?yán)迷摴ぞ叻奖阒蟮臉I(yè)務(wù)測試哟绊。

網(wǎng)上已經(jīng)有很多關(guān)于這些知識點的文章因妙，嘗試用最簡單的步驟實現(xiàn)痰憎。

環(huán)境準(zhǔn)備

selenium是一個.jar后綴的文件票髓，需要有java的運行環(huán)境，在命令行輸入java -version查看是否安裝好了铣耘。nodejs 當(dāng)然也是必須的洽沟。

概述

總的來說，核心是使用selenium和driver操作瀏覽器蜗细，通過 nightwatch做斷言裆操。

依賴

需要在項目中安裝兩個依賴：

npm install --save-dev nightwatch selenium-standalone

selenium-standalone 是 selenium 的下載和管理工具。使用該工具炉媒，可以方便下載不同瀏覽器的driver踪区。不過不知道是個人原因還是資源被墻了，無法正常下載吊骤，所以實際上并沒有真正用到selenium-standalone缎岗。

配置

只需要兩個文件即可運行搭建好測試環(huán)境。

nightwatch.json

{
  "src_folders": ["tests"],
  "output_folder": "reports",
  "custom_commands_path": "",
  "custom_assertions_path": "",
  "page_objects_path": "",
  "globals_path": "",
  "selenium": {
    "start_process": true,
    "server_path": "node_modules/selenium-standalone/.selenium/selenium-server/2.53.1-server.jar",
    "log_path": "",
    "host": "127.0.0.1",
    "port": 4444,
    "cli_args": {
      "webdriver.chrome.driver": "node_modules/selenium-standalone/.selenium/chromedriver/2.22--chromedriver"
    }
  },
  "test_settings": {
    "default": {
      "launch_url": "http://localhost",
      "selenium_port": 4444,
      "selenium_host": "localhost",
      "silent": true,
      "screenshots": {
        "enabled": false,
        "path": ""
      },
      "desiredCapabilities": {
        "browserName": "firefox",
        "javascriptEnabled": true,
        "acceptSslCerts": true
      }
    },
    "chrome" : {
      "desiredCapabilities": {
        "browserName": "chrome",
        "javascriptEnabled": true,
        "acceptSslCerts": true
      }
    }
  }
}

重點是selenium.server_path和selenium.cli_args.webdriver.chrome.driver白粉，指定了selenium和driver的路徑传泊，上面提到，這兩個是用來操作瀏覽器的鸭巴。

start.js

require('nightwatch/bin/runner.js')

其實現(xiàn)在就已經(jīng)配置好了眷细，安裝好selenium和driver后就可以進(jìn)行測試了。

點擊下載鹃祖，下載后放到上面配置文件對應(yīng)的路徑下就可以溪椎。或者參考“更多”嘗試自行下載。

測試代碼

// tests/demo.js
module.exports = {
  'open browser': function (client) {
    client.url('http://www.baidu.com')
  }
}

運行node start.js -t tests/demo.js -e chrome --verbose校读，如果彈出 chrome 瀏覽器并且打開百度奔害，表示成功。

更多

不同的瀏覽器需要有不同的driver地熄，并且driver還會有版本华临，selenium-standalone就是為這種情況準(zhǔn)備的。下面的內(nèi)容網(wǎng)上都能找到端考。
首先是寫好配置文件雅潭，要下載什么driver，版本是什么：

// selenium-conf.js
const process = require('process')
module.exports = {
    // Selenium 的版本配置信息却特。請在下方鏈接查詢最新版本扶供。升級版本只需修改版本號即可。
    // https://selenium-release.storage.googleapis.com/index.html
    selenium: {
        version: '2.53.1',
        baseURL: 'https://selenium-release.storage.googleapis.com'
    },
    // Driver 用來啟動系統(tǒng)中安裝的瀏覽器裂明，Selenium 默認(rèn)使用 Firefox椿浓，如果不需要使用其他瀏覽器，則不需要額外安裝 Driver闽晦。
    // 在此我們安裝 Chrome 的 driver 以便使用 Chrome 進(jìn)行測試扳碍。
    driver: {
        chrome: {
            // Chrome 瀏覽器啟動 Driver，請在下方鏈接查詢最新版本仙蛉。
            // https://chromedriver.storage.googleapis.com/index.html
            version: '2.22',
            arch: process.arch,
            baseURL: 'https://chromedriver.storage.googleapis.com'
        }
    }
} 

然后是一個腳本笋敞，用來從上面指定的網(wǎng)址下載對應(yīng)的文件到項目依賴中：

// setup.js
// 載入安裝工具
const selenium = require('selenium-standalone')
// 載入配置，要安裝什么驅(qū)動荠瘪，什么版本的 selenium
const seleniumConfig = require('./selenium-conf.js')
// 調(diào)用 install 方法從網(wǎng)絡(luò)下載真正的 selenium
selenium.install({
    version: seleniumConfig.selenium.version,
    baseURL: seleniumConfig.selenium.baseURL,
    drivers: seleniumConfig.driver,
    logger: function (message) { console.log(message) },
    progressCb: function (totalLength, progressLength, chunkLength) {}
}, function (err) {
    if (err) throw new Error(`Selenium 安裝錯誤: ${err}`)
    console.log('Selenium 安裝完成.')
})

正常情況下夯巷，執(zhí)行上面的腳本就可以成功下載對應(yīng)的文件到node_modules/selenium-standalone/.selenium文件夾下。

再回過頭看看nightwatch.json文件哀墓，是不是selenium.server_path和selenium.cli_args.webdriver.chrome.driver都寫明了版本號趁餐？如果之后有新版本了，那不僅要修改selenium-conf.js文件篮绰，還要修改nightwatch.json肯定很麻煩后雷，所以就需要再增加一個文件，這個文件的作用是從selenium-conf.js中讀取字段阶牍，并替換nightwatch.json對應(yīng)內(nèi)容喷面。

// nightwatch.conf.js
const seleniumConfig = require('./selenium-conf')
const path = require('path')
module.exports = (function (settings) {
  // 告訴 Nightwatch 我的 Selenium 在哪里。
  settings.selenium.server_path = `${path.resolve()}/node_modules/selenium-standalone/.selenium/selenium-server/${seleniumConfig.selenium.version}-server.jar`
  // 設(shè)置 Chrome Driver, 讓 Selenium 有打開 Chrome 瀏覽器的能力走孽。
  settings.selenium.cli_args['webdriver.chrome.driver'] = `${path.resolve()}/node_modules/selenium-standalone/.selenium/chromedriver/${seleniumConfig.driver.chrome.version}-${seleniumConfig.driver.chrome.arch}-chromedriver`
  // 打開 ie
  settings.selenium.cli_args['webdriver.ie.driver'] = `${path.resolve()}/node_modules/selenium-standalone/.selenium/iedriver/IEDriverServer.exe`
  return settings;
})(require('./nightwatch.json'))

需要注意的就是惧辈，要使用不同瀏覽器，需要nightwatch.json中"test_settings"字段有不同瀏覽器的配置磕瓷，上面默認(rèn)是firefox盒齿，有chrome念逞。然后也要修改node start.js -t tests/demo.js -e chrome --verbose對應(yīng)參數(shù)，表示要使用其他瀏覽器進(jìn)行測試边翁。