Delta Reporter 報表

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

一個 WebdriverIO 報表插件，用於建立 Delta 報表

安裝

最簡單的方法是將 @delta-reporter/wdio-delta-reporter-service 保留在您的 package.json 中作為 devDependency。

{
  "devDependencies": {
    "@delta-reporter/wdio-delta-reporter-service": "^1.1.9",
  }
}

您可以簡單地透過以下方式執行此操作

npm i @delta-reporter/wdio-delta-reporter-service

組態設定

Delta 報表 WebdriverIO 插件包含 WebdriverIO 服務和 報表的混合，因此需要在組態檔中宣告為報表和服務。

const DeltaReporter = require('@delta-reporter/wdio-delta-reporter-service/lib/src/reporter');
const DeltaService = require("@delta-reporter/wdio-delta-reporter-service");

let delta_config = {
  enabled: true,
  host: 'delta_host',
  project: 'Project Name',
  testType: 'Test Type'
};

exports.config = {
  // ...
  reporters: [
    [DeltaReporter, delta_config]
  ],
  // ...
  services: [new DeltaService(delta_config)],
  // ...
}

新增螢幕截圖和影片

可以使用 wdio 組態檔中 afterTest hook 的 sendFileToTest 命令將螢幕截圖附加到報表。參數為 type、file 和 description

• type：可以是 img 或 video
• file：要上傳的檔案路徑
• description：可選值，將顯示在 Delta Reporter 中的媒體容器中

如上面的範例所示，當呼叫此函式且測試失敗時，螢幕截圖影像將會附加到 Delta 報表。

 afterTest(test) {
    if (test.passed === false) {
      const file_name = 'screenshot.png';
      const outputFile = path.join(__dirname, file_name);

      browser.saveScreenshot(outputFile);
      browser.sendFileToTest('img', outputFile);
    }
  }

以下是在 wdio 組態檔中使用此插件以及 影片報表所需的所有部分的範例，以便 Delta Reporter 顯示失敗測試的螢幕截圖和影片

var path = require('path');
const fs = require('fs');
const video = require('wdio-video-reporter');
const DeltaReporter = require('@delta-reporter/wdio-delta-reporter-service/lib/src/reporter');
const DeltaService = require("@delta-reporter/wdio-delta-reporter-service");

// ...

function getLatestFile({ directory, extension }, callback) {
  fs.readdir(directory, (_, dirlist) => {
    const latest = dirlist
      .map(_path => ({ stat: fs.lstatSync(path.join(directory, _path)), dir: _path }))
      .filter(_path => _path.stat.isFile())
      .filter(_path => (extension ? _path.dir.endsWith(`.${extension}`) : 1))
      .sort((a, b) => b.stat.mtime - a.stat.mtime)
      .map(_path => _path.dir);
    callback(directory + '/' + latest[0]);
  });
}

let delta_config = {
  enabled: true,
  host: 'delta_host', // put your Delta Core url here
  project: 'Project Name', // Name of your project
  testType: 'Test Type' // eg., End to End, E2E, Frontend Acceptance Tests
};

// ...

exports.config = {
  // ...
  reporters: [
    [DeltaReporter, delta_config]
  ],
  // ...
  services: [new DeltaService(delta_config)],


  // ...


  afterTest(test) {
    if (test.passed === false) {
      const file_name = 'screenshot.png';
      const outputFile = path.join(__dirname, file_name);

      browser.saveScreenshot(outputFile);
      browser.sendFileToTest('img', outputFile);

      getLatestFile({ directory: browser.options.outputDir + '/_results_', extension: 'mp4' }, (filename = null) => {
        browser.sendFileToTest('video', filename, 'Video captured during test execution');
      });
    }
  }

  // ...

}

使用方式

對於每個測試執行，Delta 插件都在偵聽 DELTA_LAUNCH_ID。主要有兩種情況

• 本機執行：無需執行任何操作，您只需執行 wdio 命令 (./node_modules/.bin/wdio ./wdio.conf.js)，DELTA_LAUNCH_ID 將會自動為您產生，因此您的測試結果會即時顯示在 Delta Reporter 中。

• CI 執行：如果這是您的測試工作，則必須將 DELTA_LAUNCH_ID 定義為參數。然後在您的階段中，您需要透過呼叫 /api/v1/launch 端點來初始化它，然後執行以 DELTA_LAUNCH_ID=${DELTA_LAUNCH_ID} 為前導的測試。初始化完成一次，因此當您在同一個組建中執行多個測試類型（例如，UI 測試、API 測試、單元測試）時，這些測試會收集在 Delta Reporter 上的一個「啟動」下。

以下是 Jenkins 工作的組態檔的程式碼範例

// ...
  parameters {
      string defaultValue: '', description: 'Launch ID sent by a pipeline, leave it blank', name: 'DELTA_LAUNCH_ID', trim: false
  }

// ...

  stage('Run WDIO tests') {
    environment {
      DELTA_LAUNCH_ID = ""
    }
    steps {
      container('jenkins-node-worker') {
        script {
          try {
            DELTA_LAUNCH_ID=sh(script: "curl -s --header \"Content-Type: application/json\" --request POST --data '{\"name\": \"${JOB_NAME} | ${BUILD_NUMBER} | Wdio Tests\", \"project\": \"Your project\"}' https://delta-core-url/api/v1/launch | python -c 'import sys, json; print(json.load(sys.stdin)[\"id\"])';", returnStdout: true)
          } catch (Exception e) {
              echo 'Couldn\'t start launch on Delta Reporter: ' + e
          }
          
          sh "DELTA_LAUNCH_ID=${DELTA_LAUNCH_ID} TEST_TYPE='Frontend Acceptance Tests' ./node_modules/.bin/wdio ./wdio.conf.js"
        }
      }
    }  
  }

傳送額外資料至 Delta Reporter

可以使用 SmartLinks 功能傳送要顯示在 Delta Reporter 中的自訂資料。

為此，請使用命令 browser.sendDataToTest 或 sendDataToTestRun，具體取決於您要顯示此資訊的位置

這些方法接受 jsonify 物件作為引數

與 Spectre 整合的範例

  beforeSuite() {
    try {
      let spectreTestRunURL = fs.readFileSync('./.spectre_test_run_url.json');
      let test_run_payload = {
        spectre_test_run_url: spectreTestRunURL.toString()
      };
      browser.sendDataToTestRun(test_run_payload);
    } catch {
      log.info('No Spectre URL found');
    }
  }

然後在 Delta Reporter 上，可以為測試執行建立具有 {spectre_test_run_url} 的 SmartLink

如需更多有關 Smart Links 的資訊，請查看 Delta Reporter 文件