摘要：建立的配置信息。在此我們安裝的以便使用進(jìn)行測(cè)試。如果您在搭建過(guò)程中遇到困難，您可以從獲取在下已經(jīng)搭建好的接下來(lái)接下來(lái)就是專(zhuān)心寫(xiě)測(cè)試用例了，距離成功越來(lái)越近了不過(guò)今天就到這里結(jié)束，我們下一章見(jiàn)下一篇搭建自己的前端自動(dòng)化測(cè)試腳手架三

上一篇：搭建自己的前端自動(dòng)化測(cè)試腳手架（一）
By LancerComet at 18:38, 2016.07.17. 歡迎轉(zhuǎn)載，轉(zhuǎn)載時(shí)還請(qǐng)保留作者署名。

嗨，歡迎回來(lái)！(???)

在這一章我們將安裝之前提到的 Selenium 與 Nightwatch 然后并正確配置它倆，讓它倆能正常的運(yùn) ♂ 作起來(lái)，趕緊搞 ♂ 起！

首先要安裝 Java 7 或更高 ，并且 java 命令可正常執(zhí)行才能測(cè)試噢~~ 最簡(jiǎn)單的判斷方法就是打開(kāi)自己的終端，輸入 java 并回車(chē)，看看是不是有 Java 運(yùn)行。如果有命令不存在之類(lèi)的提示，請(qǐng)重新安裝 Java 運(yùn)行環(huán)境 (???)

Node.JS , 而且要確保 npm 命令可用，我想應(yīng)該其實(shí)不用提醒的 ~

我們來(lái)找個(gè)地方新建一個(gè)目錄，起名為 "my-test-toolkit"，然后在目錄內(nèi)使用終端運(yùn)行 npm init -y 生成項(xiàng)目配置文件 package.json。

然后我們將安裝 Selenium 與 Nightwatch。

安裝 selenium-standalone：

npm install selenium-standalone --save-dev

安裝 Nightwatch:

npm install nightwatch --save-dev

還記得嗎？上一章提到我們將使用 selenium-standalone 而不是直接手動(dòng)配置 Selenium 喔！

So Easy 不是嗎！不過(guò)接下來(lái)的配置可能要花點(diǎn)功夫，但是也不是很麻煩啦，一步步來(lái)還是很容易的~

我們先開(kāi)始配置 Nightwatch，之前提到這是一款 Test Runner 來(lái)著，它負(fù)責(zé)讀取我們的測(cè)試腳本，為我們提供 API 來(lái)操作瀏覽器，幫我們控制 Selenium。

一. 配置 Nightwatch

首先，在項(xiàng)目根目錄建立文件 "nightwatch.json"，這個(gè)文件用來(lái)存放 Nightwatch 的配置信息。創(chuàng)建完畢之后，在文件內(nèi)寫(xiě)入以下內(nèi)容：

{
     "src_folders": ["tests"],
     "output_folder": "reports",
     "custom_commands_path": "",
     "custom_assertions_path": "",
     "page_objects_path": "",
     "globals_path": "",

     "selenium": {
       "start_process": true,
       "server_path": "",
       "log_path": "",
       "host": "127.0.0.1",
       "port": 4444,
       "cli_args": {
         "webdriver.chrome.driver": ""
       }
     },

     "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
         }
       }
     }
}

nightwatch.json 的文件名是 不可以 修改的，因?yàn)?Nightwatch 每次啟動(dòng)的時(shí)候都是從它讀取配置喔！這里的配置項(xiàng)很多，不過(guò)先不管它，我們接著創(chuàng)建文件。如果您希望查看 Nightwatch 的詳細(xì)配置，請(qǐng)點(diǎn) 這里。

接著在項(xiàng)目根目錄下創(chuàng)建文件 "nightwatch.conf.js" ，同樣此文件名也是不可以修改的，因?yàn)?Nightwatch 每次啟動(dòng)也會(huì)從它這里讀取配置喔~ (′?_?`)
創(chuàng)建完畢后，打開(kāi)文件，并寫(xiě)入如下內(nèi)容：

const path = require("path")

module.exports = (function (settings) {
      return settings;
})(require("./nightwatch.json"))

/*
 *  Nightwatch 會(huì)從 nightwatch.json 中讀取配置。
 *  不過(guò)如果存在 nightwatch.conf.js，將會(huì)變?yōu)槭紫葟暮笳咧凶x取配置。
 *  nightwatch.conf.js 存在的意義是使用 JavaScript 動(dòng)態(tài)生成配置信息。
 *  如果配置信息是不需要代碼修改的，直接使用 nightwatch.json 就可以啦。
 */

再次在項(xiàng)目根目錄建立文件 "startup.js"，然后在文件內(nèi)部寫(xiě)入：

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

這個(gè)文件就是我們測(cè)試的入口文件，以后我們要執(zhí)行測(cè)試就要運(yùn)行這個(gè)文件，命令為 node ./startup。入口文件的名字是可以按照喜好更改的，只要運(yùn)行它就好啦。不過(guò)每次輸入 node ./startup 太麻煩了，所以我們將這條命令寫(xiě)入 npm scripts 中 ~~~ 打開(kāi) "package.json"，在 JSON 對(duì)象中建立 "script" 屬性，并寫(xiě)入內(nèi)容：

{
    ...
    "scripts": {
        "start": "node ./startup.js"
    },
    ...
}

以后每次運(yùn)行測(cè)試只要在項(xiàng)目根目錄中執(zhí)行 npm start 就好了！(???)
Nightwatch 的配置暫時(shí)告一段落（其實(shí)馬上就會(huì)回來(lái)………），接下來(lái)我們來(lái)處理 Selenium.

二. 配置 Selenium

Selenium 是自動(dòng)化測(cè)試環(huán)境，它提供了測(cè)試服務(wù)器、啟動(dòng)瀏覽器、網(wǎng)頁(yè)自動(dòng)操作等功能，同時(shí)暴露 API 給 Nightwatch 供我們使用。

我們接下來(lái)將要告訴 Nightwatch 我們的 Selenium 安裝在哪里，啟動(dòng)瀏覽器的 Driver 程序在哪里，然后建立 Selenium 的安裝腳本與手工啟動(dòng)腳本，以便不時(shí)之需 ~~

Driver 是讓 Selenium 打開(kāi)系統(tǒng)上已安裝的瀏覽器的程序。

1. 建立 Selenium 的配置信息。
在項(xiàng)目根目錄下建立文件夾 "build"，并在其中創(chuàng)建文件 "selenium-conf.js"，并寫(xiě)入如下信息：

const process = require("process")

module.exports = {
    // Selenium 的版本配置信息。請(qǐng)?jiān)谙路芥溄硬樵?xún)最新版本。升級(jí)版本只需修改版本號(hào)即可。
    // https://selenium-release.storage.googleapis.com/index.html
    selenium: {
        version: "2.53.1",
        baseURL: "https://selenium-release.storage.googleapis.com"
    },

    // Driver 用來(lái)啟動(dòng)系統(tǒng)中安裝的瀏覽器，Selenium 默認(rèn)使用 Firefox，如果不需要使用其他瀏覽器，則不需要額外安裝 Driver。
    // 在此我們安裝 Chrome 的 driver 以便使用 Chrome 進(jìn)行測(cè)試。
    driver: {
        chrome: {
            // Chrome 瀏覽器啟動(dòng) Driver，請(qǐng)?jiān)谙路芥溄硬樵?xún)最新版本。
            // https://chromedriver.storage.googleapis.com/index.html
            version: "2.22",
            arch: process.arch,
            baseURL: "https://chromedriver.storage.googleapis.com"
        }
    }
} 

本配置信息包含 Selenium 本體配置與 Driver 配置。我們將在稍后動(dòng)態(tài)載入這些配置。
本文件的目的是為了更好管理 Selenium 的版本。

2. 告訴 Nightwatch，我的 Selenium 與 Driver 在哪里。
再次打開(kāi)項(xiàng)目根目錄下的 "nightwatch.conf.js" 文件，并這樣編輯：

const seleniumConfig = require("./build/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 有打開(kāi) 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`
    
    return settings;
})(require("./nightwatch.json"))

我們新加了兩行配置，它們的作用如注釋所示。
同樣的，如果您希望查看更多的配置項(xiàng)，請(qǐng)點(diǎn)擊 這里。

3. 建立 Selenium 安裝腳本，一鍵安裝 Selenium。
還記得上一章我們提過(guò) selenium-standalone 只是用來(lái)安裝和管理 Selenium 的工具么？所以現(xiàn)在是時(shí)候用它來(lái)安裝 Selenium 了。我們將通過(guò)調(diào)取 selenium-standalone 的內(nèi)置方法來(lái)實(shí)現(xiàn)自動(dòng)安裝。在 "build" 文件夾中建立文件 "selenium-setup.js"，并寫(xiě)入如下信息：

const selenium = require("selenium-standalone")
const seleniumConfig = require("./selenium-conf.js")

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 安裝錯(cuò)誤: ${err}`)
    console.log("Selenium 安裝完成.")
})

同樣為了方便，我們將安裝命令寫(xiě)入 npm scripts 中：

{
    ...
    "scripts": {
        "start": "node ./startup.js",
        "selenium-setup": "node ./build/selenium-setup.js"
    },
    ...
}

然后在項(xiàng)目根目錄執(zhí)行 npm run selenium-setup 安裝 Selenium.

當(dāng)提示安裝完成后，一切就緒！(???)

Selenium 與其 Driver 會(huì)安裝到 "node_modules/selenium-standalone/.selenium" 中。

4. 想要手工啟動(dòng) Selenium？
默認(rèn)情況下，Selenium 是由 Nightwatch 啟動(dòng)的，不需要手工干預(yù)，不過(guò)如果想要手工啟動(dòng)當(dāng)然是可以的啦。

在 build 文件夾中建立文件 "selenium-start.js"，并寫(xiě)入如下信息：

const selenium = require("selenium-standalone")
const seleniumConfig = require("./selenium-conf.js")

selenium.start({
    drivers: seleniumConfig.driver
}, function (err, child) {
    if (err) throw new Error(`Selenium 啟動(dòng)失敗: ${err}`)
    console.log(`Selenium 已手工啟動(dòng)，進(jìn)程 PID: ${child.pid}`)
    console.log("當(dāng)不再需要運(yùn)行 Selenium 時(shí)可關(guān)閉此 PID 進(jìn)程.")
})

然后同樣添加啟動(dòng)命令至 npm scripts 中：

{
    ...
    "scripts": {
        "start": "node ./startup.js",
        "selenium-setup": "node ./build/selenium-setup.js",
        "selenium-start": "node ./build/selenium-start.js"
    },
    ...
}  

以后使用命令 npm run selenium-start 就可以手工啟動(dòng) Selenium 了。

至此，我們的配置與安裝工作已經(jīng)完成，項(xiàng)目結(jié)構(gòu)應(yīng)該為：

>
| -- build
|      | -- selenium-conf.js        # Selenium 版本信息配置。
|      | -- selenium-setup.js       # Selenium 安裝命令腳本。
|      | -- selenium-start.js       # Selenium 啟動(dòng)命令腳本。
|
| -- nightwatch.conf.js             # Nightwatch 動(dòng)態(tài)配置文件。
| -- nightwatch.json                # Nightwatch 配置文件。
| -- package.json                   # 項(xiàng)目信息配置文件。
| -- startup.js                     # 測(cè)試啟動(dòng)入口文件。

“不過(guò)我好像看到 "nightwatch.json" 的配置很復(fù)雜，而我們確沒(méi)怎么動(dòng)它？”
嗯~~ 到目前位置確實(shí)沒(méi)有太多需要改動(dòng)的，不過(guò)還是要注意一個(gè)配置項(xiàng)：

請(qǐng)注意 "desiredCapabilities" 下的 "browserName" 項(xiàng)，這是測(cè)試時(shí)將使用的瀏覽器，您可以修改為 chrome、internet explorer、phantomjs，本文在介紹時(shí)只安裝了 Chrome 的 Driver，如果您需要使用其他瀏覽器，要安裝相應(yīng)的 Driver 才可以正常使用。

默認(rèn)瀏覽器為 Firefox，如果您使用 Firefox 的話(huà)，不需要額外進(jìn)行 Driver 的配置。

所以，如果您需要使用 Chrome 的話(huà)請(qǐng)將 "browserName" 修改為 "chrome" 喔！

Driver 的文檔可參考這里。
如果您在搭建過(guò)程中遇到困難，您可以從 Github 獲取在下已經(jīng)搭建好的 Start Kit.

接下來(lái)就是專(zhuān)心寫(xiě)測(cè)試用例了，距離成功越來(lái)越近了！不過(guò)今天就到這里結(jié)束，我們下一章見(jiàn)！?(? ???ω??? ?)?

下一篇：搭建自己的前端自動(dòng)化測(cè)試腳手架（三）