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/