Nightwatch101 #25:客製化斷言(Custom Assertions)

Nightwatch.js

Nightwatch 允許開發者定義自己的斷言指令,擴充 .assert.verify 命名空間。

♡(´∀`)人(´∀`)♡

本系列文章皆使用這個專案,可以拉下來玩玩;有什麼問題都可以提出 issue


如何使用客製化斷言?來 Step-by-Step 一步步完成。

Step 1:新增資料夾存放客製化斷言

每一個客製化斷言存放在單獨的檔案,檔名即指令名稱,並放在指定資料夾內。範例檔案結構如下所示,這個有一個專門放客製化斷言的資料夾 custom_assertions

nightwatch101
  ├── custom_assertions (放置客製化斷言)
  ├── custom_commands
  ├── page_objects
  ├── reports
  ├── screenshots
  ├── test/e2e
  ├── globals.js
  ├── nightwatch.conf.js
  ├── package.json
  └── README.md

Step 2:設定檔案路徑

Nightwatch Test Runner 必須要知道客製化斷言的所在位置,因此必須在 nightwatch.conf.jscustom_assertions_path 設定檔案路徑。

const config = {
  "src_folders": [
    "test/e2e"
  ],
  "custom_assertions_path": './custom_assertions',
  "selenium": {
    // 省略
  }
}

module.exports = config;

可參考完整範例

Step 3:開始撰寫客製化斷言

這是一個計算指定網頁元素數目的指令,然後判斷是否等於預期數量的範例。return this.api 用於後續能繼續使用鍊結呼叫的方式使用 browser 底下的其他 API。

exports.assertion = function (selector, count) {
  this.message = 'Testing if the element <' + selector + '> has count: ' + count;
  this.expected = count;
  this.pass = function (val) {
    return val === this.expected;
  }
  this.value = function (res) {
    return res.value;
  }
  this.command = function (cb) {
    return this.api.execute(function (selector) {
      return document.querySelectorAll(selector).length;
    }, [selector], function (res) {
      cb.call(this, res);
    }.bind(this));
  }
}

完整範例可參考這支檔案-count.js

Step 4:使用客製化斷言

接著來使用這個客製化斷言。

如下範例,打開特定網頁,檢視符合 selector table tbody tr 的元素是否為 0 個,最後結束 session。

module.exports = {
  'Demo Ruten SubCategory Page': browser => {
    browser
      .url('http://class.ruten.com.tw/category/sub00.php?c=00080001')
      .assert.count('table tbody tr', 0)
      .end()
  }
}

看完整程式碼

啟動單檔測試。

nightwatch test/e2e/class/testMainCategoryCustomAssertions.js

執行結果。

客製化斷言(Custom Assertions)

參考資料


下一篇來看客製化測試報告。


2018 鐵人賽網址


Nightwatch End-to-End Testing 端對端測試 自動化測試 Nightwatch101 Selenium 鐵人賽 2018鐵人賽 Nightwatch101 2018 iT 邦幫忙鐵人賽 系列文