跳至主要內容

CucumberJS JSON 報告器

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

一個 WDIO 報告器，為 WebdriverIO v8 及更高版本建立 CucumberJS JSON 檔案。

NPM

它的用途是什麼？​

此報告器將為每個正在測試的功能產生一個Cucumber JSON 檔案。JSON 檔案可以與您想要使用的任何報告一起使用，例如multiple-cucumber-html-reporter。

它還會將關於執行實例的中繼資料新增到功能檔案中，最後但並非最不重要的一點是，它會讓您有機會將附件新增到 JSON 輸出中。

安裝​

最簡單的方法是將 wdio-cucumberjs-json-reporter 作為您 package.json 中的 devDependency。

{
  "devDependencies": {
    "wdio-cucumberjs-json-reporter": "^5.0.0"
  }
}

您可以簡單地透過以下方式來進行：

npm install wdio-cucumberjs-json-reporter --save-dev

這樣它會自動新增到您的 package.json

有關如何安裝 WebdriverIO 的說明，請參閱此處。

設定​

在您的 wdio.conf.js 檔案中設定輸出目錄和語言

export const config = {
    // ...
    reporters: [
        // Like this with the default options, see the options below
        'cucumberjs-json',

        // OR like this if you want to set the folder and the language
        [ 'cucumberjs-json', {
                jsonFolder: '.tmp/new/',
                language: 'en',
            },
        ],
    ],
  // ...
}

請勿使用兩種方式新增報告器，這只是一個範例！

選項​

jsonFolder​

  • 類型：String
  • 強制：否
  • 預設值：.tmp/json/

此報告產生的 JSON 檔案將儲存到的目錄，相對於腳本啟動的位置。

注意：如果您從命令列使用 npm 腳本，例如 npm run test，則 jsonFolder 將相對於執行腳本的路徑。從您專案的根目錄執行它也會在您專案的根目錄中建立 jsonFolder。

language​

  • 類型：String
  • 強制：否
  • 預設值：en

撰寫 Gherkin 情境的語言（預設為英文）。語言代碼及其關鍵字的清單可以在此處找到。

disableHooks​

  • 類型：boolean
  • 強制：否
  • 預設值：false

如果此屬性設定為 true，則 Hook 詳細資訊將不會是產生的一部分。

reportFilePerRetry​

  • 類型：boolean
  • 強制：否
  • 預設值：true

當重新嘗試規格時，如果此屬性設定為 false，則報告將附加到先前嘗試的現有報告檔案中。

範例：['cucumberjs-json', { jsonFolder: '.tmp/new/', language: 'en', disableHooks:true}]

中繼資料​

注意
如果您使用的是 WebdriverIO V6，則目前不支援此功能，WebdriverIO V5 仍然支援此功能，而 WebdriverIO V7 再次支援此功能

如前所述，此報告可以自動儲存執行該功能的目前機器/裝置的中繼資料。

若要自訂此項，您可以透過將下列物件新增到您的 capabilities 來新增

// Example wdio.conf.js
export const config = {
    //..
    capabilities: [
        {
            browserName: 'chrome',
            // Add this
            'cjson:metadata': {
                // For a browser
                browser: {
                    name: 'chrome',
                    version: '58',
                },
                // for an app
                app: {
                  name: 'name.of.app.ipa',
                  version: '1.2.3',
                },
                device: 'MacBook Pro 15',
                platform: {
                    name: 'OSX',
                    version: '10.12.6'
                }
            },
        },
    ],
};

中繼資料物件需要具有 cjson 前綴，否則將無法運作！

中繼資料值​

metadata.app.name​

  • 類型：string

例如：應用程式的名稱。

metadata.app.version​

  • 類型：string

例如：應用程式的版本。

metadata.browser.name​

  • 類型：string
  • 可能的值： internet explorer | edge | chrome | firefox | safari

metadata.browser.version​

  • 類型：string

例如：瀏覽器的版本，可以手動新增，也可以在測試執行期間擷取，以取得確切的版本號碼。

metadata.device​

  • 類型：string

例如：代表裝置類型的名稱。例如，如果您在虛擬機器上執行它，您可以將它放在這裡 虛擬機器，或是行動裝置的名稱，例如 iPhone 7 Plus。

metadata.platform.name​

  • 類型：string
  • 可能的值： windows | osx | linux | ubuntu | android | ios

metadata.platform.version​

  • 類型：string

例如：平台的版本

如果您未在中繼資料中提供 browser 物件，則此模組會自動為您判斷。它始終會使用它可以判定的最新值來覆寫它。

如果您未提供 device 和/或 platform 物件，則會將預設值設為 not known

如果您未提供 browser.name 或 browser.version，則模組會嘗試自動判斷此資訊。

附件​

您可以選擇將資料附加到所有這些 Hook/步驟中的 JSON 檔案中

  • Before(All)
  • After(All)
  • Given
  • When
  • Then
  • And

您唯一需要提供的是步驟檔案中的下列程式碼。

針對 ES 模組 (ESM)

import cucumberJson from 'wdio-cucumberjs-json-reporter';

// Attach a string (if no type is provided it will automatically default to `text/plain`
cucumberJson.attach('just a string');
cucumberJson.attach('just a second string', 'text/plain');

// Attach JSON
cucumberJson.attach({"json-string": true}, 'application/json');

// Attach a screenshot in a before hook
cucumberJson.attach(await browser.takeScreenshot(), 'image/png');

針對 CommonJS (CJS)

const { attach } = require("wdio-cucumberjs-json-reporter");

// Attach a string (if no type is provided it will automatically default to `text/plain`
attach('just a string');
attach('just a second string', 'text/plain');

// Attach JSON
attach({"json-string": true}, 'application/json');

// Attach a screenshot in a before hook
attach(await browser.takeScreenshot(), 'image/png');

搭配 multiple-cucumber-html-reporter 使用​

先前的 WebdriverIO V4 模組 wdio-multiple-cucumber-html-reporter 與 multiple-cucumber-html-reporter 模組具有內建連線。此報告器的情況並非如此，因為 WebdriverIO V5 的新設定基於一個不允許我使用 onPrepare 和 onComplete Hook 的執行個體。

如果您仍然想要使用 multiple-cucumber-html-reporter 模組，您可以將下列程式碼新增到您的設定檔案中。

  • 使用下列程式碼安裝模組

    npm install multiple-cucumber-html-reporter --save-dev

  • 將此程式碼新增到您的設定檔案中

    import fs from 'node:fs/promises'
    // Import the module
    import { generate } from 'multiple-cucumber-html-reporter'

    // Example wdio.conf.js
    export const config = {
      //..

      // =====
      // Hooks
      // =====
      /**
       * Gets executed once before all workers get launched.
       */
      onPrepare: () => {
        // Remove the `.tmp/` folder that holds the json and report files
        return fs.rm('.tmp/', { recursive: true });
      },
      /**
       * Gets executed after all workers got shut down and the process is about to exit.
       */
      onComplete: () => {
        // Generate the report when it all tests are done
        generate({
          // Required
          // This part needs to be the same path where you store the JSON files
          // default = '.tmp/json/'
          jsonDir: '.tmp/json/',
          reportPath: '.tmp/report/',
          // for more options see https://github.com/wswebcreation/multiple-cucumber-html-reporter#options
        });
      }
    }

較舊的 WebdriverIO 版本​

此模組只能與 WebdriverIO V8+ 搭配使用！
對於 V6，請檢查此處的文件，並使用 2.0.4 版
對於 V5，請檢查此處的文件，並使用 1.3.0 版

此模組並非取代 wdio-multiple-cucumber-html-reporter。該模組僅支援 WEBDRIVERIO V4，而且也會建立報告。此模組僅建立 JSON，不產生報告！！

歡迎！我能如何幫您？

WebdriverIO AI Copilot