nightwatch系列教程01——Hello Nightwatch

最近給前端項目作持續集成，用了nightwatch做爲end-to-end測試框架，期間踩坑不斷，不過總算有驚無險的完成了任務，實現了領導給的三個happy path的測試。學習期間，順便把nightwatch官網文檔稍微擼了一遍，我查了一下，貌似沒有中文文檔，因此這系列的博客教程，算是半個翻譯的文檔吧。我會首先按照官網的順序把重要的知識點介紹一下，接着會以一個vue項目爲基礎，作一個小前端項目的例子。
官網地址：http://nightwatchjs.org/

本文主要簡單介紹了nightwatch的運行機制，安裝，最後運行一個簡單的測試用例。

簡介

什麼是nightwatch

Nightwatch.js 是一個用來測試web應用和網站的自動化測試框架，它是由NodeJs編寫的，使用了W3C WebDriver API(以前是Selenium WebDriver)

它是徹底的瀏覽器(end-to-end)測試方案，旨在簡化搭建持續集成和編寫自動話測試的過程。它也一樣能夠用來寫NodeJs的單元測試。

nightwatch的名字，是出自一個荷蘭藝術家Rembrandt van Rijn的著名畫做：The Night Watch.這幅做品目前展出在Rijksmuseum, in Amsterdam - The Netherlands

什麼是WebDriver

WebDriver 是一個自動化web瀏覽器的通用庫。它一開始是Selenium項目的一部分，用java寫的，可是如今支持大多數的編程語言了。

Nightwatch 使用 WebDriver API 來呈現瀏覽器的自動化任務，好比打開窗口、點擊連接等。

WebDriver 如今是一個W3C的一個細則，旨在使瀏覽的自動化能夠統一標準。WebDriver 是一個遠程控制接口，啓用了自省和用戶代理控制。它提供一個平臺和一個restful的HTTP api做爲web瀏覽器被遠程控制的方式。

安裝

咱們首先建立一個項目

mkdir nightwatch-guide && cd nightwatch-guide

接着初始化項目的package.json

npm init -y

而後安裝依賴：

npm install nightwatch

因爲它是基於Selenium Server的，因此還得裝這個：

npm install selenium-server

咱們但願chrome-driver來測試，因此再裝一下谷歌的驅動，固然，你也能夠選擇火狐或者其餘的驅動

npm install chromedriver

至此，全部依賴都安裝結束了。

提示
* 以上的若是安裝不成功，請使用cnpm替代
* 官網的介紹，說要安裝jdk，我沒有試過不用jdk行不行，我一開始電腦上就有jdk環境，因此也沒有卸載掉試試。若是你安裝中報了相似java有關的錯誤，好比什麼包什麼模塊找不到，請安裝jdk後再安裝依賴。
* 這部分官網有介紹：http://nightwatchjs.org/gettingstarted#selenium-server-setup

配置

在項目的根目錄下新建一個nightwatch.conf.js文件，而後將如下的代碼拷貝進去。

module.exports = {
  src_folders: [''],
  output_folder: 'output',
  custom_assertions_path: [],
  page_objects_path: '',
  globals_path: '',

  selenium: {
    start_process: true,
    server_path: require('selenium-server').path,
    host: '127.0.0.1',
    port: 5555,
    cli_args: {
      'webdriver.chrome.driver': require('chromedriver').path
    }
  },

  test_settings: {
    default: {
      selenium_port: 5555,
      selenium_host: 'localhost',
      silent: true,
      globals: {
        devServerURL: 'http://localhost:' + (process.env.PORT || 1111)
      }
    },

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

    firefox: {
      desiredCapabilities: {
        browserName: 'firefox',
        javascriptEnabled: true,
        acceptSslCerts: true
      }
    }
  }
}

以上只是一些簡單的配置，大概的意思也能根據名字猜出來。你能夠先使用上面的配置做爲你的初始配置，先跑一個例子起來，不用太糾結每一個配置的含義。關於配置，我會單獨再寫一篇博客翻譯。

第一個測試用例

編碼測試代碼

咱們先不用配置上的src_folders的目錄做爲測試目錄。

在項目的根目錄下新建一個examples的文件夾，用於存放咱們的測試腳本。接着新建一個js文件做爲測試文件。
如圖：

examples
  |---01-hello-nightwatch.js

接着寫入咱們的測試腳本：

module.exports = {
  'search nightwatch on baidu': function (browser) {
    browser
      .url('http://www.baidu.com')
      .waitForElementVisible('body', 1000)
      .setValue('#kw', 'nightwatch')
      .click('#su')
      .pause(3000)
      .waitForElementVisible('#content_left', 3000)
      .end();
  }
};

上面的用例，模擬了用戶在百度搜索nightwatch關鍵字的過程。

運行測試用例

咱們先直接使用node_modules裏的命令跑一下：

./node_modules/.bin/nightwatch  examples/01-hello-nightwatch.js

可是這時候卻報錯了

Error retrieving a new session from the selenium server

Connection refused! Is selenium server started?
{ value: 
   { message: 'Unable to create new service: GeckoDriverService\nBuild info: version: \'3.14.0\', revision: \'aacccce0\', time: \'2018-08-02T20:13:22.693Z\'\nSystem info: host: \'jerrydeMacBook-Pro.local\', ip: \'fe80:0:0:0:48d:c61d:503d:2b53%en0\', os.name: \'Mac OS X\', os.arch: \'x86_64\', os.version: \'10.13.6\', java.version: \'1.8.0_172\'\nDriver info: driver.version: unknown',
     error: 'session not created' },
  status: 33 }

這是由於咱們沒有指定env,nightwatch會自動的找default的env,就是上面配置test_settings中的default，接着它會找默認的driver，是firefox的，咱們前面只安裝了chrome-driver，因此這時候確定是會報錯的。

要解決這個問題很簡單，找不到這個driver就安裝一個唄。

npm install geckodriver

接着再跑就ok了。

咱們也能夠指定使用chrome-driver，我也是這麼作的。

./node_modules/.bin/nightwatch examples/01-hello-nightwatch.js --env chrome

使用 --env 能夠使用指定的環境，注意這個環境要是上面test_settings中定義過的。

這時候運行，成功！以下圖：

使用npm運行

由於是用npm運行了，因此咱們不想指定一個特定的測試文件，這時候，咱們就要修改上面配置一節中的src_folders屬性，將值設置爲咱們測試文件的目錄便可：

src_folders: ['examples'],

接着咱們在package.json的scripts中加入運行腳本：

"e2e": "nightwatch --env chrome"

接着在項目根目錄下運行

npm run e2e

結果應該是根上面運行的如出一轍的～

Github

本文發表在個人我的博客中，歡迎圍觀，發現其餘乾貨～
博客地址 https://jerryyuanj.github.io/