ctrf-html-reporter

Report test result of CTRF (Common Test Report Format) as HTML.

About

ctrf-html-reporter is a tool that converts test reports in CTRF (Common Test Report Format) format into beautiful HTML reports. It uses VitePress to generate interactive and easy-to-read test reports.

see movie: https://github.com/user-attachments/assets/57e51af0-ff40-4dc7-90c9-848d3d24f806

Features

• Convert CTRF format test reports to HTML
• Beautiful and readable report UI
• Visualization and insights of test results
• Simple command-line interface

Usage

Using with npx

You can also run it directly without installation:

npx ctrf-html-reporter path/to/report.ctrf.json

Basic Usage

Generate an HTML report from a CTRF report file:

ctrf-html-reporter path/to/report.ctrf.json

By default, the report is generated in the .ctrf/report directory.

Custom Output Path

To specify the output destination:

ctrf-html-reporter path/to/report.ctrf.json --output-path ./html-report

Installation

Choose your package manager to install:

npm install ctrf-html-reporter

yarn add ctrf-html-reporter

pnpm add ctrf-html-reporter

Report Features

The generated HTML report provides multiple views to help you analyze your test results:

Overview

The Overview page displays a comprehensive summary of your test results. Here you can see:

• Tool Information
• Test Environment
• Overall test statistics (passed, failed, skipped)
• Test execution summary

Suites

The Suites view organizes test results grouped by test suites. This allows you to:

• View test results organized by suite
• Quickly identify which suites have failures
• Navigate through your test structure efficiently

Insights

The Insights view provides comparison with previous test results and baseline. This feature helps you:

• Compare current results against previous and baseline reports
• Easily identify changes in overall report metrics
• Track test case status changes (new failures, fixed tests, etc.)
• Understand test result trends over time

To enable insights comparison, specify previous reports. The baseline report is identified from the previous reports by its start time:

# Compare with previous reports (can be a file, glob pattern, or directory)
ctrf-html-reporter path/to/report.ctrf.json --previous-report-path path/to/previous.ctrf.json

# Compare with multiple previous reports using glob pattern
ctrf-html-reporter path/to/report.ctrf.json --previous-report-path "reports/*.ctrf.json"

# Specify which report to use as baseline (identified by start time)
ctrf-html-reporter path/to/report.ctrf.json \
  --previous-report-path path/to/reports/ \
  --baseline-report-path path/to/baseline.ctrf.json

Note: The baseline report must be included in the previous reports. When specified, it is identified by matching the start time (value of { results.summary.start }) of the test execution.

Timeline

The Timeline view displays test execution in chronological order. This visualization helps you:

• See start and stop times for each test case
• Identify long-running tests at a glance
• Understand test execution patterns
• Optimize test execution time by finding bottlenecks

Command Line Options

| Option | Alias | Description | Default | |--------|-------|-------------|---------| | <report.ctrf.json> | - | Path to the CTRF report file (required) | - | | --output-path <path> | -o | Output directory for the HTML report | .ctrf/report | | --previous-report-path <path or glob pattern or directory> | -p | Path to previous CTRF report file(s) or directory for comparison | - | | --baseline-report-path <path> | -b | Path to the baseline CTRF report file (must be included in previous reports, identified by start time) | - | | --version | -V | Output the version number | - | | --help | -h | Display help information | - |

Requirements

• Node.js >= 20.19.0

License

MIT License - see the LICENSE file for details

Acknowledgments

This project uses VitePress and CTRF.

If you have any problems or questions, please feel free to create an Issue!