Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 0a0067f

Browse files
authored
Enable HTML reporter by default in new CodeceptJS projects with comprehensive system information (#5105)
1 parent 5535d16 commit 0a0067f

20 files changed

+2492
-0
lines changed

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,9 @@ examples/selenoid-example/output
1717
test/data/app/db
1818
test/data/sandbox/steps.d.ts
1919
test/data/sandbox/configs/custom-reporter-plugin/output/result.json
20+
test/data/sandbox/configs/html-reporter-plugin/output/
21+
output/
22+
test/runner/output/
2023
testpullfilecache*
2124
.DS_Store
2225
package-lock.json

‎README.md‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ You don't need to worry about asynchronous nature of NodeJS or about various API
6565
- </> Smart locators: use names, labels, matching text, CSS or XPath to locate elements.
6666
- 🌐 Interactive debugging shell: pause test at any point and try different commands in a browser.
6767
- ⚡ **Parallel testing** with dynamic test pooling for optimal load balancing and performance.
68+
- 📊 **Built-in HTML Reporter** with interactive dashboard, step-by-step execution details, and comprehensive test analytics.
6869
- Easily create tests, pageobjects, stepobjects with CLI generators.
6970

7071
## Installation
@@ -234,6 +235,49 @@ Scenario('test title', () => {
234235
})
235236
```
236237

238+
## HTML Reporter
239+
240+
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:
241+
242+
### Features
243+
244+
- **Interactive Dashboard**: Visual statistics, pie charts, and expandable test details
245+
- **Step-by-Step Execution**: Shows individual test steps with timing and status indicators
246+
- **BDD/Gherkin Support**: Full support for feature files with proper scenario formatting
247+
- **System Information**: Comprehensive environment details including browser versions
248+
- **Advanced Filtering**: Real-time filtering by status, tags, features, and test types
249+
- **History Tracking**: Multi-run history with trend visualization
250+
- **Error Details**: Clean formatting of error messages and stack traces
251+
- **Artifacts Support**: Display screenshots and other test artifacts
252+
253+
### Visual Examples
254+
255+
#### Interactive Test Dashboard
256+
257+
The main dashboard provides a complete overview with interactive statistics and pie charts:
258+
259+
![HTML Reporter Dashboard](docs/shared/html-reporter-main-dashboard.png)
260+
261+
#### Detailed Test Results
262+
263+
Each test shows comprehensive execution details with expandable step information:
264+
265+
![HTML Reporter Test Details](docs/shared/html-reporter-test-details.png)
266+
267+
#### Advanced Filtering Capabilities
268+
269+
Real-time filtering allows quick navigation through test results:
270+
271+
![HTML Reporter Filtering](docs/shared/html-reporter-filtering.png)
272+
273+
#### BDD/Gherkin Support
274+
275+
Full support for Gherkin scenarios with proper feature formatting:
276+
277+
![HTML Reporter BDD Details](docs/shared/html-reporter-bdd-details.png)
278+
279+
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).
280+
237281
## PageObjects
238282

239283
CodeceptJS provides the most simple way to create and use page objects in your test.

‎docs/plugins.md‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -714,6 +714,44 @@ More config options are available:
714714
715715
- `config` (optional, default `{}`)
716716
717+
## htmlReporter
718+
719+
HTML Reporter Plugin for CodeceptJS
720+
721+
Generates comprehensive HTML reports showing:
722+
723+
- Test statistics
724+
- Feature/Scenario details
725+
- Individual step results
726+
- Test artifacts (screenshots, etc.)
727+
728+
## Configuration
729+
730+
```js
731+
"plugins": {
732+
"htmlReporter": {
733+
"enabled": true,
734+
"output": "./output",
735+
"reportFileName": "report.html",
736+
"includeArtifacts": true,
737+
"showSteps": true,
738+
"showSkipped": true,
739+
"showMetadata": true,
740+
"showTags": true,
741+
"showRetries": true,
742+
"exportStats": false,
743+
"exportStatsPath": "./stats.json",
744+
"keepHistory": false,
745+
"historyPath": "./test-history.json",
746+
"maxHistoryEntries": 50
747+
}
748+
}
749+
```
750+
751+
### Parameters
752+
753+
- `config` &#x20;
754+
717755
## pageInfo
718756
719757
Collects information from web page after each failed test and adds it to the test as an artifact.

‎docs/reports.md‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -228,6 +228,66 @@ Result will be located at `output/result.xml` file.
228228

229229
## Html
230230

231+
### Built-in HTML Reporter
232+
233+
CodeceptJS includes a built-in HTML reporter plugin that generates comprehensive HTML reports with detailed test information.
234+
235+
#### Features
236+
237+
- **Interactive Test Results**: Click on tests to expand and view detailed information
238+
- **Step-by-Step Details**: Shows individual test steps with status indicators and timing
239+
- **Test Statistics**: Visual cards showing totals, passed, failed, and pending test counts
240+
- **Error Information**: Detailed error messages for failed tests with clean formatting
241+
- **Artifacts Support**: Display screenshots and other test artifacts with modal viewing
242+
- **Responsive Design**: Mobile-friendly layout that works on all screen sizes
243+
- **Professional Styling**: Modern, clean interface with color-coded status indicators
244+
245+
#### Configuration
246+
247+
Add the `htmlReporter` plugin to your `codecept.conf.js`:
248+
249+
```js
250+
exports.config = {
251+
// ... your other configuration
252+
plugins: {
253+
htmlReporter: {
254+
enabled: true,
255+
output: './output', // Directory for the report
256+
reportFileName: 'report.html', // Name of the HTML file
257+
includeArtifacts: true, // Include screenshots/artifacts
258+
showSteps: true, // Show individual test steps
259+
showSkipped: true // Show skipped tests
260+
}
261+
}
262+
}
263+
```
264+
265+
#### Configuration Options
266+
267+
- `output` (optional, default: `./output`) - Directory where the HTML report will be saved
268+
- `reportFileName` (optional, default: `'report.html'`) - Name of the generated HTML file
269+
- `includeArtifacts` (optional, default: `true`) - Whether to include screenshots and other artifacts
270+
- `showSteps` (optional, default: `true`) - Whether to display individual test steps
271+
- `showSkipped` (optional, default: `true`) - Whether to include skipped tests in the report
272+
273+
#### Usage
274+
275+
Run your tests normally and the HTML report will be automatically generated:
276+
277+
```sh
278+
npx codeceptjs run
279+
```
280+
281+
The report will be saved to `output/report.html` (or your configured location) and includes:
282+
283+
- Overview statistics with visual cards
284+
- Expandable test details showing steps and timing
285+
- Error messages for failed tests
286+
- Screenshots and artifacts (if available)
287+
- Interactive failures section
288+
289+
### Mochawesome
290+
231291
Best HTML reports could be produced with [mochawesome](https://www.npmjs.com/package/mochawesome) reporter.
232292

233293
![mochawesome](/img/mochawesome.png)
540 KB
Loading[フレーム]
356 KB
Loading[フレーム]
362 KB
Loading[フレーム]
371 KB
Loading[フレーム]

‎lib/command/init.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,11 @@ const defaultConfig = {
1818
output: '',
1919
helpers: {},
2020
include: {},
21+
plugins: {
22+
htmlReporter: {
23+
enabled: true,
24+
},
25+
},
2126
}
2227

2328
const helpers = ['Playwright', 'WebDriver', 'Puppeteer', 'REST', 'GraphQL', 'Appium', 'TestCafe']

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /