使用WebdriverIO+Cucumber时Allure报告分类栏为空等问题求助

Hey there! Let's work through those two Allure report problems you're hitting. I've dealt with similar headaches before, so here's how to get things sorted:

1. Empty Categories Tab #

Allure doesn't populate the Categories tab out of the box—you need to define custom grouping rules first. Here's what to do:

• Create an allure-categories.json file in your project root. This file tells Allure how to organize your test results. Example content:

  [
      {
          "name": "Failed Tests",
          "matchedStatuses": ["failed"]
      },
      {
          "name": "Skipped Tests",
          "matchedStatuses": ["skipped"]
      },
      {
          "name": "Broken Tests",
          "matchedStatuses": ["broken"]
      },
      {
          "name": "Timeout Errors",
          "messageRegex": ".*timeout exceeded.*"
      }
  ]
  

• Link this file to your WebdriverIO config (wdio.conf.js). Update the Allure reporter section to include the categories path:

  reporters: [
      ['allure', {
          outputDir: 'allure-results',
          categories: './allure-categories.json', // Add this line
          // Keep your other existing Allure options here
      }]
  ]
  

After running your tests and regenerating the report, the Categories tab should show your defined groups.

2. Suites Section Only Shows Request/Response (No Steps or Screenshots) #

This usually happens because WebdriverIO isn't configured to capture Cucumber steps or screenshots in Allure. Let's fix that:

Step 1: Enable Cucumber Step Reporting #

Update your wdio.conf.js Allure reporter settings to explicitly enable Cucumber step tracking and disable any flags that block step reporting:

reporters: [
    ['allure', {
        outputDir: 'allure-results',
        disableWebdriverStepsReporting: false, // Critical: don't disable Webdriver steps
        disableWebdriverScreenshotsReporting: false,
        useCucumberStepReporter: true, // Enable Cucumber-specific step reporting
    }]
]

Step 2: Add Manual Steps (Optional but Recommended) #

For more control over what shows up in the report, you can add custom steps directly in your Cucumber definitions using the Allure reporter API:

const { Given, When, Then } = require('@wdio/cucumber-framework');
const allureReporter = require('@wdio/allure-reporter').default;

Given('I navigate to the homepage', async () => {
    allureReporter.addStep('Launching browser and navigating to homepage', 'info');
    await browser.url('/');
    // Add a screenshot of the homepage
    const homepageScreenshot = await browser.takeScreenshot();
    allureReporter.addAttachment('Homepage', homepageScreenshot, 'image/png');
});

Step 3: Auto-Capture Screenshots on Failed Steps #

Add a hook in wdio.conf.js to automatically take screenshots whenever a step fails, so they show up in the report:

afterStep: async function (step, scenario, { error, passed }) {
    if (!passed) {
        const failureScreenshot = await browser.takeScreenshot();
        allureReporter.addAttachment(`Failed Step: ${step.text}`, failureScreenshot, 'image/png');
    }
}

Step 4: Regenerate the Report #

After updating your config and test code, re-run your tests, then regenerate the Allure report with these commands:

allure generate allure-results --clean
allure open

Your Suites section should now display all Cucumber steps, along with any screenshots you added (manual or auto-captured).

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