時間軸報表

wdio-timeline-reporter 是一個第三方套件，如需更多資訊，請參閱 GitHub | npm

一站式 WebdriverIO 報表，用於測試結果的彙總視覺化，因為「眼見為憑」

為什麼

因為我們花費大量時間除錯失敗的測試，從終端輸出切換到檢視錯誤螢幕截圖等。此報表將您需要的所有典型資訊彙總到一份報告中。執行測試並擁有一個不錯的時間軸，您可以回顧該時間軸以進一步驗證一切是否正常。

功能包括：

與 Mocha 和 Jasmine 框架完美搭配。也適用於 Cucumber，但每個步驟都會被視為一個測試
測試結果的響亮摘要。
每個測試執行的詳細資訊，包括測試執行期間捕獲的所有螢幕截圖。
測試結果篩選。非常適合專注於失敗的測試
附加到測試的錯誤堆疊追蹤。
能夠在執行時向測試新增其他資訊。
無需後處理。在 wdio 測試程序完成後，將會產生一個靜態 html 報告檔案。
時間軸服務管理螢幕截圖的拍攝，包括調整影像大小。

範例 html 報告可以在這裡找到

有關如何安裝 WebdriverIO 的說明可以在這裡找到。

安裝

如需與 WEBDRIVERIO V4 相容的版本，請參閱此處

npm install --save wdio-timeline-reporter

相依性將會新增到您的 package.json

{
  "dependencies": {
    "wdio-timeline-reporter": "^5.1.0"
  }
}

使用方式

將 timeline 新增至您的 wdio 組態檔案中的 reporters 陣列。

同時從 wdio-timeline-reporter 匯入並新增 TimelineService。

服務是強制性的，才能合併報表並建立 html，因為報表現在會在 webdriverio 5 中針對每個執行器執行個體初始化。請參閱關於 webdriverio 的公開討論

TimelineService 還可以管理測試執行期間的螢幕截圖拍攝。您可以選擇縮減影像的大小和品質，並將影像以 base64 格式嵌入到報告中。這些可以使用報表選項進行設定。

// wdio.conf.js
const { TimelineService } = require('wdio-timeline-reporter/timeline-service');
exports.config = {
  // ...
  reporters: [['timeline', { outputDir: './desired_location' }]],
  // ...
  services: [[TimelineService]]
};

報表選項

如果您希望覆寫預設報表組態，請如下所示，將 reporterOptions 物件常值新增到 reporters 下的 timeline 陣列。

索引	說明
1.	將在其中建立 html 檔案和螢幕截圖的目錄。強制選項
2.	報告 html 檔案的名稱。預設值為 `timeline-report.html`
3.	將影像以 base64 格式嵌入到 html 檔案中。預設值為 `false`
4.	影像處理的物件選項
5.	設定 JPEG 品質。只有在 `resize` 選項為 `true` 時才相關。值越小，影像大小和品質越小。預設值為 `70`。允許的最大值為 `100`
6.	調整影像大小。預設值為 `false`
7.	減少總像素數的值。只有在 `resize` 選項為 true 時才相關。預設為 `1` 有效值 `1 - 5`
8.	拍攝螢幕截圖的頻率。支援的值為 `on:error`、`before:click`、`none`。預設為 `none`。`before:click` 是建立測試中應用程式螢幕截圖時間軸的絕佳選項。

將其他資訊新增至測試內容

可以使用 addContext 靜態方法向測試新增其他資訊。這對於新增重要資訊可能會很有用，例如，在測試執行期間建立的使用者（具有動態使用者名稱），這有助於除錯失敗的測試

基本使用方式

TimelineReporter.addContext 靜態方法會接受字串參數或具有兩個屬性 title 和 value 的物件常值，例如

{ title: 'sessionId', value: 'b59bb9ec-ab15-475e-9ce6-de8a14ca0cd3' }

value 也可以是連結

Mocha 範例

const TimelineReporter = require('wdio-timeline-reporter').default;

describe('Suite', function() {
  it('Test', function() {
    // object literal parameter
    TimelineReporter.addContext({
      title: 'Test User',
      value: 'user id created during the test'
    });

    // value as anchor tag
    TimelineReporter.addContext({
      title: 'Dynamic link',
      value: '<a href="">Some important link related to test</a>'
    });

    // string parameter
    TimelineReporter.addContext('This test might be flaky');
  });
});

致謝

非常感謝 wdio-json-reporter 的作者和維護人員，他們的 v5 解決方案幫助加速了我的工作

為什麼​

功能包括：​

安裝​

使用方式​

報表選項​

將其他資訊新增至測試內容​

基本使用方式​

Mocha 範例​

致謝​

為什麼