Skip to content
Merged
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
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@ examples/selenoid-example/output
test/data/app/db
test/data/sandbox/steps.d.ts
test/data/sandbox/configs/custom-reporter-plugin/output/result.json
test/data/sandbox/configs/html-reporter-plugin/output/
output/
test/runner/output/
testpullfilecache*
.DS_Store
package-lock.json
Expand Down
44 changes: 44 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ You don't need to worry about asynchronous nature of NodeJS or about various API
- </> Smart locators: use names, labels, matching text, CSS or XPath to locate elements.
- 🌐 Interactive debugging shell: pause test at any point and try different commands in a browser.
- ⚡ **Parallel testing** with dynamic test pooling for optimal load balancing and performance.
- 📊 **Built-in HTML Reporter** with interactive dashboard, step-by-step execution details, and comprehensive test analytics.
- Easily create tests, pageobjects, stepobjects with CLI generators.

## Installation
Expand Down Expand Up @@ -234,6 +235,49 @@ Scenario('test title', () => {
})
```

## HTML Reporter

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:

### 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

### Visual Examples

#### Interactive Test Dashboard

The main dashboard provides a complete overview with interactive statistics and pie charts:

![HTML Reporter Dashboard](docs/shared/html-reporter-main-dashboard.png)

#### Detailed Test Results

Each test shows comprehensive execution details with expandable step information:

![HTML Reporter Test Details](docs/shared/html-reporter-test-details.png)

#### Advanced Filtering Capabilities

Real-time filtering allows quick navigation through test results:

![HTML Reporter Filtering](docs/shared/html-reporter-filtering.png)

#### BDD/Gherkin Support

Full support for Gherkin scenarios with proper feature formatting:

![HTML Reporter BDD Details](docs/shared/html-reporter-bdd-details.png)

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).

## PageObjects

CodeceptJS provides the most simple way to create and use page objects in your test.
Expand Down
38 changes: 38 additions & 0 deletions docs/plugins.md
Original file line number Diff line number Diff line change
Expand Up @@ -714,6 +714,44 @@ 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` &#x20;

## pageInfo

Collects information from web page after each failed test and adds it to the test as an artifact.
Expand Down
60 changes: 60 additions & 0 deletions docs/reports.md
Original file line number Diff line number Diff line change
Expand Up @@ -228,6 +228,66 @@ Result will be located at `output/result.xml` file.

## Html

### Built-in HTML Reporter

CodeceptJS includes a built-in HTML reporter plugin that generates comprehensive HTML reports with detailed test information.

#### Features

- **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

#### Configuration

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

```js
exports.config = {
// ... your other configuration
plugins: {
htmlReporter: {
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
}
}
}
```

#### 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:

```sh
npx codeceptjs run
```

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

- 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

### Mochawesome

Best HTML reports could be produced with [mochawesome](https://www.npmjs.com/package/mochawesome) reporter.

![mochawesome](/img/mochawesome.png)
Expand Down
Binary file added docs/shared/html-reporter-bdd-details.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/shared/html-reporter-filtering.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/shared/html-reporter-main-dashboard.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/shared/html-reporter-test-details.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions lib/command/init.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,11 @@ const defaultConfig = {
output: '',
helpers: {},
include: {},
plugins: {
htmlReporter: {
enabled: true,
},
},
}

const helpers = ['Playwright', 'WebDriver', 'Puppeteer', 'REST', 'GraphQL', 'Appium', 'TestCafe']
Expand Down
Loading
Loading