iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 26
1

Nightwatch.js

由於在 nightwatch.conf.js"output_folder": "./reports", 設定了測試報告的路徑,因此在專案目錄底下可看到 reports 的資料夾,裡面的 JUnit XML 測試報告檔案即是按 group 所放置,像是這樣...

<?xml version="1.0" encoding="UTF-8" ?>
<testsuites errors="0" failures="0" tests="1">
  <testsuite name="class.testMainCategory" errors="0" failures="0" hostname="" id="" package="class" skipped="0" tests="1" time="20.28" timestamp="Fri, 01 Dec 2017 12:06:52 GMT">
    <testcase name="Demo Ruten MainCategory Page" classname="class.testMainCategory" time="20.28" assertions="0"></testcase>
  </testsuite>
</testsuites>

點此看範例檔案。

這樣的格式難以閱讀,因此我們會希望客製化測試報告(Custom Reporter),例如:產生美美的網頁。

這裡選用 nightwatch-html-reporter

Step 1:安裝

npm install nightwatch-html-reporter -g

Step 2:用法

選擇 1:使用 Command Line

執行指令如下,跑一次測試程式,解析 Nightwatch 所產生的 XML 檔案,最後產生客製化測試報告。

nightwatch test/e2e/
nightwatch-html-reporter -d ./reports

跑完以後會在資料夾 reports 看到 generatedReport.html 這個檔案,打開來會看到如下圖般展示目前的測試結果。

選擇 2:使用 Nightwatch --reporter option

nightwatch/html-reporter.js 設定如下。

var HtmlReporter = require('nightwatch-html-reporter');
var reporter = new HtmlReporter({
  openBrowser: true,
  reportsDirectory: __dirname + '/reports'
});

module.exports = {
  reporter: reporter.fn
};

執行指令如下。

nightwatch --reporter ./html-reporter.js

選擇 3:Nightwatch 內建的報表產生器

nightwatch.config.jsreporter 設定測試報告由 HtmlReporter 來產生。

globals.js 中放入以下程式碼。

var HtmlReporter = require('nightwatch-html-reporter');
var reporter = new HtmlReporter({
  openBrowser: true,
  reportsDirectory: __dirname + '/reports/'
});

module.exports = {
  write : function(results, options, done) {
    reporter.fn(results, done);
  }
};

nightwatch.config.js 中設定如下。

const config = {
  "src_folders": [
    "test/e2e"
  ],
  "output_folder": "./reports", // 測試報告輸出位置
  reporter: globals.reporter // 指定測試報告由 HtmlReporter 產生
}
module.exports = config;

跑完測試即可看到測試結果。

HtmlReporter 可設定的選項

  • openBrowser:跑完測試後所產生的報告是否使用瀏覽器打開,資料型別是布林值。
  • reportsDirectory:測試報告的所在路徑。
  • reportFilename:測試報告的檔名,預設是 generatedReport.html。
  • uniqueFilename:測試報告是否要加上 timestamp,資料型別是布林值。
  • separateReportPerSuite:測試報告是否要加上 test suite 的名稱,資料型別是布林值。
  • themeName:測試報告所使用的主題名稱。可設定為 default、default-gray、compact、compact-gray、cover 和 outlook。
  • hideSuccess:是否隱藏成功的測試案例,測試報告只顯示錯誤的部份,資料型別是布林值。
  • uniqueFilename:是否在測試報告的檔案加上 timestamp,資料型別是布林值。
  • relativeScreenshots:是否將截圖的路徑設為相對路徑,資料型別是布林值。

Step 4:CLI usage

格式如下,相關資料可參考這裡

nightwatch-html-reporter -d <reports-directory> [--theme (default:'default')] [--output (default:generatedReport.html)]

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

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

下一篇來看個進階測試範例。


網誌版


上一篇
Nightwatch101 #25:客製化斷言(Custom Assertions)
下一篇
Nightwatch101 #27:進階測試範例
系列文
Nightwatch101:使用 Nightwatch 實現 End-to-End Testing30

尚未有邦友留言

立即登入留言