Beautiful Test Reports with wdio-mochawesome-reporter

Good test reports are essential for debugging failures and communicating quality to your team. wdio-mochawesome-reporter bridges WebdriverIO with the beautiful Mochawesome reporting framework, giving you rich HTML reports with charts, screenshots, and detailed test metadata.

Why Mochawesome Reports?

Visual HTML Reports — Beautiful, interactive reports with pass/fail charts
Screenshot Embedding — Automatically embed screenshots captured during test execution
Parallel Support — Merge results from parallel test workers into a single report
CI/CD Friendly — JSON output that integrates with any pipeline
Multi-Version Support — Compatible with WDIO v4 through v7+

WDIO Version Compatibility

Reporter Version	WDIO Version
<= 2.0.1	v4
>= 3.0.0	v5+

Installation

npm install wdio-mochawesome-reporter --save-dev

Quick Start

Output to File

// wdio.conf.js
reporters: [
  'dot',
  ['mochawesome', {
    outputDir: './Results'
  }]
]

Custom File Names

reporters: [
  'dot',
  ['mochawesome', {
    outputDir: './Results',
    outputFileFormat: function(opts) {
      return \`results-\${opts.cid}.\${opts.capabilities}.json\`
    }
  }]
]

Handling Parallel Execution

With WDIO v5+, each parallel worker generates its own result file. For example, 2 test suites running in 2 browsers produce 4 separate JSON files. The reporter provides a merge utility to combine them:

Merge in wdio.conf.js

// wdio.conf.js
onComplete: function (exitCode, config, capabilities, results) {
  const mergeResults = require('wdio-mochawesome-reporter/mergeResults')
  mergeResults('./Results', 'results-*')
}

Merge via CLI

node mergeResults.js ./Results "wdio-mochawesome-*"

This outputs a single wdio-ma-merged.json file.

Reporter Options

Option	Default	Description
`includeScreenshots`	`false`	Embed screenshots in the report
`screenshotUseRelativePath`	`false`	Use relative paths for screenshots (useful for static hosting)
`outputDir`	-	Directory for result files
`stdout`	`false`	Output results to STDOUT

Generating the HTML Report

The reporter outputs JSON. To generate the beautiful HTML report, use the Mochawesome Report Generator:

# Install the generator
npm install mochawesome-report-generator --save-dev

# Generate the report
npx marge ./Results/wdio-ma-merged.json --reportTitle 'My Project Results'

Add it to your package.json scripts for convenience:

{
  "scripts": {
    "test": "wdio run wdio.conf.ts",
    "report": "marge ./Results/wdio-ma-merged.json --reportTitle 'Test Results'"
  }
}

CI Integration

# GitHub Actions
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
      - run: npm ci
      - run: npx wdio run wdio.conf.ts
      - run: npx marge ./Results/wdio-ma-merged.json
      - uses: actions/upload-artifact@v4
        with:
          name: test-report
          path: ./mochawesome-report/

For the full documentation, visit the GitHub repo or the npm page.

Need help setting up test reporting? Feel free to reach out or open an issue on GitHub.