使用Protractor 5.2.2+Cucumber 3.2.0生成HTML报告的步骤指导

Hey there! Let's walk through exactly how to set up HTML report generation after your Cucumber feature files finish running. I've worked with this specific version combo before, so here's a step-by-step guide that should get you up and running smoothly:

Step 1: Install Required Dependencies #

First, you'll need the cucumber-html-reporter package to convert Cucumber's JSON output into a readable HTML report. Since we're using Cucumber 3.2.0, stick with a compatible version of the reporter (v5.x works well here):

npm install cucumber-html-reporter@5.0.0 --save-dev

Step 2: Update Protractor Configuration #

Modify your protractor.conf.js file to tell Cucumber to generate a JSON report after test execution. Add the format option under cucumberOpts, and specify a path to save the JSON file:

exports.config = {
  // ... other existing configs ...
  framework: 'custom',
  frameworkPath: require.resolve('protractor-cucumber-framework'),
  cucumberOpts: {
    // ... your existing options (like features, glue) ...
    format: 'json:reports/cucumber_report.json' // This generates the JSON report
  }
};

Note: The reports directory will hold our output files. You can create it manually, or we'll add code to auto-create it in the next step.

Step 3: Create a Report Generation Script #

Make a new file in your project root called generate-report.js. This script will take the JSON report and convert it to a styled HTML report:

const reporter = require('cucumber-html-reporter');
const fs = require('fs');
const path = require('path');

// Auto-create reports directory if it doesn't exist
const reportsDir = path.join(__dirname, 'reports');
if (!fs.existsSync(reportsDir)) {
  fs.mkdirSync(reportsDir);
}

const options = {
  theme: 'bootstrap', // Choose a theme (bootstrap, hierarchy, foundation, simple)
  jsonFile: 'reports/cucumber_report.json',
  output: 'reports/cucumber_report.html',
  reportSuiteAsScenarios: true,
  launchReport: false, // Set to true if you want the report to open automatically after generation
  metadata: {
    "App Version": "1.0.0",
    "Test Environment": "Staging",
    "Browser": "Chrome 114.0",
    "Platform": "Windows 10",
    "Executed": "Local"
  }
};

reporter.generate(options);

You can tweak the theme and metadata fields to match your project's needs.

Step 4: Update Package Scripts #

Edit your package.json to add scripts that run your tests and generate the report in sequence. Add these lines to the scripts section:

{
  "scripts": {
    "test": "protractor protractor.conf.js && node generate-report.js",
    "generate-report": "node generate-report.js"
  }
}

• Run npm run test to execute your tests AND generate the HTML report afterwards.
• If you already ran tests and just want to regenerate the report, use npm run generate-report.

Step 5: Run and Verify #

Execute npm run test in your terminal. Once the tests finish, check the reports folder—you'll find both the JSON report and the styled cucumber_report.html file. Open the HTML file in your browser to see a detailed breakdown of your test results, including passed/failed scenarios, step details, and metadata.

Quick Troubleshooting Tips #

• If the reports directory isn't created automatically, double-check the path in generate-report.js.
• If the HTML report is empty, make sure the JSON report was generated correctly (check reports/cucumber_report.json exists and has content).
• If you run into version conflicts, ensure all dependencies are compatible: Protractor 5.2.2 works well with protractor-cucumber-framework v6.x (you can install it with npm install protractor-cucumber-framework@6.2.1 --save-dev if you don't have it already).

内容的提问来源于stack exchange，提问作者Devleena