Enable HTML reporter by default in new CodeceptJS projects with comprehensive system information #5105

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

Show comments View file Open in desktop

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

Show comments View file Open in desktop

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`

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

Show comments View file Open in desktop

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

Show comments View file Open in desktop

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

Show comments View file Open in desktop

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

Show comments View file Open in desktop

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

Show comments View file Open in desktop

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

Show comments View file Open in desktop

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

Navigation Menu

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Enable HTML reporter by default in new CodeceptJS projects with comprehensive system information #5105

Uh oh!

Enable HTML reporter by default in new CodeceptJS projects with comprehensive system information #5105

Filter by extension

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!