@@ -1242,7 +1292,7 @@ module.exports = function (config) {
}
}
- output.print(`HTML Reporter: Screenshot ${filename} -> ${relativePath}`)
+ output.debug(`HTML Reporter: Screenshot ${filename} -> ${relativePath}`)
return `
`
})
.join('')
@@ -1556,7 +1606,7 @@ module.exports = function (config) {
@@ -2457,6 +2507,10 @@ body {
function getJsScripts() {
return `
+// Go to Top button
+function scrollToTop() {
+ window.scrollTo({ top: 0, behavior: 'smooth' });
+}
function toggleTestDetails(testId) {
const details = document.getElementById('details-' + testId);
if (details.style.display === 'none' || details.style.display === '') {
@@ -2939,9 +2993,26 @@ function drawHistoryChart() {
// Initialize charts and filters
document.addEventListener('DOMContentLoaded', function() {
- // Draw charts
- drawPieChart();
- drawHistoryChart();
+ // Draw charts
+ drawPieChart();
+ drawHistoryChart();
+ // Add Go to Top button
+ const goTopBtn = document.createElement('button');
+ goTopBtn.innerText = '↑ Top';
+ goTopBtn.id = 'goTopBtn';
+ goTopBtn.style.position = 'fixed';
+ goTopBtn.style.bottom = '30px';
+ goTopBtn.style.right = '30px';
+ goTopBtn.style.zIndex = '9999';
+ goTopBtn.style.padding = '12px 18px';
+ goTopBtn.style.borderRadius = '50%';
+ goTopBtn.style.background = '#27ae60';
+ goTopBtn.style.color = '#fff';
+ goTopBtn.style.fontSize = '20px';
+ goTopBtn.style.boxShadow = '0 2px 8px rgba(0,0,0,0.2)';
+ goTopBtn.style.cursor = 'pointer';
+ goTopBtn.onclick = scrollToTop;
+ document.body.appendChild(goTopBtn);
// Set up filter event listeners
document.getElementById('statusFilter').addEventListener('change', applyFilters);
diff --git a/package.json b/package.json
index 7414556bd..45134ebb4 100644
--- a/package.json
+++ b/package.json
@@ -141,7 +141,7 @@
"@pollyjs/core": "6.0.6",
"@types/chai": "5.2.2",
"@types/inquirer": "9.0.9",
- "@types/node": "^24.6.0",
+ "@types/node": "^24.6.2",
"@wdio/sauce-service": "9.12.5",
"@wdio/selenium-standalone-service": "8.15.0",
"@wdio/utils": "9.19.2",
diff --git a/test/data/sandbox/configs/html-reporter-plugin/codecept-with-retries.conf.js b/test/data/sandbox/configs/html-reporter-plugin/codecept-with-retries.conf.js
new file mode 100644
index 000000000..f2ee21035
--- /dev/null
+++ b/test/data/sandbox/configs/html-reporter-plugin/codecept-with-retries.conf.js
@@ -0,0 +1,27 @@
+const { setHeadlessWhen, setWindowSize } = require('@codeceptjs/configure')
+
+setHeadlessWhen(process.env.HEADLESS)
+setWindowSize(1600, 1200)
+
+exports.config = {
+ tests: './retry_test.js',
+ output: './output',
+ helpers: {
+ FileSystem: {},
+ },
+ plugins: {
+ htmlReporter: {
+ enabled: true,
+ output: './output',
+ reportFileName: 'retry-report.html',
+ includeArtifacts: true,
+ showSteps: true,
+ showRetries: true,
+ },
+ retryFailedStep: {
+ enabled: true,
+ retries: 2,
+ },
+ },
+ name: 'html-reporter-plugin retry tests',
+}
diff --git a/test/data/sandbox/configs/html-reporter-plugin/codecept-workers.conf.js b/test/data/sandbox/configs/html-reporter-plugin/codecept-workers.conf.js
new file mode 100644
index 000000000..9b5043f08
--- /dev/null
+++ b/test/data/sandbox/configs/html-reporter-plugin/codecept-workers.conf.js
@@ -0,0 +1,34 @@
+const { setHeadlessWhen, setWindowSize } = require('@codeceptjs/configure')
+
+setHeadlessWhen(process.env.HEADLESS)
+setWindowSize(1600, 1200)
+
+exports.config = {
+ tests: './*_test.js',
+ output: './output',
+ helpers: {
+ FileSystem: {},
+ },
+ plugins: {
+ htmlReporter: {
+ enabled: true,
+ output: './output',
+ reportFileName: 'worker-report.html',
+ includeArtifacts: true,
+ showSteps: true,
+ showSkipped: true,
+ showMetadata: true,
+ showTags: true,
+ showRetries: true,
+ exportStats: false,
+ keepHistory: false,
+ },
+ },
+ multiple: {
+ parallel: {
+ chunks: 2,
+ browsers: ['chrome', 'firefox'],
+ },
+ },
+ name: 'html-reporter-plugin worker tests',
+}
diff --git a/test/data/sandbox/configs/html-reporter-plugin/edge-cases_test.js b/test/data/sandbox/configs/html-reporter-plugin/edge-cases_test.js
new file mode 100644
index 000000000..8c0633302
--- /dev/null
+++ b/test/data/sandbox/configs/html-reporter-plugin/edge-cases_test.js
@@ -0,0 +1,42 @@
+Feature('HTML Reporter Edge Cases')
+
+Scenario('test with special characters <>&"\'', ({ I }) => {
+ I.amInPath('.')
+ I.seeFile('package.json')
+})
+
+Scenario('test with very long name that should be handled properly without breaking the layout or causing any rendering issues in the HTML report', ({ I }) => {
+ I.amInPath('.')
+ I.seeFile('codecept.conf.js')
+})
+
+Scenario('test with unicode characters 测试 🎉 ñoño', ({ I }) => {
+ I.amInPath('.')
+ I.seeFile('package.json')
+})
+
+Scenario('@tag1 @tag2 @critical test with multiple tags', ({ I }) => {
+ I.amInPath('.')
+ I.seeFile('codecept.conf.js')
+})
+
+Scenario('test with metadata', ({ I }) => {
+ I.amInPath('.')
+ I.seeFile('package.json')
+}).tag('@smoke').tag('@regression')
+
+Scenario('test that takes longer to execute', async ({ I }) => {
+ I.amInPath('.')
+ await new Promise(resolve => setTimeout(resolve, 500))
+ I.seeFile('package.json')
+})
+
+Scenario('test with nested error', ({ I }) => {
+ I.amInPath('.')
+ try {
+ throw new Error('Nested error with tags & special chars')
+ } catch (e) {
+ // This will fail
+ I.seeFile('non-existent-file-with-error.txt')
+ }
+})
diff --git a/test/data/sandbox/configs/html-reporter-plugin/empty_test.js b/test/data/sandbox/configs/html-reporter-plugin/empty_test.js
new file mode 100644
index 000000000..0f5546517
--- /dev/null
+++ b/test/data/sandbox/configs/html-reporter-plugin/empty_test.js
@@ -0,0 +1,3 @@
+Feature('Empty Feature')
+
+// No scenarios
diff --git a/test/data/sandbox/configs/html-reporter-plugin/retry_test.js b/test/data/sandbox/configs/html-reporter-plugin/retry_test.js
new file mode 100644
index 000000000..1b8631e9e
--- /dev/null
+++ b/test/data/sandbox/configs/html-reporter-plugin/retry_test.js
@@ -0,0 +1,23 @@
+Feature('HTML Reporter Retry Test')
+
+let attemptCounter = 0
+
+Scenario('test that fails first time then passes', ({ I }) => {
+ attemptCounter++
+ I.amInPath('.')
+ if (attemptCounter === 1) {
+ I.seeFile('this-file-does-not-exist.txt') // Will fail first time
+ } else {
+ I.seeFile('package.json') // Will pass on retry
+ }
+})
+
+Scenario('test that always fails even with retries', ({ I }) => {
+ I.amInPath('.')
+ I.seeFile('this-will-never-exist.txt')
+})
+
+Scenario('test that passes without retries', ({ I }) => {
+ I.amInPath('.')
+ I.seeFile('codecept.conf.js')
+})
diff --git a/test/runner/html-reporter-plugin_test.js b/test/runner/html-reporter-plugin_test.js
index 56a7a7ef8..0ad68f149 100644
--- a/test/runner/html-reporter-plugin_test.js
+++ b/test/runner/html-reporter-plugin_test.js
@@ -166,4 +166,270 @@ describe('CodeceptJS html-reporter-plugin', function () {
done()
})
})
+
+ it('should display correct feature names in worker mode', done => {
+ // Test for the "Unknown Feature" fix when running with workers
+ exec(config_run_config('codecept.conf.js') + ' --workers 2', (err, stdout) => {
+ debug(stdout)
+
+ const reportFile = path.join(`${codecept_dir}/configs/html-reporter-plugin`, 'output', 'report.html')
+ expect(fs.existsSync(reportFile)).toBe(true)
+
+ const reportContent = fs.readFileSync(reportFile, 'utf8')
+
+ // Should NOT contain "Unknown Feature" - all tests should have proper feature names
+ expect(reportContent).not.toContain('Unknown Feature')
+
+ // Should contain the actual feature name
+ expect(reportContent).toContain('HTML Reporter Test')
+
+ // Check that feature names are properly set in data attributes
+ expect(reportContent).toMatch(/data-feature="[^"]+HTML Reporter Test[^"]*"/)
+
+ done()
+ })
+ })
+
+ it('should preserve step details for all tests including worker runs', done => {
+ exec(config_run_config('codecept.conf.js') + ' --workers 2', (err, stdout) => {
+ debug(stdout)
+
+ const reportFile = path.join(`${codecept_dir}/configs/html-reporter-plugin`, 'output', 'report.html')
+ const reportContent = fs.readFileSync(reportFile, 'utf8')
+
+ // Check that steps section exists and is populated
+ expect(reportContent).toContain('steps-section')
+ expect(reportContent).toContain('step-item')
+ expect(reportContent).toContain('amInPath')
+ expect(reportContent).toContain('seeFile')
+
+ // Steps should be visible even if feature name was initially unknown
+ expect(reportContent).toMatch(/step-title[^>]*>.*amInPath/s)
+ expect(reportContent).toMatch(/step-title[^>]*>.*seeFile/s)
+
+ done()
+ })
+ })
+
+ it('should render high-resolution test history chart', done => {
+ exec(config_run_config('codecept-with-history.conf.js'), (err, stdout) => {
+ debug(stdout)
+
+ const reportFile = path.join(`${codecept_dir}/configs/html-reporter-plugin`, 'output', 'report.html')
+ const reportContent = fs.readFileSync(reportFile, 'utf8')
+
+ // Check for increased canvas resolution
+ expect(reportContent).toMatch(/
]*id="historyChart"[^>]*width="1600"[^>]*height="600"/s)
+
+ // Verify history chart rendering function exists
+ expect(reportContent).toContain('drawHistoryChart')
+ expect(reportContent).toContain('historyChart')
+
+ done()
+ })
+ })
+
+ it('should include "Go to Top" button for UI/UX', done => {
+ exec(config_run_config('codecept.conf.js'), (err, stdout) => {
+ debug(stdout)
+
+ const reportFile = path.join(`${codecept_dir}/configs/html-reporter-plugin`, 'output', 'report.html')
+ const reportContent = fs.readFileSync(reportFile, 'utf8')
+
+ // Check for scrollToTop function
+ expect(reportContent).toContain('function scrollToTop()')
+ expect(reportContent).toContain('window.scrollTo')
+ expect(reportContent).toContain('behavior: \'smooth\'')
+
+ // Check that button is created dynamically
+ expect(reportContent).toContain('goTopBtn')
+ expect(reportContent).toContain('↑ Top')
+ expect(reportContent).toContain('position: \'fixed\'')
+ expect(reportContent).toContain('bottom: \'30px\'')
+ expect(reportContent).toContain('right: \'30px\'')
+
+ done()
+ })
+ })
+
+ it('should not show HTML Reporter debug logs in normal mode', done => {
+ exec(config_run_config('codecept.conf.js', null, false), (err, stdout) => {
+ debug(stdout)
+
+ // HTML Reporter debug messages should NOT appear in normal output
+ expect(stdout).not.toContain('HTML Reporter: Retry count detected')
+ expect(stdout).not.toContain('HTML Reporter: Test finished')
+ expect(stdout).not.toContain('HTML Reporter: Processing artifacts')
+ expect(stdout).not.toContain('HTML Reporter: Found screenshot')
+ expect(stdout).not.toContain('HTML Reporter: Checking directory')
+
+ // But the report file should still be generated
+ const reportFile = path.join(`${codecept_dir}/configs/html-reporter-plugin`, 'output', 'report.html')
+ expect(fs.existsSync(reportFile)).toBe(true)
+
+ done()
+ })
+ })
+
+ it('should show HTML Reporter debug logs in verbose/debug mode', done => {
+ exec(config_run_config('codecept.conf.js', null, true), (err, stdout) => {
+ debug(stdout)
+
+ // HTML Reporter debug messages SHOULD appear in verbose output
+ // Note: Some messages may only appear when certain conditions are met
+ const hasDebugMessages =
+ stdout.includes('HTML Reporter') ||
+ stdout.includes('') // plugin messages use this format
+
+ expect(hasDebugMessages).toBe(true)
+
+ done()
+ })
+ })
+
+ it('should handle artifacts in worker mode', done => {
+ exec(config_run_config('codecept.conf.js') + ' --workers 2', (err, stdout) => {
+ debug(stdout)
+
+ const reportFile = path.join(`${codecept_dir}/configs/html-reporter-plugin`, 'output', 'report.html')
+ const reportContent = fs.readFileSync(reportFile, 'utf8')
+
+ // Check that artifacts section is present
+ expect(reportContent).toContain('artifacts-section')
+
+ // Should have screenshot handling code
+ expect(reportContent).toContain('openImageModal')
+ expect(reportContent).toContain('imageModal')
+
+ done()
+ })
+ })
+
+ it('should consolidate worker results correctly', done => {
+ exec(config_run_config('codecept.conf.js') + ' --workers 2', (err, stdout) => {
+ debug(stdout)
+
+ const outputDir = path.join(`${codecept_dir}/configs/html-reporter-plugin`, 'output')
+
+ // Worker JSON files should be cleaned up after consolidation
+ const files = fs.readdirSync(outputDir)
+ const workerJsonFiles = files.filter(f => f.startsWith('worker-') && f.endsWith('-results.json'))
+ expect(workerJsonFiles.length).toBe(0) // Should be deleted after consolidation
+
+ // Final report should exist
+ const reportFile = path.join(outputDir, 'report.html')
+ expect(fs.existsSync(reportFile)).toBe(true)
+
+ const reportContent = fs.readFileSync(reportFile, 'utf8')
+
+ // All tests should be included
+ expect(reportContent).toContain('test with multiple steps')
+ expect(reportContent).toContain('test that will fail')
+ expect(reportContent).toContain('test that will pass')
+
+ done()
+ })
+ })
+
+ it('should handle test retries and display retry information', done => {
+ // This test assumes there's a config with retries enabled
+ exec(config_run_config('codecept.conf.js', 'test that will fail'), (err, stdout) => {
+ debug(stdout)
+
+ const reportFile = path.join(`${codecept_dir}/configs/html-reporter-plugin`, 'output', 'report.html')
+ const reportContent = fs.readFileSync(reportFile, 'utf8')
+
+ // Check for retry-related elements
+ expect(reportContent).toContain('retry-section')
+ expect(reportContent).toContain('retry-badge')
+ expect(reportContent).toContain('retries')
+ expect(reportContent).toContain('data-retries=')
+
+ done()
+ })
+ })
+
+ it('should apply filters correctly', done => {
+ exec(config_run_config('codecept.conf.js'), (err, stdout) => {
+ debug(stdout)
+
+ const reportFile = path.join(`${codecept_dir}/configs/html-reporter-plugin`, 'output', 'report.html')
+ const reportContent = fs.readFileSync(reportFile, 'utf8')
+
+ // Check for all filter types
+ expect(reportContent).toContain('statusFilter')
+ expect(reportContent).toContain('featureFilter')
+ expect(reportContent).toContain('tagFilter')
+ expect(reportContent).toContain('retryFilter')
+ expect(reportContent).toContain('typeFilter')
+
+ // Check filter functionality
+ expect(reportContent).toContain('function applyFilters()')
+ expect(reportContent).toContain('function resetFilters()')
+ expect(reportContent).toContain('addEventListener(\'change\', applyFilters)')
+
+ // Check data attributes needed for filtering
+ expect(reportContent).toContain('data-status=')
+ expect(reportContent).toContain('data-feature=')
+ expect(reportContent).toContain('data-type=')
+
+ done()
+ })
+ })
+
+ it('should display system information when available', done => {
+ exec(config_run_config('codecept.conf.js'), (err, stdout) => {
+ debug(stdout)
+
+ const reportFile = path.join(`${codecept_dir}/configs/html-reporter-plugin`, 'output', 'report.html')
+ const reportContent = fs.readFileSync(reportFile, 'utf8')
+
+ // Check for system info section
+ expect(reportContent).toContain('system-info-section')
+ expect(reportContent).toContain('Environment Information')
+ expect(reportContent).toContain('toggleSystemInfo')
+
+ done()
+ })
+ })
+
+ it('should handle edge cases: empty tests', done => {
+ // Create a temporary empty test file
+ const emptyTestFile = path.join(`${codecept_dir}/configs/html-reporter-plugin`, 'empty_test.js')
+ fs.writeFileSync(emptyTestFile, 'Feature(\'Empty Feature\')\n\n// No scenarios\n')
+
+ exec(config_run_config('codecept.conf.js', 'Empty Feature'), (err, stdout) => {
+ debug(stdout)
+
+ const reportFile = path.join(`${codecept_dir}/configs/html-reporter-plugin`, 'output', 'report.html')
+
+ // Report should still be generated even with no tests
+ expect(fs.existsSync(reportFile)).toBe(true)
+
+ const reportContent = fs.readFileSync(reportFile, 'utf8')
+ expect(reportContent).toContain('CodeceptJS Test Report')
+
+ // Cleanup
+ fs.unlinkSync(emptyTestFile)
+
+ done()
+ })
+ })
+
+ it('should escape HTML in test names and error messages', done => {
+ exec(config_run_config('codecept.conf.js'), (err, stdout) => {
+ debug(stdout)
+
+ const reportFile = path.join(`${codecept_dir}/configs/html-reporter-plugin`, 'output', 'report.html')
+ const reportContent = fs.readFileSync(reportFile, 'utf8')
+
+ // Check that escapeHtml function exists
+ expect(reportContent).toContain('function escapeHtml(')
+ expect(reportContent).toContain('.replace(/&/g, \'&\')')
+ expect(reportContent).toContain('.replace(//g, \'>\')')
+
+ done()
+ })
+ })
})
diff --git a/test/unit/plugin/htmlReporter_test.js b/test/unit/plugin/htmlReporter_test.js
new file mode 100644
index 000000000..6a3fd8bfe
--- /dev/null
+++ b/test/unit/plugin/htmlReporter_test.js
@@ -0,0 +1,210 @@
+const { expect } = require('expect')
+const fs = require('fs')
+const path = require('path')
+const { exec } = require('child_process')
+
+describe('HTML Reporter Unit Tests', function () {
+ this.timeout(10000)
+
+ let htmlReporter
+
+ before(() => {
+ // Load the HTML reporter module
+ htmlReporter = require('../../lib/plugin/htmlReporter')
+ })
+
+ describe('Feature Name Detection', () => {
+ it('should extract feature name from BDD test', () => {
+ const testObj = {
+ feature: { name: 'Login Feature' },
+ parent: { title: 'Fallback Feature' },
+ suite: { title: 'Suite Feature' },
+ }
+
+ // Feature name should be extracted correctly
+ // This is tested indirectly through the main reporter tests
+ })
+
+ it('should fallback to parent title when BDD feature not available', () => {
+ const testObj = {
+ parent: { title: 'Parent Feature' },
+ suite: { title: 'Suite Feature' },
+ }
+
+ // Should use parent.title
+ })
+
+ it('should fallback to suite title when parent not available', () => {
+ const testObj = {
+ suite: { title: 'Suite Feature' },
+ }
+
+ // Should use suite.title
+ })
+
+ it('should show "Unknown Feature" only as last resort', () => {
+ const testObj = {}
+
+ // Should show "Unknown Feature" only when nothing else is available
+ })
+ })
+
+ describe('HTML Escaping', () => {
+ it('should escape HTML special characters', () => {
+ // The escapeHtml function should be tested
+ const testCases = [
+ { input: '', shouldNotContain: '', shouldNotContain: '