搭建本身的前端自動化測試腳手架（二）

上一篇：搭建本身的前端自動化測試腳手架（一）
By LancerComet at 18:38, 2016.07.17. 歡迎轉載，轉載時還請保留做者署名。

嗨，歡迎回來！(･∀･)

在這一章咱們將安裝以前提到的 Selenium 與 Nightwatch 而後並正確配置它倆，讓它倆能正常的運 ♂ 做起來，趕忙搞 ♂ 起！

不過首先 ……

• 首先要安裝 Java 7 或更高 ，而且 java 命令可正常執行才能測試噢~~ 最簡單的判斷方法就是打開本身的終端，輸入 java 並回車，看看是否是有 Java 運行。若是有命令不存在之類的提示，請從新安裝 Java 運行環境 (･∀･)

• Node.JS , 並且要確保 npm 命令可用，我想應該其實不用提醒的 ~
  

開始搭建！

1. 建立項目

咱們來找個地方新建一個目錄，起名爲 "my-test-toolkit"，而後在目錄內使用終端運行 npm init -y 生成項目配置文件 package.json。

2. 安裝工具

而後咱們將安裝 Selenium 與 Nightwatch。

• 安裝 selenium-standalone：

  • npm install selenium-standalone --save-dev

• 安裝 Nightwatch:

  • npm install nightwatch --save-dev

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

3. 項目配置

So Easy 不是嗎！不過接下來的配置可能要花點功夫，可是也不是很麻煩啦，一步步來仍是很容易的~

咱們先開始配置 Nightwatch，以前提到這是一款 Test Runner 來着，它負責讀取咱們的測試腳本，爲咱們提供 API 來操做瀏覽器，幫咱們控制 Selenium。

一. 配置 Nightwatch

1. 首先，在項目根目錄創建文件 "nightwatch.json"，這個文件用來存放 Nightwatch 的配置信息。建立完畢以後，在文件內寫入如下內容：

   {
        "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 的文件名是 不能夠 修改的，由於 Nightwatch 每次啓動的時候都是從它讀取配置喔！這裏的配置項不少，不過先無論它，咱們接着建立文件。若是您但願查看 Nightwatch 的詳細配置，請點 這裏。

2. 接着在項目根目錄下建立文件 "nightwatch.conf.js" ，一樣此文件名也是不能夠修改的，由於 Nightwatch 每次啓動也會從它這裏讀取配置喔~ (´･_･`)
   建立完畢後，打開文件，並寫入以下內容：

   const path = require('path')
   
   module.exports = (function (settings) {
         return settings;
   })(require('./nightwatch.json'))
   
   /*
    *  Nightwatch 會從 nightwatch.json 中讀取配置。
    *  不過若是存在 nightwatch.conf.js，將會變爲首先從後者中讀取配置。
    *  nightwatch.conf.js 存在的意義是使用 JavaScript 動態生成配置信息。
    *  若是配置信息是不須要代碼修改的，直接使用 nightwatch.json 就能夠啦。
    */

3. 再次在項目根目錄創建文件 "startup.js"，而後在文件內部寫入：

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

   這個文件就是咱們測試的入口文件，之後咱們要執行測試就要運行這個文件，命令爲 node ./startup。入口文件的名字是能夠按照喜愛更改的，只要運行它就好啦。不過每次輸入 node ./startup 太麻煩了，因此咱們將這條命令寫入 npm scripts 中 ~~~ 打開 "package.json"，在 JSON 對象中創建 "script" 屬性，並寫入內容：

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

之後每次運行測試只要在項目根目錄中執行 npm start 就行了！(･∀･)
Nightwatch 的配置暫時告一段落（其實立刻就會回來………），接下來咱們來處理 Selenium.

二. 配置 Selenium

Selenium 是自動化測試環境，它提供了測試服務器、啓動瀏覽器、網頁自動操做等功能，同時暴露 API 給 Nightwatch 供咱們使用。

咱們接下來將要告訴 Nightwatch 咱們的 Selenium 安裝在哪裏，啓動瀏覽器的 Driver 程序在哪裏，而後創建 Selenium 的安裝腳本與手工啓動腳本，以便不時之需 ~~

Driver 是讓 Selenium 打開系統上已安裝的瀏覽器的程序。

• 1. 創建 Selenium 的配置信息。
  在項目根目錄下創建文件夾 "build"，並在其中建立文件 "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 用來啓動系統中安裝的瀏覽器，Selenium 默認使用 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'
          }
      }
  }

  本配置信息包含 Selenium 本體配置與 Driver 配置。咱們將在稍後動態載入這些配置。
  本文件的目的是爲了更好管理 Selenium 的版本。

• 2. 告訴 Nightwatch，個人 Selenium 與 Driver 在哪裏。
  再次打開項目根目錄下的 "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`
  
      // 設置 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`
      
      return settings;
  })(require('./nightwatch.json'))

咱們新加了兩行配置，它們的做用如註釋所示。
一樣的，若是您但願查看更多的配置項，請點擊 這裏。

• 3. 創建 Selenium 安裝腳本，一鍵安裝 Selenium。
  還記得上一章咱們提過 selenium-standalone 只是用來安裝和管理 Selenium 的工具麼？因此如今是時候用它來安裝 Selenium 了。咱們將經過調取 selenium-standalone 的內置方法來實現自動安裝。在 "build" 文件夾中創建文件 "selenium-setup.js"，並寫入以下信息：

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

  一樣爲了方便，咱們將安裝命令寫入 npm scripts 中：

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

  而後在項目根目錄執行 npm run selenium-setup 安裝 Selenium.

  當提示安裝完成後，一切就緒！(･∀･)

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

• 4. 想要手工啓動 Selenium？
  默認狀況下，Selenium 是由 Nightwatch 啓動的，不須要手工干預，不過若是想要手工啓動固然是能夠的啦。

  在 build 文件夾中創建文件 "selenium-start.js"，並寫入以下信息：

  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 啓動失敗: ${err}`)
      console.log(`Selenium 已手工啓動，進程 PID: ${child.pid}`)
      console.log('當再也不須要運行 Selenium 時可關閉此 PID 進程.')
  })

  而後一樣添加啓動命令至 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 就能夠手工啓動 Selenium 了。

搭建完了！

至此，咱們的配置與安裝工做已經完成，項目結構應該爲：

>
| -- build
|      | -- selenium-conf.js        # Selenium 版本信息配置。
|      | -- selenium-setup.js       # Selenium 安裝命令腳本。
|      | -- selenium-start.js       # Selenium 啓動命令腳本。
|
| -- nightwatch.conf.js             # Nightwatch 動態配置文件。
| -- nightwatch.json                # Nightwatch 配置文件。
| -- package.json                   # 項目信息配置文件。
| -- startup.js                     # 測試啓動入口文件。

「不過我好像看到 "nightwatch.json" 的配置很複雜，而咱們確沒怎麼動它？」
嗯~~ 到目前位置確實沒有太多須要改動的，不過仍是要注意一個配置項：

• 請注意 "desiredCapabilities" 下的 "browserName" 項，這是測試時將使用的瀏覽器，您能夠修改成 chrome、internet explorer、phantomjs，本文在介紹時只安裝了 Chrome 的 Driver，若是您須要使用其餘瀏覽器，要安裝相應的 Driver 才能夠正常使用。

• 默認瀏覽器爲 Firefox，若是您使用 Firefox 的話，不須要額外進行 Driver 的配置。

• 因此，若是您須要使用 Chrome 的話請將 "browserName" 修改成 "chrome" 喔！
  

Driver 的文檔可參考這裏。
若是您在搭建過程當中遇到困難，您能夠從 Github 獲取在下已經搭建好的 Start Kit.

接下來 ……

接下來就是專心寫測試用例了，距離成功愈來愈近了！不過今天就到這裏結束，咱們下一章見！⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄

下一篇：搭建本身的前端自動化測試腳手架（三）