跳至主要内容

Delta Reporter 报告器

wdio-delta-reporter-service 是一个第三方软件包,更多信息请参见GitHub | npm

一个 WebdriverIO 报告器插件,用于创建Delta 报告

Screenshot of Delta reporter

安装

最简单的方法是在您的 package.json 中将 @delta-reporter/wdio-delta-reporter-service 作为开发依赖项。

{
"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 命令将屏幕截图附加到报告中。参数为 typefiledescription

  • type:可以是 imgvideo
  • 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.sendDataToTestsendDataToTestRun,具体取决于您要显示此信息的位置

这些方法接受一个 JSON 对象作为参数

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 文档

欢迎!我如何帮助您?

WebdriverIO AI Copilot