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

Author: Copilot

.gitignore

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

README.md

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

docs/plugins.md

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

docs/reports.md

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

docs/shared/html-reporter-bdd-details.png

@@ -18,6 +18,11 @@ const defaultConfig = {
   output: '',
   helpers: {},
   include: {},
+  plugins: {
+    htmlReporter: {
+      enabled: true,
+    },
+  },
 }
 
 const helpers = ['Playwright', 'WebDriver', 'Puppeteer', 'REST', 'GraphQL', 'Appium', 'TestCafe']