Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 39 additions & 26 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -233,49 +233,62 @@ Scenario('test title', () => {
})
```

## HTML Reporter
## HTML Reports

CodeceptJS includes a powerful built-in HTML Reporter that generates comprehensive, interactive test reports with detailed information about your test runs. The HTML reporter is **enabled by default** for all new projects and provides:
Generate beautiful HTML reports using **[@testomatio/reporter](https://github.com/testomatio/reporter)** package.

### Features

- **Interactive Dashboard**: Visual statistics, pie charts, and expandable test details
- **Step-by-Step Execution**: Shows individual test steps with timing and status indicators
- **BDD/Gherkin Support**: Full support for feature files with proper scenario formatting
- **System Information**: Comprehensive environment details including browser versions
- **Advanced Filtering**: Real-time filtering by status, tags, features, and test types
- **History Tracking**: Multi-run history with trend visualization
- **Error Details**: Clean formatting of error messages and stack traces
- **Artifacts Support**: Display screenshots and other test artifacts
### Installation

### Visual Examples
```sh
npm install @testomatio/reporter --save-dev
```

#### Interactive Test Dashboard
### Configuration

The main dashboard provides a complete overview with interactive statistics and pie charts:
Add the `testomatio` plugin to your `codecept.conf.js`:

![HTML Reporter Dashboard](docs/shared/html-reporter-main-dashboard.png)
```js
plugins: {
testomatio: {
enabled: true,
require: '@testomatio/reporter/lib/adapter/codecept',
},
}
```

#### Detailed Test Results
### Usage

Each test shows comprehensive execution details with expandable step information:
Generate HTML reports by setting the `TESTOMATIO_HTML_REPORT_SAVE` environment variable:

![HTML Reporter Test Details](docs/shared/html-reporter-test-details.png)
```sh
TESTOMATIO_HTML_REPORT_SAVE=1 npx codeceptjs run
```

#### Advanced Filtering Capabilities
The report will be saved to `html-report/testomatio-report.html`.

Real-time filtering allows quick navigation through test results:
### Features

![HTML Reporter Filtering](docs/shared/html-reporter-filtering.png)
- Modern, responsive interface with real-time statistics
- Detailed test information with step-by-step breakdown
- Screenshots, videos, and artifacts display
- BDD/Gherkin support with proper scenario formatting
- Customizable output location and filename
- Optional integration with [Testomat.io](https://testomat.io) cloud

#### BDD/Gherkin Support
### Customization

Full support for Gherkin scenarios with proper feature formatting:
```sh
# Custom output folder
TESTOMATIO_HTML_REPORT_SAVE=1 TESTOMATIO_HTML_REPORT_FOLDER=./reports npx codeceptjs run

![HTML Reporter BDD Details](docs/shared/html-reporter-bdd-details.png)
# Custom filename
TESTOMATIO_HTML_REPORT_SAVE=1 TESTOMATIO_HTML_FILENAME=my-report.html npx codeceptjs run

The HTML reporter generates self-contained reports that can be easily shared with your team. Learn more about configuration and features in the [HTML Reporter documentation](https://codecept.io/plugins/#htmlreporter).
# Integrate with Testomat.io cloud
TESTOMATIO_HTML_REPORT_SAVE=1 TESTOMATIO=your_api_key npx codeceptjs run
```

Learn more in the [Testomat.io Reporter documentation](https://docs.testomat.io/test-reporting/pipes/html/).
## PageObjects

CodeceptJS provides the most simple way to create and use page objects in your test.
Expand Down
38 changes: 0 additions & 38 deletions docs/plugins.md
Original file line number Diff line number Diff line change
Expand Up @@ -523,44 +523,6 @@ More config options are available:

* `config` (optional, default `{}`)

## htmlReporter

HTML Reporter Plugin for CodeceptJS

Generates comprehensive HTML reports showing:

* Test statistics
* Feature/Scenario details
* Individual step results
* Test artifacts (screenshots, etc.)

## Configuration

```js
"plugins": {
"htmlReporter": {
"enabled": true,
"output": "./output",
"reportFileName": "report.html",
"includeArtifacts": true,
"showSteps": true,
"showSkipped": true,
"showMetadata": true,
"showTags": true,
"showRetries": true,
"exportStats": false,
"exportStatsPath": "./stats.json",
"keepHistory": false,
"historyPath": "./test-history.json",
"maxHistoryEntries": 50
}
}
```

### Parameters

* `config`  

## pageInfo

Collects information from web page after each failed test and adds it to the test as an artifact.
Expand Down
61 changes: 27 additions & 34 deletions docs/reports.md
Original file line number Diff line number Diff line change
Expand Up @@ -236,64 +236,57 @@ codeceptjs run

## Html

### Built-in HTML Reporter
### Testomat.io HTML Reporter

CodeceptJS includes a built-in HTML reporter plugin that generates comprehensive HTML reports with detailed test information.
For modern HTML reports, use **[@testomatio/reporter](https://github.com/testomatio/reporter)** package.

#### Features
#### Installation

- **Interactive Test Results**: Click on tests to expand and view detailed information
- **Step-by-Step Details**: Shows individual test steps with status indicators and timing
- **Test Statistics**: Visual cards showing totals, passed, failed, and pending test counts
- **Error Information**: Detailed error messages for failed tests with clean formatting
- **Artifacts Support**: Display screenshots and other test artifacts with modal viewing
- **Responsive Design**: Mobile-friendly layout that works on all screen sizes
- **Professional Styling**: Modern, clean interface with color-coded status indicators
```sh
npm install @testomatio/reporter --save-dev
```

#### Configuration

Add the `htmlReporter` plugin to your `codecept.conf.js`:
Add the `testomatio` plugin to your `codecept.conf.js`:

```js
exports.config = {
// ... your other configuration
plugins: {
htmlReporter: {
testomatio: {
enabled: true,
output: './output', // Directory for the report
reportFileName: 'report.html', // Name of the HTML file
includeArtifacts: true, // Include screenshots/artifacts
showSteps: true, // Show individual test steps
showSkipped: true, // Show skipped tests
require: '@testomatio/reporter/lib/adapter/codecept',
},
},
}
```

#### Configuration Options

- `output` (optional, default: `./output`) - Directory where the HTML report will be saved
- `reportFileName` (optional, default: `'report.html'`) - Name of the generated HTML file
- `includeArtifacts` (optional, default: `true`) - Whether to include screenshots and other artifacts
- `showSteps` (optional, default: `true`) - Whether to display individual test steps
- `showSkipped` (optional, default: `true`) - Whether to include skipped tests in the report

#### Usage

Run your tests normally and the HTML report will be automatically generated:
Generate HTML reports with environment variable:

```sh
npx codeceptjs run
TESTOMATIO_HTML_REPORT_SAVE=1 npx codeceptjs run
```

The report will be saved to `output/report.html` (or your configured location) and includes:
Report is saved to `html-report/testomatio-report.html`.

#### Configuration Options

Customize report location:

```sh
# Custom folder
TESTOMATIO_HTML_REPORT_SAVE=1 TESTOMATIO_HTML_REPORT_FOLDER=./reports npx codeceptjs run

# Custom filename
TESTOMATIO_HTML_REPORT_SAVE=1 TESTOMATIO_HTML_FILENAME=my-report.html npx codeceptjs run

- Overview statistics with visual cards
- Expandable test details showing steps and timing
- Error messages for failed tests
- Screenshots and artifacts (if available)
- Interactive failures section
# With Testomat.io cloud
TESTOMATIO_HTML_REPORT_SAVE=1 TESTOMATIO=your_api_key npx codeceptjs run
```

For more details, see [documentation](https://docs.testomat.io/test-reporting/pipes/html/).
### Mochawesome

Best HTML reports could be produced with [mochawesome](https://www.npmjs.com/package/mochawesome) reporter.
Expand Down
Binary file removed docs/shared/html-reporter-bdd-details.png
Binary file not shown.
Binary file removed docs/shared/html-reporter-filtering.png
Binary file not shown.
Binary file removed docs/shared/html-reporter-main-dashboard.png
Binary file not shown.
Binary file removed docs/shared/html-reporter-test-details.png
Binary file not shown.
3 changes: 0 additions & 3 deletions lib/command/init.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,6 @@ const defaultConfig = {
helpers: {},
include: {},
plugins: {
htmlReporter: {
enabled: true,
},
},
}

Expand Down
Loading