最近再弄這個前端自動化測試工具，剛開始弄了幾天，目前為止遇到很多坑，光是安裝就費了不少時間，記錄一下，以便自己忘記。

這裏是它的官網，目前沒找到中文版的官網，全英文，對我這個英語渣來說有點難理解。

一、前言

參考：首先本文主要是參照這篇文章，並加上自己的理解，大家可以看看。

涉及知識：1.一些js知識（本文需要的不是太多）；2.nodejs。

基礎環境：1.java：java7以上，可以去官網下載；2.nodejs，版本沒限制，沒有安裝過就直接去官網下載就可以了。3.編輯器（我用的vscode，比較小巧）4.chrome瀏覽器（平時調試什麽的還是喜歡chrome，firefox有些樣式不喜歡）

安裝的時候就是一直點下一步就可以了（我是這麽點的，因為也不知道那些重要，幹脆就都要吧）。

查看版本命令：java是 java -version；nodejs是 node -v；

二、搭建項目

1.建立項目

首先創建個文件夾，比如我在F盤創建個nwDemo文件夾，然後輸入

npm init -y

然後就創建了一個package.json 的配置文件。

2.安裝 Selenium 與 Nightwatch

首先說明下，我們安裝 Selenium是用selenium-standalone來配置的。

1.所以要先安裝selenium-standalone。

npm install selenium-standalone --save-dev

2.安裝nightwatch

npm install nightwatch --save-dev

3.項目配置

1.配置nightwatch

項目文件夾創建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": "",
       "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": "chrome",
           "javascriptEnabled": true,
           "acceptSslCerts": true
         }
       },

       "chrome" : {
         "desiredCapabilities": {
           "browserName": "chrome",
           "javascriptEnabled": true,
           "acceptSslCerts": true
         }
       }
     }
}

這些都是一些配置，可以暫時不用理解，如果想知道詳細配置，點這裏查看，全英文哦。

2.接著創建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‘))

/*
 *  Nightwatch 會從 nightwatch.json 中讀取配置。
 *  不過如果存在 nightwatch.conf.js，將會變為首先從後者中讀取配置。
 *  nightwatch.conf.js 存在的意義是使用 JavaScript 動態生成配置信息。
 *  如果配置信息是不需要代碼修改的，直接使用 nightwatch.json 就可以啦。
 */

以上兩個都是基礎配置，文件名不能修改哦。

3.配置 Selenium

1.創建文件 "selenium-conf.js"

不知道大家發現沒有，上面創建nightwatch.conf.js的的時候，裏面第一行我們引用了一個selenium-cong文件，這個就是安裝selenium的一個配置文件。

在nwDemo文件夾裏創建build文件夾，並添加一個selenium-cong.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‘
        }
    }
} 

2.建立 Selenium 安裝腳本，一鍵安裝 Selenium。

上面我們已經安裝過selenium-standalone這個工具了，接下來我們就要用它來安裝Selenium。

在上一步創建的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 安裝完成.‘)
})

為了方便，我們把安裝命令寫到package.json裏，把下面這段命令寫到package.json的scripts裏：

"selenium-setup": "node ./build/selenium-setup.js"

3.安裝Selenium

執行 下面命令安裝 Selenium

npm run selenium-setup 

3.1.安裝問題

在這一步安裝時經常會遇到一些問題，下面就是我遇到的問題

首先是selenium-server-standalone-2.53.1.jar安裝不上。

兩種解決方法：

方法一：去這個 https://selenium-release.storage.googleapis.com/index.html 網址查看最新的版本，我查找的是3.9，把selenium-conf.js裏的selenium的version改成3.9，然後再次執行 npm run selenium-setup 命令。

方法二：按著ctrl去這個網址下載這個文件，手動放到它該在位置。

它應該在的位置是：你的項目文件夾\node_modules\selenium-standalone\.selenium\selenium-server。

第二個問題安裝chromedriver失敗了，

同樣的解決辦法有兩種。

方法一：首先我們要先知道自己的chrome要用那個版本的，先去點擊 https://chromedriver.storage.googleapis.com/index.html 網址，然後找到LATEST_RELEASE這個文件夾，點擊查看適配自己瀏覽器的版本，我的是2.41，所以把selenium-conf.js裏的chrome的version改成2.41。然後再次執行 npm run selenium-setup 命令。

方法二：同樣的，跟上面的的方法一樣，直接下載，然後放在相應的位置：你的項目文件夾\node_modules\selenium-standalone\.selenium\chromedriver。

完成上面的操作後再次執行 npm run selenium-setup 命令看看是否有錯誤

備註：我用的這個編譯器似乎有問題，有時候明明下載下來了，但是識別不了，重啟下編譯器試試，有可能就成功了；可能執行命令後還是報錯，但是你只要看到你的.selenium文件夾和下圖一樣就不用管了，看接下來的操作就可以。

4.建立啟動文件

在項目目錄中建立startup.js文件，並寫下一下代碼：

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

這是啟動命令，我們只需要在控制臺輸入 node ./startup 就可以執行，但是我建議用npm命令來執行，所以打開package.json文件，在scripts裏添加：

"start": "node ./startup.js"

以後要開啟測試的時候就直接輸入 npm start 命令就可以了

5.建立測試文件

在項目文件夾裏創建 tests 文件夾，並創建一個 tests.js 文件。（註意這裏的test文件夾對應的是nightwatch.json文件裏的第一項："src_folders": ["tests"]，顧名思義就是放測試文件的文件夾名稱）

這裏我要讓它執行一個 打開瀏覽器並登陸bing網站，搜索 "what is microsoft"，然後保存成截圖後退出 的操作。

在 tests.js 寫下：

module.exports = {
    ‘Find the answer.‘: function (client) {
      // 定義 Bing 頁面中的節點.
      const searchInput = ‘#sb_form_q‘
      const searchBtn = ‘#sb_form_go‘
      const question = ‘what is microsoft‘
  
      // 啟動瀏覽器並打開 bing.com.
      client.url(‘http://bing.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()
    }
  }

6.開始測試

控制臺執行命令：

npm start

然後就大功告成了！

至於tests.js裏的具體那些命令，還是要到官網去看，本文知識粗略的介紹一些nightwatch的安裝過程，現在還在摸索怎麽編寫文檔，因為這裏的坑好多啊，比如我們的頁面有iframe，找iframe裏的標簽找不到這種問題，等我解決了在寫一篇怎麽編寫測試文件的文章吧。

後記：

今天正好看到奇舞周刊公眾號推送了一篇文章：vue-cli 自動化測試 Nightwatch 詳解，也是講nightwatch的，很不錯，大家可以看看，是關於vue裏的nightwatch測試的。話說現在的三大框架我都不會，真的有些落伍了，得趕緊去補補了...

nightwatch-前端自動化測試工具安裝