第一次寫測試是在看《Python Web開發(fā):測試驅(qū)動方法》的樣章的時候，當(dāng)通過一行命令就可以打開瀏覽器并完成指定操作時，感覺非常有趣。在無聊的時候，想到是否可以利用這種方式來簡化每日寫日報的工作，于是找到了selenium + nightwatch搭建的前端測試環(huán)境，在實現(xiàn)了這個小目標(biāo)后，想著將學(xué)習(xí)到的東西用在項目中。個人覺得該測試環(huán)境最大的作用應(yīng)該是可以簡化填寫表單的操作，如果項目存在很多表單，在進行業(yè)務(wù)測試的時候，如果每次都要填寫一遍表單，將會是一個非常枯燥無聊的工作。正在進行的項目剛好有非常多的表單，所以嘗試?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后就可以進行測試了。

點擊下載，下載后放到上面配置文件對應(yīng)的路徑下就可以?；蛘邊⒖肌案唷眹L試自行下載。

測試代碼

// 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 進行測試。
    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ù)，表示要使用其他瀏覽器進行測試。