使用Nightwatch編寫ui自動化測試

時間 2019-11-08

原文原文鏈接

介紹

Write End-to-End tests in Node.js quickly and effortlessly that run against a Selenium/WebDriver server.javascript

安裝Nightwatch

# 在當前項目中安裝
npm i -D nightwatch

# 或者全局安裝
npm i -g nightwatch

安裝webDriver

Nightwatch有兩種方式去調起瀏覽器跑測試java

經過Selenium，調各個瀏覽器的webDriver喚起瀏覽器。這個須要安裝java、Selenium、webDriver
直接經過各家瀏覽器的webDriver調起對應的瀏覽器。

我選擇了第二種，這裏就須要去安裝的chrome的webDriver，有個npm包幫咱們作了這個事web

npm i -D chromedriver

安裝的時候可能會遇到'網絡問題'，在根目錄下新建一個.npmrc文件,指定一下下載路徑chrome

chromedriver_cdnurl=https://npm.taobao.org/mirrors/chromedriver

配置文件nightwatch.json

Nightwatch啓動的時候默認會去加載nightwatch.json配置文件，nightwatch.js也行，這裏貼上個人配置文件，並對一些經常使用的字段作一下說明，其他看文檔就行shell

{
  "src_folders": ["test/ui"],
  "output_folder": "reports",
  "custom_commands_path": "",
  "custom_assertions_path": "",
  "page_objects_path": "",
  "globals_path": "./webDriver.js",

  "selenium": {
    "start_process": false
  },

  "test_settings": {
    "default": {
      "selenium_port": 9515,
      "selenium_host": "localhost",
      "default_path_prefix": "",

      "desiredCapabilities": {
        "browserName": "chrome",
        "chromeOptions": {
          "args": [
            "--no-sandbox",
            "user-data-dir=/Users/shenshuaijia/Library/Application Support/Google/Chrome"
          ]
        },
        "acceptSslCerts": true
      },
      "globals": {
        "domain": "http://xxx.com"
      }
    }
  }
}

src_folders: 指定測試用例的文件夾，裏面全部的js文件測試的時候都會被執行
output_folder：指定產生報告存放的路徑
globals_path：全局模塊路徑，nightwatch啓動時還會去加載這個路徑下的模塊，好比咱們剛剛下載了Chromedriver，咱們須要寫個模塊文件，簡單包裝一下暴露出來被nightwatch加載。這是我根目錄下的webDriver.js文件，這樣的話，nightwatch就能經過這個文件調webdriver而後啓動瀏覽器了npm
```
const chromedriver = require('chromedriver')

module.exports = {
  before: function(done) {
    chromedriver.start()
    done()
  },

  after: function(done) {
    chromedriver.stop()
    done()
  }
}
```
selenium： selenium的配置，由於我選擇了第二中安裝方式，因此要禁用掉selenium
test_settings：啓動測試時的一些配置，每個key對應一套配置，好比經過命令nightwatch --env default使用default那一套配置，也能夠用nightwatch --env integration來運行integration那套配置，但須要事先在test_settings中有配置
desiredCapabilities：這個是對Chromdriver能力配置，具體的話，就須要查看Chromdriver的文檔
這裏我遇到了一個比較特殊的狀況，我須要使用平時使用chrome留下的cookie，而不是徹底的沙盒模式，因此，我這裏須要啓動chromedriver的時候，指定加載chrome用戶數據的文件夾"user-data-dir=/Users/xxx/Library/Application Support/Google/Chrome"，這樣全部的登陸信息都能在測試的時候被使用。json
globals：在測試的時候，也能夠定義一下全局變量，方便測試的時候使用,這裏我定義了一個domain，寫測試的時候能夠在browser.globals.domain獲取

編寫測試

在test/ui文件夾下新建一個測試文件page.test.js瀏覽器

module.exports = {
  'Demo test Google' : function (browser) {
    browser
      .url('http://www.google.com')
      .waitForElementVisible('body', 1000)
      .setValue('input[type=text]', 'nightwatch')
      .waitForElementVisible('button[name=btnG]', 1000)
      .click('button[name=btnG]')
      .pause(1000)
      .assert.containsText('#main', 'Night Watch')
      .end();
  }
}

nightwatch擁有比較優雅的測試寫法。這裏就是簡單打開一個谷歌頁面，往輸入框輸入nightwatch而後點擊按鈕。記住全部的測試完成後須要調end方法來退出瀏覽量。nightwatch也能夠定義一些鉤子函數cookie

module.exports = {
  before : function(browser) {
    console.log('Setting up...');
  },

  after : function(browser) {
    console.log('Closing down...');
  },

  beforeEach : function(browser) {

  },

  afterEach : function() {

  },

  'step one' : function (browser) {
    browser
     // ...
  },

  'step two' : function (browser) {
    browser
    // ...
      .end();
  }
};