我正在使用带有黄瓜（js）的量角器。我想像 Cucumber-JVM 版本一样生成报告文件。我在 Jasmine 中使用 Protractor 时看到过示例，但在 Cucumber 中几乎没有。
使用此配置时如何生成报告？
最终目标是在 Jenkins 或其他任何地方发布此报告（如果它们是直接以 HTML 生成的）。
谢谢！
问问题
22516 次
4 回答
12
使用最新版本的量角器（从 1.5.0 版开始），您现在可以生成 JSON 报告。当我大约 7 个月前问这个问题时，该功能不存在。
您需要做的就是将其添加到您的 protractor-config.json 文件中。
resultJsonOutputFile: 'report.json'
其中 report.json 是输出文件的位置。
一旦你有了它，你可以使用 protractor-cucumber-junit ( https://www.npmjs.com/package/protractor-cucumber-junit ), cucumberjs-junitxml ( https://github.com/sonyschan/cucumberjs-junitxml ) 或类似的东西将 JSON 文件转换为 Jenkins 可以显示的有效 XML 文件。
$ cat report.json | ./node_modules/.bin/cucumber-junit > report.xml
希望这可以帮助。
于 2015-02-19T23:57:11.013 回答
8
您可以使用 cucumber-html-report 将 json 报告转换为 HTML。将 cucumber-html-report 添加到您的项目中
$ npm install cucumber-html-report --save-dev
如果您使用量角器，您可以将以下代码添加到 hooks.js 以
- 在每个失败的场景后拍摄浏览器屏幕截图，以附加到 After-hook 中的 json 报告。
- 即使您的黄瓜 opts 格式属性显示“漂亮”，也将测试结果写入 json 文件。
- 将 json 报告转换为 HTML，包括失败场景的屏幕截图。
var outputDir = 'someDir';
this.After(function(scenario, callback) {
if (scenario.isFailed()) {
browser.takeScreenshot().then(function(base64png) {
var decodedImage = new Buffer(base64png, 'base64').toString('binary');
scenario.attach(decodedImage, 'image/png');
callback();
}, function(err) {
callback(err);
});
} else {
callback();
}
});
var createHtmlReport = function(sourceJson) {
var CucumberHtmlReport = require('cucumber-html-report');
var report = new CucumberHtmlReport({
source: sourceJson, // source json
dest: outputDir // target directory (will create if not exists)
});
report.createReport();
};
var JsonFormatter = Cucumber.Listener.JsonFormatter();
JsonFormatter.log = function(string) {
if (!fs.existsSync(outputDir)) {
fs.mkdirSync(outputDir);
}
var targetJson = outputDir + 'cucumber_report.json';
fs.writeFile(targetJson, string, function(err) {
if (err) {
console.log('Failed to save cucumber test results to json file.');
console.log(err);
} else {
createHtmlReport(targetJson);
}
});
};
this.registerListener(JsonFormatter);于 2015-11-16T15:54:53.233 回答
3
试试下面对我有用的代码：
您可以使用以下插件：
https://www.npmjs.com/package/cucumber-html-reporter
在 package.json 中添加以下依赖项，如下所示：
"cucumber-html-reporter": "^5.0.0"
点击命令如下：
npm install
在您的 cucumberconfig.ts 中添加以下导入
import * as reporter from "cucumber-html-reporter"
现在在 cucumberconfig.ts 中添加以下键
onComplete: () => {
//var reporter = require('cucumber-html-reporter');
var options = {
theme: 'bootstrap',
jsonFile: './cucumberreport.json',
output: './cucumberreportsss.html',
reportSuiteAsScenarios: true,
launchReport: true,
metadata: {
"App Version":"0.3.2",
"Test Environment": "STAGING",
"Browser": "Chrome 54.0.2840.98",
"Platform": "Windows 10",
"Parallel": "Scenarios",
"Executed": "Remote"
}
};
reporter.generate(options);
},
完整的文件如下所示：
import {Config} from 'protractor'
import * as reporter from "cucumber-html-reporter"
export let config: Config = {
directConnect:true,
// set to "custom" instead of cucumber.
framework: 'custom',
// path relative to the current config file
frameworkPath: require.resolve('protractor-cucumber-framework'),
seleniumAddress: 'http://localhost:4444/wd/hub',
// To run script without cucumber use below
//specs: ['typescriptscript.js'],
onComplete: () => {
//var reporter = require('cucumber-html-reporter');
var options = {
theme: 'bootstrap',
jsonFile: './cucumberreport.json',
output: './cucumberreportsss.html',
reportSuiteAsScenarios: true,
launchReport: true,
metadata: {
"App Version":"0.3.2",
"Test Environment": "STAGING",
"Browser": "Chrome 54.0.2840.98",
"Platform": "Windows 10",
"Parallel": "Scenarios",
"Executed": "Remote"
}
};
reporter.generate(options);
},
capabilities: {
'browserName': 'firefox',
'marionette': true,
//shardTestFiles: true,
},
SELENIUM_PROMISE_MANAGER: false,
specs: [
'../Features/*.feature' // accepts a glob
],
// Run feature file for cucumber use below
cucumberOpts: {
// require step definitions
require: [
'./stepDefination/*.js' // accepts a glob
],
format: 'json:cucumberreport.json',
},
jasmineNodeOpts: {
showColors: true,
},
};
要附加失败的屏幕截图，请在钩子中使用下面的代码
After(function(scenarioResult) {
let self = this;
if (scenarioResult.result.status === Status.FAILED) {
return browser.takeScreenshot()
.then(function (screenshot) {
const decodedImage = new Buffer(screenshot.replace(/^data:image\/png;base64,/, ''), 'base64');
self.attach(decodedImage, 'image/png');
});
}
});
于 2019-04-25T22:01:19.193 回答
1
当以其他答案指示的方式使用 cucumber-html-report 时，您可能会在 Cucumber/Protractor/Cucumber-html-report 的较新版本上遇到问题。
症状是 index.html 已创建，但在测试运行结束时为空。
这是因为 cucumber-html-report 正在使用异步文件写入，并且量角器没有等待它完成。（我们使用的代码与答案中的代码有着惊人的相似之处。）
这是一个工作设置：
在 hooks.js 中，屏幕截图部分与其他答案相同：
// Generate a screenshot at the end of each scenario (if failed; configurable to always)
cuke.After(function(scenario, done) {
browser.getProcessedConfig().then(config => {
if (!config.screenshots.onErrorOnly || scenario.isFailed()) {
return browser.driver.takeScreenshot().then(function(png) {
let decodedImage = new Buffer(png.replace(/^data:image\/(png|gif|jpeg);base64,/, ''), 'base64');
scenario.attach(decodedImage, 'image/png');
done();
});
} else {
done();
}
});
});
在量角器.conf.js 中：
var cucumberReportDirectory = 'protractor-report';
var jsonReportFile = cucumberReportDirectory + '/cucumber_report.json';
exports.config = {
cucumberOpts: {
format: 'json:./' + jsonReportFile,
},
onCleanUp: function () {
var CucumberHtmlReport = require('cucumber-html-report');
return CucumberHtmlReport.create({
source: jsonReportFile,
dest: cucumberReportDirectory,
title: 'OptiRoute - Protractor Test Run',
component: new Date().toString()
}).then(console.log).catch(console.log);
},
ignoreUncaughtExceptions: true,
untrackOutstandingTimeouts: true
};
这只是与 cucumber-html-report 直接相关的配置，剩下的就是老生常谈了。
在运行测试之前确保报告目录存在。
通过将报告创建放在此处而不是将其附加为 Cucumber 侦听器，Cucumber 将等待异步操作完成后再退出。
感谢 Ola 的原始答案，我发现了异步问题（困难的方式），并且认为当他们发现相同的问题时我可以节省时间。
于 2017-06-02T17:21:15.457 回答