Photo by Nightwatch.js on Twitter

前言

上一篇我們已經簡單的介紹過 Nightwatch.js 的介紹與前置的安裝作業
如果在看這篇的大哥大姐還沒看過上一篇的話
小弟建議先看看確認前置作業的安裝完成再繼續這篇的內容
鼠年全馬鐵人挑戰 WEEK 15：Nightwatch.js (上)
那這篇就要接續上一篇的內容開始實作囉～ ヽ(́◕◞౪◟◕‵)ﾉ

使用 Nightwatch

設定 Configuration

在 Nightwatch 中 configuration 的設定有兩種文件的設定方式
一個是 nightwatch.json 另一個是 nightwatch.conf.js
但是當兩個文件同時存在時， Nightwatch 只會讀取 nightwatch.conf.js

那就用 nightwatch.json 和 nightwatch.conf.js 分別設定 chromedriver 跟 geckodriver

nightwatch.json

在專案底下新增 nightwatch.json 的 configuration 文檔
接著裡面的內容可以先根據 nightwatch 官方所提供的範例寫入

{
    "src_folders": [
        "tests"
    ],
    "webdriver": {
        "start_process": true,
        "server_path": "node_modules/.bin/chromedriver",
        "port": 9515
    },
    "test_settings": {
        "default": {
            "desiredCapabilities": {
                "browserName": "chrome"
            }
        }
    }
}

nightwatch.conf.js

nightwatch.conf.js 的內容其實跟 nightwatch.json 一樣
只是將格式從 JSON 轉換成 JavaScript

module.exports = {
    src_folders: [
        "tests"
    ],
    webdriver: {
        start_process: true,
        server_path: require('geckodriver').path,
        port: 4444,
    },
    test_settings: {
        default: {
            desiredCapabilities: {
                browserName: 'firefox',
            }
        }
    }
};

以上兩種 configuration 可以擇一使用。

基本設定

• src_folders：測試腳本所在的資料夾 (所以待會的範例會建立一個 tests 的資料夾)
• webdriver：與 WebDriver 相關的配置
  • start_process： Webdriver server 在執行時，將測試運行在後台的子進程中
  • server_path：此路徑為 Webdriver 所在的位置
  • port： Webdriver server 在設定的 port 號和 Nightwatch 連接
• test_settings：定義測試環境
  • desiredCapabilities：創建 WebDriver 功能。可以指定瀏覽器名稱以及其他功能
• custom_commands_path：加載自定義 command 的路徑位置。
• custom_assertions_path：加載自定義 assertion 的路徑位置。
• page_objects_path：加載自定義 page object 的路徑位置。
• globals_path：加載自定義的 全域變數 的路徑位置，或是直接將變數寫在裡面。

撰寫測試

建立一份名為 tests 的資料夾，用來存放測試腳本
在 tests 的資料夾中新增一個測試腳本的 js 檔案
這邊小弟先把檔案名稱命名為 demo.js
以下是小弟的測試腳本

module.exports = {
    '@tags': ['ron'],
    'Demo test ronhsieh article': function(browser) {
        browser
            .url('https://ithelp.ithome.com.tw')
            .waitForElementVisible('body')
            .assert.titleContains('iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天')
            .assert.visible('div[id=searchDropdown]')
            .click('div[id=searchDropdown]')
            .assert.visible('input[type=text]')
            .setValue('input[type=text]', '鼠年全馬鐵人挑戰 WEEK 15：Nightwatch.js (上)')
            .assert.visible('label[for=searchArticle]')
            .click('label[for=searchArticle]')
            .click({
                selector: '//form/button[@type="submit"]',
                locateStrategy: 'xpath'
            })
            .assert.containsText('a[class=search-qa-list__title-link]', '鼠年全馬鐵人挑戰 WEEK 15：Nightwatch.js (上)')
            .end();
    }
};

Assert

只要是 .assert 開頭都屬於 assert
上方的測試腳本與 assert 有關的有
.waitForElementVisible：等待元素可見，預設為 5 秒
.assert.title：驗證網頁頁籤名稱
.assert.visible：確認元素可見
.assert.containsText：驗證元素包含內容正確

.verify 和 .assert 都屬於 assert 的一部分，兩者的差異為
.verify 斷言失敗將被記錄，但測試執行將繼續
.assert 斷言失敗將被記錄，但測試標記為失敗；

BBD (Behaviour-Driven Development)

BBD 較常被使用的有以下四個
before(), after(), beforeEach() 和 afterEach()
before()：在所有測試執行之前執行
beforeEach()：在每一個測試執行前執行
after()：在所有測試執行完後執行
afterEach()：在每一個測試執行完後執行

Selectors

在 Nightwatch 中 element 的預設為 Css Selectors
但是如果想要用的是 XPath 而不是 Css 的話有兩種方式

1. 永久性切換
   在 Configuration 中設定 "use_xpath": true
2. 開關式切換
   使用 useXpath() 直接切換為 Xpath Selectors
   如果想要改回原本的 Css Selectors 只要再下 useCss()
3. 一次性切換
   直接在某個指令處使用 object 進行撰寫 內容分別是

   {
       selector: '//form/button[@type="submit"]',
       locateStrategy: 'xpath'
   }
   

執行測試

打開 package.json 的文件，編輯 scripts
測試的範圍由大到小

1. test
   使用 test 的方式執行所有測試文件
   "test": "nightwatch --test"
   執行 $ npm run test
2. file
   使用 path 的方式執行指定的單一文件
   "file": "nightwatch tests/<file path>"
   執行 $ npm run file
3. tag
   使用 tag 的方式執行測試，只要文件包含該 tag 皆會執行
   "tag": "nightwatch --tag ron"
   執行 $ npm run tag
4. testcase
   使用 testcase 的方式執行某一個文件中的單一測試
   "testcase": "nightwatch --test --testcase '<test case name>'"
   執行 $ npm run testcase
5. headless
   使用 headless 來取消顯示瀏覽器
   "headless": "nightwatch tests/demo.js --headless"
   執行 $npm run headless

執行的結果大概長成這樣

檢查報吿

在執行玩測試後，會產生出一份報告的資料夾 test_output
但是內容只有 xml 的 report 文件
如果像要有可視化的 html 文件
可以額外裝 nightwatch-html-reporter
$ npm install nightwatch-html-reporter

接著新增一份 setting.js 的檔案
用來指定存放資料夾

/* In nightwatch/setting.js */

const HtmlReporter = require('nightwatch-html-reporter');
const reporter = new HtmlReporter({
    openBrowser: true,
    reportsDirectory: __dirname + '/tests_output'
});
module.exports = {
    reporter: reporter.fn
};

並且在 Configuration 的文件指定一下 globals_path 的路徑
globals_path: "./setting.js",

接著在執行一次測試
就可以在 tests_output 資料夾中看到一份 report.html
大概長這個樣子

結尾

以上是這兩週的 Nightwatch.js 的介紹
如果有疑問或是有錯誤，還請各位大哥大姐提點。
小弟將繼續往下週邁進。 ─=≡Σ((( つ•̀ω•́)つ

參考文件:

Nightwatch.js | Node.js powered End-to-End testing framework
nightwatch-html-reporter - npm