iT邦幫忙

0

鼠年全馬鐵人挑戰 WEEK 16:Nightwatch.js (下)

            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.jsonnightwatch.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


尚未有邦友留言

立即登入留言