Fix HTML reporter plugin tests and enhance README with comprehensive screenshots

Co-authored-by: kobenguyent <[email protected]>

Author: Copilot

README.md

@@ -239,6 +239,8 @@ Scenario('test title', () => {
 
 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
@@ -248,6 +250,32 @@ CodeceptJS includes a powerful built-in HTML Reporter that generates comprehensi
 - **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

lib/plugin/htmlReporter.js

@@ -3,6 +3,7 @@ const path = require('path')
 const mkdirp = require('mkdirp')
 const crypto = require('crypto')
 const { template } = require('../utils')
+const { getMachineInfo } = require('../command/info')
 
 const event = require('../event')
 const output = require('../output')
@@ -329,10 +330,10 @@ module.exports = function (config) {
     }
 
     // Get system information
-    const systemInfo = await getSystemInfo()
+    const systemInfo = await getMachineInfo()
 
     const html = template(getHtmlTemplate(), {
-      title: 'CodeceptJS Test Report',
+      title: `CodeceptJS Test Report v${Codecept.version()}`,
       timestamp: data.endTime.toISOString(),
       duration: formatDuration(data.duration),
       stats: JSON.stringify(data.stats),
@@ -348,7 +349,6 @@ module.exports = function (config) {
       failuresDisplay: data.failures && data.failures.length > 0 ? 'block' : 'none',
       codeceptVersion: Codecept.version(),
       systemInfoHtml: generateSystemInfoHtml(systemInfo),
-      codeceptLogo: getCodeceptLogo(),
     })
 
     fs.writeFileSync(reportPath, html)
@@ -402,7 +402,7 @@ module.exports = function (config) {
     return tests
       .map(test => {
         const statusClass = test.state || 'unknown'
-        const feature = test.isBdd && test.feature ? test.feature.name : (test.parent?.title || 'Unknown Feature')
+        const feature = test.isBdd && test.feature ? test.feature.name : test.parent?.title || 'Unknown Feature'
         const steps = config.showSteps && test.steps ? (test.isBdd ? generateBddStepsHtml(test.steps) : generateStepsHtml(test.steps)) : ''
         const featureDetails = test.isBdd && test.feature ? generateBddFeatureHtml(test.feature) : ''
         const hooks = test.hooks && test.hooks.length > 0 ? generateHooksHtml(test.hooks) : ''
@@ -506,8 +506,7 @@ module.exports = function (config) {
     if (!feature) return ''
 
     const description = feature.description ? `<div class="feature-description">${escapeHtml(feature.description)}</div>` : ''
-    const featureTags = feature.tags && feature.tags.length > 0 ? 
-      `<div class="feature-tags">${feature.tags.map(tag => `<span class="feature-tag">${escapeHtml(tag)}</span>`).join('')}</div>` : ''
+    const featureTags = feature.tags && feature.tags.length > 0 ? `<div class="feature-tags">${feature.tags.map(tag => `<span class="feature-tag">${escapeHtml(tag)}</span>`).join('')}</div>` : ''
 
     return `
       <div class="bdd-feature-section">
@@ -677,6 +676,48 @@ module.exports = function (config) {
     return unsafe.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#039;')
   }
 
+  function generateSystemInfoHtml(systemInfo) {
+    if (!systemInfo) return ''
+
+    const formatInfo = (key, value) => {
+      if (Array.isArray(value) && value.length > 1) {
+        return `<div class="info-item"><span class="info-key">${key}:</span> <span class="info-value">${escapeHtml(value[1])}</span></div>`
+      } else if (typeof value === 'string' && value !== 'N/A' && value !== 'undefined') {
+        return `<div class="info-item"><span class="info-key">${key}:</span> <span class="info-value">${escapeHtml(value)}</span></div>`
+      }
+      return ''
+    }
+
+    const infoItems = [
+      formatInfo('Node.js', systemInfo.nodeInfo),
+      formatInfo('OS', systemInfo.osInfo),
+      formatInfo('CPU', systemInfo.cpuInfo),
+      formatInfo('Chrome', systemInfo.chromeInfo),
+      formatInfo('Edge', systemInfo.edgeInfo),
+      formatInfo('Firefox', systemInfo.firefoxInfo),
+      formatInfo('Safari', systemInfo.safariInfo),
+      formatInfo('Playwright Browsers', systemInfo.playwrightBrowsers),
+    ]
+      .filter(item => item)
+      .join('')
+
+    if (!infoItems) return ''
+
+    return `
+      <section class="system-info-section">
+        <div class="system-info-header" onclick="toggleSystemInfo()">
+          <h3>Environment Information</h3>
+          <span class="toggle-icon">▼</span>
+        </div>
+        <div class="system-info-content" id="systemInfoContent">
+          <div class="system-info-grid">
+            ${infoItems}
+          </div>
+        </div>
+      </section>
+    `
+  }
+
   function getHtmlTemplate() {
     return `
 <!DOCTYPE html>
@@ -697,6 +738,8 @@ module.exports = function (config) {
     </header>
 
     <main class="report-content">
+        {{systemInfoHtml}}
+
         <section class="stats-section">
             <h2>Test Statistics</h2>
             {{statsHtml}}
@@ -830,7 +873,7 @@ body {
     padding: 0 1rem;
 }
 
-.stats-section, .tests-section, .failures-section, .retries-section, .filters-section, .history-section {
+.stats-section, .tests-section, .failures-section, .retries-section, .filters-section, .history-section, .system-info-section {
     background: white;
     margin-bottom: 2rem;
     border-radius: 8px;
@@ -1352,6 +1395,82 @@ body {
     display: none !important;
 }
 
+/* System Info Section */
+.system-info-section {
+    background: white;
+    margin-bottom: 2rem;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    overflow: hidden;
+}
+
+.system-info-header {
+    background: #2c3e50;
+    color: white;
+    padding: 1rem;
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    transition: background-color 0.2s;
+}
+
+.system-info-header:hover {
+    background: #34495e;
+}
+
+.system-info-header h3 {
+    margin: 0;
+    font-size: 1.2rem;
+}
+
+.toggle-icon {
+    font-size: 1rem;
+    transition: transform 0.3s ease;
+}
+
+.toggle-icon.rotated {
+    transform: rotate(-180deg);
+}
+
+.system-info-content {
+    display: none;
+    padding: 1.5rem;
+    background: #f8f9fa;
+    border-top: 1px solid #e9ecef;
+}
+
+.system-info-content.visible {
+    display: block;
+}
+
+.system-info-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 1rem;
+}
+
+.info-item {
+    padding: 0.75rem;
+    background: white;
+    border-radius: 6px;
+    border-left: 4px solid #3498db;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}
+
+.info-key {
+    font-weight: bold;
+    color: #2c3e50;
+    display: inline-block;
+    min-width: 100px;
+}
+
+.info-value {
+    color: #34495e;
+    font-family: 'Courier New', monospace;
+    font-size: 0.9rem;
+}
+
 /* BDD/Gherkin specific styles */
 .bdd-test {
     border-left: 4px solid #8e44ad;
@@ -1501,6 +1620,19 @@ function closeImageModal() {
     modal.style.display = 'none';
 }
 
+function toggleSystemInfo() {
+    const content = document.getElementById('systemInfoContent');
+    const icon = document.querySelector('.toggle-icon');
+    
+    if (content.classList.contains('visible')) {
+        content.classList.remove('visible');
+        icon.classList.remove('rotated');
+    } else {
+        content.classList.add('visible');
+        icon.classList.add('rotated');
+    }
+}
+
 // Filter functionality
 function applyFilters() {
     const statusFilter = Array.from(document.getElementById('statusFilter').selectedOptions).map(opt => opt.value);

test/data/sandbox/configs/html-reporter-plugin/artifacts_test.js

@@ -3,12 +3,17 @@ Feature('HTML Reporter with Artifacts Test')
 Scenario('test with artifacts', async ({ I }) => {
   I.amInPath('.')
   I.seeFile('codecept.conf.js')
-  
+
   // Simulate adding test artifacts
-  const currentTest = global.codecept_dir ? require('../../../../lib/container').get('mocha') : null
-  if (currentTest && currentTest.currentTest) {
-    currentTest.currentTest.artifacts = currentTest.currentTest.artifacts || []
-    currentTest.currentTest.artifacts.push('fake-screenshot-1.png')
-    currentTest.currentTest.artifacts.push('fake-screenshot-2.png')
+  const container = require('../../../../../lib/container')
+  try {
+    const currentTest = container.mocha().currentTest
+    if (currentTest) {
+      currentTest.artifacts = currentTest.artifacts || []
+      currentTest.artifacts.push('fake-screenshot-1.png')
+      currentTest.artifacts.push('fake-screenshot-2.png')
+    }
+  } catch (e) {
+    // Ignore if container not available
   }
-})
+})

test/data/sandbox/configs/html-reporter-plugin/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "html-reporter-plugin-test",
+  "version": "1.0.0",
+  "description": "Test package for HTML reporter plugin tests",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC"
+}