Delta Reporter レポーター

wdio-delta-reporter-service はサードパーティのパッケージです。詳細については、GitHub | npm を参照してください。

Delta レポートを作成する WebdriverIO レポータープラグイン

Screenshot of Delta reporter

インストール

最も簡単な方法は、@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 reporter 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 フックで 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);
    }
  }

以下は、このプラグインとビデオレポーターを一緒に使用して、失敗したテストのスクリーンショットとビデオを Delta Reporter に表示するために必要なすべての要素を含む wdio 設定ファイルの例です。

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 をリッスンしています。主なケースは2つあります。

ローカル実行: 何もする必要はありません。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} を先頭に追加してテストを実行する必要があります。初期化は1回だけ実行されるため、同じビルドで複数のテストタイプ (たとえば、UI テスト、API テスト、ユニットテスト) を実行している場合、これらのテストは Delta Reporter の1つの「起動」の下に収集されます。

以下は、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 ドキュメントを確認してください。

インストール​

設定​

スクリーンショットとビデオを追加する​

使用方法​

追加データを Delta Reporter に送信する​

インストール

設定

スクリーンショットとビデオを追加する

使用方法

追加データを Delta Reporter に送信する