codeceptjs 4.0.0-beta.5 → 4.0.0-beta.7.esm-aria

package/lib/plugin/htmlReporter.js

@@ -1,1947 +0,0 @@
-const fs = require('fs')
-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')
-const Codecept = require('../codecept')
-
-const defaultConfig = {
-  output: global.output_dir || './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,
-}
-
-/**
- * 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
- *    }
- * }
- * ```
- */
-module.exports = function (config) {
-  const options = { ...defaultConfig, ...config }
-  let reportData = {
-    stats: {},
-    tests: [],
-    failures: [],
-    hooks: [],
-    startTime: null,
-    endTime: null,
-    retries: [],
-    config: options,
-  }
-  let currentTestSteps = []
-  let currentTestHooks = []
-  let currentBddSteps = [] // Track BDD/Gherkin steps
-  let testRetryAttempts = new Map() // Track retry attempts per test
-  let currentSuite = null // Track current suite for BDD detection
-
-  // Initialize report directory
-  const reportDir = options.output ? path.resolve(global.codecept_dir, options.output) : path.resolve(global.output_dir || './output')
-  mkdirp.sync(reportDir)
-
-  // Track overall test execution
-  event.dispatcher.on(event.all.before, () => {
-    reportData.startTime = new Date()
-    output.plugin('htmlReporter', 'Starting HTML report generation...')
-  })
-
-  // Track test start to initialize steps and hooks collection
-  event.dispatcher.on(event.test.before, test => {
-    currentTestSteps = []
-    currentTestHooks = []
-    currentBddSteps = []
-
-    // Track current suite for BDD detection
-    currentSuite = test.parent
-
-    // Track retry attempts
-    if (test.retriedTest && test.retriedTest()) {
-      const originalTest = test.retriedTest()
-      const testId = generateTestId(originalTest)
-      if (!testRetryAttempts.has(testId)) {
-        testRetryAttempts.set(testId, 0)
-      }
-      testRetryAttempts.set(testId, testRetryAttempts.get(testId) + 1)
-    }
-  })
-
-  // Collect step information
-  event.dispatcher.on(event.step.started, step => {
-    step.htmlReporterStartTime = Date.now()
-  })
-
-  event.dispatcher.on(event.step.finished, step => {
-    if (step.htmlReporterStartTime) {
-      step.duration = Date.now() - step.htmlReporterStartTime
-    }
-    currentTestSteps.push({
-      name: step.name,
-      actor: step.actor,
-      args: step.args || [],
-      status: step.failed ? 'failed' : 'success',
-      duration: step.duration || 0,
-    })
-  })
-
-  // Collect hook information
-  event.dispatcher.on(event.hook.started, hook => {
-    hook.htmlReporterStartTime = Date.now()
-  })
-
-  event.dispatcher.on(event.hook.finished, hook => {
-    if (hook.htmlReporterStartTime) {
-      hook.duration = Date.now() - hook.htmlReporterStartTime
-    }
-    const hookInfo = {
-      title: hook.title,
-      type: hook.type || 'unknown', // before, after, beforeSuite, afterSuite
-      status: hook.err ? 'failed' : 'passed',
-      duration: hook.duration || 0,
-      error: hook.err ? hook.err.message : null,
-    }
-    currentTestHooks.push(hookInfo)
-    reportData.hooks.push(hookInfo)
-  })
-
-  // Collect BDD/Gherkin step information
-  event.dispatcher.on(event.bddStep.started, step => {
-    step.htmlReporterStartTime = Date.now()
-  })
-
-  event.dispatcher.on(event.bddStep.finished, step => {
-    if (step.htmlReporterStartTime) {
-      step.duration = Date.now() - step.htmlReporterStartTime
-    }
-    currentBddSteps.push({
-      keyword: step.actor || 'Given',
-      text: step.name,
-      status: step.failed ? 'failed' : 'success',
-      duration: step.duration || 0,
-      comment: step.comment,
-    })
-  })
-
-  // Collect test results
-  event.dispatcher.on(event.test.finished, test => {
-    const testId = generateTestId(test)
-    const retryAttempts = testRetryAttempts.get(testId) || 0
-
-    // Detect if this is a BDD/Gherkin test
-    const isBddTest = isBddGherkinTest(test, currentSuite)
-    const steps = isBddTest ? currentBddSteps : currentTestSteps
-    const featureInfo = isBddTest ? getBddFeatureInfo(test, currentSuite) : null
-
-    reportData.tests.push({
-      ...test,
-      id: testId,
-      duration: test.duration || 0,
-      steps: [...steps], // Copy the steps (BDD or regular)
-      hooks: [...currentTestHooks], // Copy the hooks
-      artifacts: test.artifacts || [],
-      tags: test.tags || [],
-      meta: test.meta || {},
-      opts: test.opts || {},
-      notes: test.notes || [],
-      retryAttempts: retryAttempts,
-      uid: test.uid,
-      isBdd: isBddTest,
-      feature: featureInfo,
-    })
-
-    // If this was a retry, track the retry information
-    if (retryAttempts > 0) {
-      reportData.retries.push({
-        testId: testId,
-        testTitle: test.title,
-        attempts: retryAttempts,
-        finalState: test.state,
-        duration: test.duration || 0,
-      })
-    }
-  })
-
-  // Generate final report
-  event.dispatcher.on(event.all.result, result => {
-    reportData.endTime = new Date()
-    reportData.stats = result.stats
-    reportData.failures = result.failures || []
-    reportData.duration = reportData.endTime - reportData.startTime
-
-    generateHtmlReport(reportData, options)
-
-    // Export stats if configured
-    if (options.exportStats) {
-      exportTestStats(reportData, options)
-    }
-
-    // Save history if configured
-    if (options.keepHistory) {
-      saveTestHistory(reportData, options)
-    }
-  })
-
-  function generateTestId(test) {
-    return crypto
-      .createHash('sha256')
-      .update(`${test.parent?.title || 'unknown'}_${test.title}`)
-      .digest('hex')
-      .substring(0, 8)
-  }
-
-  function isBddGherkinTest(test, suite) {
-    // Check if the suite has BDD/Gherkin properties
-    return !!(suite && (suite.feature || suite.file?.endsWith('.feature')))
-  }
-
-  function getBddFeatureInfo(test, suite) {
-    if (!suite) return null
-
-    return {
-      name: suite.feature?.name || suite.title,
-      description: suite.feature?.description || suite.comment || '',
-      language: suite.feature?.language || 'en',
-      tags: suite.tags || [],
-      file: suite.file || '',
-    }
-  }
-
-  function exportTestStats(data, config) {
-    const statsPath = path.resolve(reportDir, config.exportStatsPath)
-
-    const exportData = {
-      timestamp: data.endTime.toISOString(),
-      duration: data.duration,
-      stats: data.stats,
-      retries: data.retries,
-      testCount: data.tests.length,
-      passedTests: data.tests.filter(t => t.state === 'passed').length,
-      failedTests: data.tests.filter(t => t.state === 'failed').length,
-      pendingTests: data.tests.filter(t => t.state === 'pending').length,
-      tests: data.tests.map(test => ({
-        id: test.id,
-        title: test.title,
-        feature: test.parent?.title || 'Unknown',
-        state: test.state,
-        duration: test.duration,
-        tags: test.tags,
-        meta: test.meta,
-        retryAttempts: test.retryAttempts,
-        uid: test.uid,
-      })),
-    }
-
-    try {
-      fs.writeFileSync(statsPath, JSON.stringify(exportData, null, 2))
-      output.print(`Test stats exported to: ${statsPath}`)
-    } catch (error) {
-      output.print(`Failed to export test stats: ${error.message}`)
-    }
-  }
-
-  function saveTestHistory(data, config) {
-    const historyPath = path.resolve(reportDir, config.historyPath)
-    let history = []
-
-    // Load existing history
-    try {
-      if (fs.existsSync(historyPath)) {
-        history = JSON.parse(fs.readFileSync(historyPath, 'utf8'))
-      }
-    } catch (error) {
-      output.print(`Failed to load existing history: ${error.message}`)
-    }
-
-    // Add current run to history
-    history.unshift({
-      timestamp: data.endTime.toISOString(),
-      duration: data.duration,
-      stats: data.stats,
-      retries: data.retries.length,
-      testCount: data.tests.length,
-    })
-
-    // Limit history entries
-    if (history.length > config.maxHistoryEntries) {
-      history = history.slice(0, config.maxHistoryEntries)
-    }
-
-    try {
-      fs.writeFileSync(historyPath, JSON.stringify(history, null, 2))
-      output.print(`Test history saved to: ${historyPath}`)
-    } catch (error) {
-      output.print(`Failed to save test history: ${error.message}`)
-    }
-  }
-
-  async function generateHtmlReport(data, config) {
-    const reportPath = path.join(reportDir, config.reportFileName)
-
-    // Load history if available
-    let history = []
-    if (config.keepHistory) {
-      const historyPath = path.resolve(reportDir, config.historyPath)
-      try {
-        if (fs.existsSync(historyPath)) {
-          history = JSON.parse(fs.readFileSync(historyPath, 'utf8')).slice(0, 10) // Last 10 runs for chart
-        }
-      } catch (error) {
-        output.print(`Failed to load history for report: ${error.message}`)
-      }
-    }
-
-    // Get system information
-    const systemInfo = await getMachineInfo()
-
-    const html = template(getHtmlTemplate(), {
-      title: `CodeceptJS Test Report v${Codecept.version()}`,
-      timestamp: data.endTime.toISOString(),
-      duration: formatDuration(data.duration),
-      stats: JSON.stringify(data.stats),
-      history: JSON.stringify(history),
-      statsHtml: generateStatsHtml(data.stats),
-      testsHtml: generateTestsHtml(data.tests, config),
-      failuresHtml: generateFailuresHtml(data.failures),
-      retriesHtml: config.showRetries ? generateRetriesHtml(data.retries) : '',
-      cssStyles: getCssStyles(),
-      jsScripts: getJsScripts(),
-      showRetries: config.showRetries ? 'block' : 'none',
-      showHistory: config.keepHistory && history.length > 0 ? 'block' : 'none',
-      failuresDisplay: data.failures && data.failures.length > 0 ? 'block' : 'none',
-      codeceptVersion: Codecept.version(),
-      systemInfoHtml: generateSystemInfoHtml(systemInfo),
-    })
-
-    fs.writeFileSync(reportPath, html)
-    output.print(`HTML Report saved to: ${reportPath}`)
-  }
-
-  function generateStatsHtml(stats) {
-    const passed = stats.passes || 0
-    const failed = stats.failures || 0
-    const pending = stats.pending || 0
-    const total = stats.tests || 0
-
-    return `
-      <div class="stats-cards">
-        <div class="stat-card total">
-          <h3>Total</h3>
-          <span class="stat-number">${total}</span>
-        </div>
-        <div class="stat-card passed">
-          <h3>Passed</h3>
-          <span class="stat-number">${passed}</span>
-        </div>
-        <div class="stat-card failed">
-          <h3>Failed</h3>
-          <span class="stat-number">${failed}</span>
-        </div>
-        <div class="stat-card pending">
-          <h3>Pending</h3>
-          <span class="stat-number">${pending}</span>
-        </div>
-      </div>
-      <div class="pie-chart-container">
-        <canvas id="statsChart" width="300" height="300"></canvas>
-        <script>
-          // Pie chart data will be rendered by JavaScript
-          window.chartData = {
-            passed: ${passed},
-            failed: ${failed},
-            pending: ${pending}
-          };
-        </script>
-      </div>
-    `
-  }
-
-  function generateTestsHtml(tests, config) {
-    if (!tests || tests.length === 0) {
-      return '<p>No tests found.</p>'
-    }
-
-    return tests
-      .map(test => {
-        const statusClass = test.state || 'unknown'
-        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) : ''
-        const artifacts = config.includeArtifacts && test.artifacts ? generateArtifactsHtml(test.artifacts) : ''
-        const metadata = config.showMetadata && (test.meta || test.opts) ? generateMetadataHtml(test.meta, test.opts) : ''
-        const tags = config.showTags && test.tags && test.tags.length > 0 ? generateTagsHtml(test.tags) : ''
-        const retries = config.showRetries && test.retryAttempts > 0 ? generateTestRetryHtml(test.retryAttempts) : ''
-        const notes = test.notes && test.notes.length > 0 ? generateNotesHtml(test.notes) : ''
-
-        return `
-        <div class="test-item ${statusClass}${test.isBdd ? ' bdd-test' : ''}" id="test-${test.id}" data-feature="${escapeHtml(feature)}" data-status="${statusClass}" data-tags="${(test.tags || []).join(',')}" data-retries="${test.retryAttempts || 0}" data-type="${test.isBdd ? 'bdd' : 'regular'}">
-          <div class="test-header" onclick="toggleTestDetails('test-${test.id}')">
-            <span class="test-status ${statusClass}">●</span>
-            <div class="test-info">
-              <h3 class="test-title">${test.isBdd ? `Scenario: ${test.title}` : test.title}</h3>
-              <div class="test-meta-line">
-                <span class="test-feature">${test.isBdd ? 'Feature: ' : ''}${feature}</span>
-                ${test.uid ? `<span class="test-uid">${test.uid}</span>` : ''}
-                <span class="test-duration">${formatDuration(test.duration)}</span>
-                ${test.retryAttempts > 0 ? `<span class="retry-badge">${test.retryAttempts} retries</span>` : ''}
-                ${test.isBdd ? '<span class="bdd-badge">Gherkin</span>' : ''}
-              </div>
-            </div>
-          </div>
-          <div class="test-details" id="details-test-${test.id}">
-            ${test.err ? `<div class="error-message"><pre>${escapeHtml(test.err.message || '').replace(/\x1b\[[0-9;]*m/g, '')}</pre></div>` : ''}
-            ${featureDetails}
-            ${tags}
-            ${metadata}
-            ${retries}
-            ${notes}
-            ${hooks}
-            ${steps}
-            ${artifacts}
-          </div>
-        </div>
-      `
-      })
-      .join('')
-  }
-
-  function generateStepsHtml(steps) {
-    if (!steps || steps.length === 0) return ''
-
-    const stepsHtml = steps
-      .map(step => {
-        const statusClass = step.status || 'unknown'
-        const args = step.args ? step.args.map(arg => JSON.stringify(arg)).join(', ') : ''
-        const stepName = step.name || 'unknown step'
-        const actor = step.actor || 'I'
-
-        return `
-        <div class="step-item ${statusClass}">
-          <span class="step-status ${statusClass}">●</span>
-          <span class="step-title">${actor}.${stepName}(${args})</span>
-          <span class="step-duration">${formatDuration(step.duration)}</span>
-        </div>
-      `
-      })
-      .join('')
-
-    return `
-      <div class="steps-section">
-        <h4>Steps:</h4>
-        <div class="steps-list">${stepsHtml}</div>
-      </div>
-    `
-  }
-
-  function generateBddStepsHtml(steps) {
-    if (!steps || steps.length === 0) return ''
-
-    const stepsHtml = steps
-      .map(step => {
-        const statusClass = step.status || 'unknown'
-        const keyword = step.keyword || 'Given'
-        const text = step.text || ''
-        const comment = step.comment ? `<div class="step-comment">${escapeHtml(step.comment)}</div>` : ''
-
-        return `
-        <div class="bdd-step-item ${statusClass}">
-          <span class="step-status ${statusClass}">●</span>
-          <span class="bdd-keyword">${keyword}</span>
-          <span class="bdd-step-text">${escapeHtml(text)}</span>
-          <span class="step-duration">${formatDuration(step.duration)}</span>
-          ${comment}
-        </div>
-      `
-      })
-      .join('')
-
-    return `
-      <div class="bdd-steps-section">
-        <h4>Scenario Steps:</h4>
-        <div class="bdd-steps-list">${stepsHtml}</div>
-      </div>
-    `
-  }
-
-  function generateBddFeatureHtml(feature) {
-    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>` : ''
-
-    return `
-      <div class="bdd-feature-section">
-        <h4>Feature Information:</h4>
-        <div class="feature-info">
-          <div class="feature-name">Feature: ${escapeHtml(feature.name)}</div>
-          ${description}
-          ${featureTags}
-          ${feature.file ? `<div class="feature-file">File: ${escapeHtml(feature.file)}</div>` : ''}
-        </div>
-      </div>
-    `
-  }
-
-  function generateHooksHtml(hooks) {
-    if (!hooks || hooks.length === 0) return ''
-
-    const hooksHtml = hooks
-      .map(hook => {
-        const statusClass = hook.status || 'unknown'
-        const hookType = hook.type || 'hook'
-        const hookTitle = hook.title || `${hookType} hook`
-
-        return `
-        <div class="hook-item ${statusClass}">
-          <span class="hook-status ${statusClass}">●</span>
-          <span class="hook-title">${hookType}: ${hookTitle}</span>
-          <span class="hook-duration">${formatDuration(hook.duration)}</span>
-          ${hook.error ? `<div class="hook-error">${escapeHtml(hook.error)}</div>` : ''}
-        </div>
-      `
-      })
-      .join('')
-
-    return `
-      <div class="hooks-section">
-        <h4>Hooks:</h4>
-        <div class="hooks-list">${hooksHtml}</div>
-      </div>
-    `
-  }
-
-  function generateMetadataHtml(meta, opts) {
-    const allMeta = { ...(opts || {}), ...(meta || {}) }
-    if (!allMeta || Object.keys(allMeta).length === 0) return ''
-
-    const metaHtml = Object.entries(allMeta)
-      .filter(([key, value]) => value !== undefined && value !== null)
-      .map(([key, value]) => {
-        const displayValue = typeof value === 'object' ? JSON.stringify(value) : value.toString()
-        return `<div class="meta-item"><span class="meta-key">${escapeHtml(key)}:</span> <span class="meta-value">${escapeHtml(displayValue)}</span></div>`
-      })
-      .join('')
-
-    return `
-      <div class="metadata-section">
-        <h4>Metadata:</h4>
-        <div class="metadata-list">${metaHtml}</div>
-      </div>
-    `
-  }
-
-  function generateTagsHtml(tags) {
-    if (!tags || tags.length === 0) return ''
-
-    const tagsHtml = tags.map(tag => `<span class="test-tag">${escapeHtml(tag)}</span>`).join('')
-
-    return `
-      <div class="tags-section">
-        <h4>Tags:</h4>
-        <div class="tags-list">${tagsHtml}</div>
-      </div>
-    `
-  }
-
-  function generateNotesHtml(notes) {
-    if (!notes || notes.length === 0) return ''
-
-    const notesHtml = notes.map(note => `<div class="note-item note-${note.type || 'info'}"><span class="note-type">${note.type || 'info'}:</span> <span class="note-text">${escapeHtml(note.text)}</span></div>`).join('')
-
-    return `
-      <div class="notes-section">
-        <h4>Notes:</h4>
-        <div class="notes-list">${notesHtml}</div>
-      </div>
-    `
-  }
-
-  function generateTestRetryHtml(retryAttempts) {
-    return `
-      <div class="retry-section">
-        <h4>Retry Information:</h4>
-        <div class="retry-info">
-          <span class="retry-count">Total retry attempts: <strong>${retryAttempts}</strong></span>
-        </div>
-      </div>
-    `
-  }
-
-  function generateArtifactsHtml(artifacts) {
-    if (!artifacts || artifacts.length === 0) return ''
-
-    const artifactsHtml = artifacts
-      .map(artifact => {
-        if (typeof artifact === 'string' && artifact.match(/\.(png|jpg|jpeg|gif)$/i)) {
-          const relativePath = path.relative(reportDir, artifact)
-          return `<img src="${relativePath}" alt="Screenshot" class="artifact-image" onclick="openImageModal(this.src)"/>`
-        }
-        return `<div class="artifact-item">${escapeHtml(artifact.toString())}</div>`
-      })
-      .join('')
-
-    return `
-      <div class="artifacts-section">
-        <h4>Artifacts:</h4>
-        <div class="artifacts-list">${artifactsHtml}</div>
-      </div>
-    `
-  }
-
-  function generateFailuresHtml(failures) {
-    if (!failures || failures.length === 0) {
-      return '<p>No failures.</p>'
-    }
-
-    return failures
-      .map((failure, index) => {
-        const failureText = failure.toString().replace(/\x1b\[[0-9;]*m/g, '') // Remove ANSI escape codes
-        return `
-        <div class="failure-item">
-          <h4>Failure ${index + 1}</h4>
-          <pre class="failure-details">${escapeHtml(failureText)}</pre>
-        </div>
-      `
-      })
-      .join('')
-  }
-
-  function generateRetriesHtml(retries) {
-    if (!retries || retries.length === 0) {
-      return '<p>No retried tests.</p>'
-    }
-
-    return retries
-      .map(
-        retry => `
-        <div class="retry-item">
-          <h4>${retry.testTitle}</h4>
-          <div class="retry-details">
-            <span>Attempts: <strong>${retry.attempts}</strong></span>
-            <span>Final State: <span class="status-badge ${retry.finalState}">${retry.finalState}</span></span>
-            <span>Duration: ${formatDuration(retry.duration)}</span>
-          </div>
-        </div>
-      `,
-      )
-      .join('')
-  }
-
-  function formatDuration(duration) {
-    if (!duration) return '0ms'
-    if (duration < 1000) return `${duration}ms`
-    return `${(duration / 1000).toFixed(2)}s`
-  }
-
-  function escapeHtml(unsafe) {
-    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>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{{title}}</title>
-    <style>{{cssStyles}}</style>
-</head>
-<body>
-    <header class="report-header">
-        <h1>{{title}}</h1>
-        <div class="report-meta">
-            <span>Generated: {{timestamp}}</span>
-            <span>Duration: {{duration}}</span>
-        </div>
-    </header>
-
-    <main class="report-content">
-        {{systemInfoHtml}}
-
-        <section class="stats-section">
-            <h2>Test Statistics</h2>
-            {{statsHtml}}
-        </section>
-
-        <section class="history-section" style="display: {{showHistory}};">
-            <h2>Test History</h2>
-            <div class="history-chart-container">
-                <canvas id="historyChart" width="800" height="300"></canvas>
-            </div>
-        </section>
-
-        <section class="filters-section">
-            <h2>Filters</h2>
-            <div class="filter-controls">
-                <div class="filter-group">
-                    <label>Status:</label>
-                    <select id="statusFilter" multiple>
-                        <option value="passed">Passed</option>
-                        <option value="failed">Failed</option>
-                        <option value="pending">Pending</option>
-                        <option value="skipped">Skipped</option>
-                    </select>
-                </div>
-                <div class="filter-group">
-                    <label>Feature:</label>
-                    <input type="text" id="featureFilter" placeholder="Filter by feature...">
-                </div>
-                <div class="filter-group">
-                    <label>Tags:</label>
-                    <input type="text" id="tagFilter" placeholder="Filter by tags...">
-                </div>
-                <div class="filter-group">
-                    <label>Retries:</label>
-                    <select id="retryFilter">
-                        <option value="all">All</option>
-                        <option value="retried">With Retries</option>
-                        <option value="no-retries">No Retries</option>
-                    </select>
-                </div>
-                <div class="filter-group">
-                    <label>Test Type:</label>
-                    <select id="typeFilter">
-                        <option value="all">All</option>
-                        <option value="bdd">BDD/Gherkin</option>
-                        <option value="regular">Regular</option>
-                    </select>
-                </div>
-                <button onclick="resetFilters()">Reset Filters</button>
-            </div>
-        </section>
-
-        <section class="tests-section">
-            <h2>Test Results</h2>
-            <div class="tests-container">
-                {{testsHtml}}
-            </div>
-        </section>
-
-        <section class="retries-section" style="display: {{showRetries}};">
-            <h2>Test Retries</h2>
-            <div class="retries-container">
-                {{retriesHtml}}
-            </div>
-        </section>
-
-        <section class="failures-section" style="display: {{failuresDisplay}};">
-            <h2>Failures</h2>
-            <div class="failures-container">
-                {{failuresHtml}}
-            </div>
-        </section>
-    </main>
-
-    <!-- Modal for images -->
-    <div id="imageModal" class="modal" onclick="closeImageModal()">
-        <img id="modalImage" src="" alt="Enlarged screenshot"/>
-    </div>
-
-    <script>
-        window.testData = {
-            stats: {{stats}},
-            history: {{history}}
-        };
-    </script>
-    <script>{{jsScripts}}</script>
-</body>
-</html>
-    `
-  }
-
-  function getCssStyles() {
-    return `
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-body {
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    line-height: 1.6;
-    color: #333;
-    background-color: #f5f5f5;
-}
-
-.report-header {
-    background: #2c3e50;
-    color: white;
-    padding: 2rem 1rem;
-    text-align: center;
-}
-
-.report-header h1 {
-    margin-bottom: 0.5rem;
-    font-size: 2.5rem;
-}
-
-.report-meta {
-    font-size: 0.9rem;
-    opacity: 0.8;
-}
-
-.report-meta span {
-    margin: 0 1rem;
-}
-
-.report-content {
-    max-width: 1200px;
-    margin: 2rem auto;
-    padding: 0 1rem;
-}
-
-.stats-section, .tests-section, .failures-section, .retries-section, .filters-section, .history-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;
-}
-
-.stats-section h2, .tests-section h2, .failures-section h2, .retries-section h2, .filters-section h2, .history-section h2 {
-    background: #34495e;
-    color: white;
-    padding: 1rem;
-    margin: 0;
-}
-
-.stats-cards {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 1rem;
-    padding: 1rem;
-}
-
-.stat-card {
-    flex: 1;
-    min-width: 150px;
-    padding: 1rem;
-    text-align: center;
-    border-radius: 4px;
-    color: white;
-}
-
-.stat-card.total { background: #3498db; }
-.stat-card.passed { background: #27ae60; }
-.stat-card.failed { background: #e74c3c; }
-.stat-card.pending { background: #f39c12; }
-
-.stat-card h3 {
-    font-size: 0.9rem;
-    margin-bottom: 0.5rem;
-}
-
-.stat-number {
-    font-size: 2rem;
-    font-weight: bold;
-}
-
-.pie-chart-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 2rem 1rem;
-    background: white;
-    margin: 1rem 0;
-    border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-}
-
-#statsChart {
-    max-width: 100%;
-    height: auto;
-}
-
-.test-item {
-    border-bottom: 1px solid #eee;
-    margin: 0;
-}
-
-.test-item:last-child {
-    border-bottom: none;
-}
-
-.test-header {
-    display: flex;
-    align-items: center;
-    padding: 1rem;
-    cursor: pointer;
-    transition: background-color 0.2s;
-}
-
-.test-header:hover {
-    background-color: #f8f9fa;
-}
-
-.test-info {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
-}
-
-.test-meta-line {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    font-size: 0.9rem;
-}
-
-.test-status {
-    font-size: 1.2rem;
-    margin-right: 0.5rem;
-}
-
-.test-status.passed { color: #27ae60; }
-.test-status.failed { color: #e74c3c; }
-.test-status.pending { color: #f39c12; }
-.test-status.skipped { color: #95a5a6; }
-
-.test-title {
-    font-size: 1.1rem;
-    font-weight: 500;
-    margin: 0;
-}
-
-.test-feature {
-    background: #ecf0f1;
-    padding: 0.25rem 0.5rem;
-    border-radius: 4px;
-    font-size: 0.8rem;
-    color: #34495e;
-}
-
-.test-uid {
-    background: #e8f4fd;
-    padding: 0.25rem 0.5rem;
-    border-radius: 4px;
-    font-size: 0.7rem;
-    color: #2980b9;
-    font-family: monospace;
-}
-
-.retry-badge {
-    background: #f39c12;
-    color: white;
-    padding: 0.25rem 0.5rem;
-    border-radius: 4px;
-    font-size: 0.7rem;
-    font-weight: bold;
-}
-
-.test-duration {
-    font-size: 0.8rem;
-    color: #7f8c8d;
-}
-
-.test-details {
-    display: none;
-    padding: 1rem;
-    background: #f8f9fa;
-    border-top: 1px solid #e9ecef;
-}
-
-.error-message {
-    background: #fee;
-    border: 1px solid #fcc;
-    border-radius: 4px;
-    padding: 1rem;
-    margin-bottom: 1rem;
-}
-
-.error-message pre {
-    color: #c0392b;
-    font-family: 'Courier New', monospace;
-    font-size: 0.9rem;
-    white-space: pre-wrap;
-    word-wrap: break-word;
-}
-
-.steps-section, .artifacts-section, .hooks-section {
-    margin-top: 1rem;
-}
-
-.steps-section h4, .artifacts-section h4, .hooks-section h4 {
-    color: #34495e;
-    margin-bottom: 0.5rem;
-    font-size: 1rem;
-}
-
-.hook-item {
-    display: flex;
-    align-items: center;
-    padding: 0.5rem 0;
-    border-bottom: 1px solid #ecf0f1;
-}
-
-.hook-item:last-child {
-    border-bottom: none;
-}
-
-.hook-status {
-    margin-right: 0.5rem;
-}
-
-.hook-status.passed { color: #27ae60; }
-.hook-status.failed { color: #e74c3c; }
-
-.hook-title {
-    flex: 1;
-    font-family: 'Courier New', monospace;
-    font-size: 0.9rem;
-    font-weight: bold;
-}
-
-.hook-duration {
-    font-size: 0.8rem;
-    color: #7f8c8d;
-}
-
-.hook-error {
-    width: 100%;
-    margin-top: 0.5rem;
-    padding: 0.5rem;
-    background: #fee;
-    border: 1px solid #fcc;
-    border-radius: 4px;
-    color: #c0392b;
-    font-size: 0.8rem;
-}
-
-.step-item {
-    display: flex;
-    align-items: center;
-    padding: 0.5rem 0;
-    border-bottom: 1px solid #ecf0f1;
-}
-
-.step-item:last-child {
-    border-bottom: none;
-}
-
-.step-status {
-    margin-right: 0.5rem;
-}
-
-.step-status.success { color: #27ae60; }
-.step-status.failed { color: #e74c3c; }
-
-.step-title {
-    flex: 1;
-    font-family: 'Courier New', monospace;
-    font-size: 0.9rem;
-}
-
-.step-duration {
-    font-size: 0.8rem;
-    color: #7f8c8d;
-}
-
-.artifacts-list {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-}
-
-.artifact-image {
-    max-width: 200px;
-    max-height: 150px;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    cursor: pointer;
-    transition: transform 0.2s;
-}
-
-.artifact-image:hover {
-    transform: scale(1.05);
-}
-
-.artifact-item {
-    background: #ecf0f1;
-    padding: 0.5rem;
-    border-radius: 4px;
-    font-size: 0.9rem;
-}
-
-.modal {
-    display: none;
-    position: fixed;
-    z-index: 1000;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0,0,0,0.8);
-    cursor: pointer;
-}
-
-.modal img {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    max-width: 90%;
-    max-height: 90%;
-    border-radius: 4px;
-}
-
-.failure-item {
-    padding: 1rem;
-    margin-bottom: 1rem;
-    border: 1px solid #fcc;
-    border-radius: 4px;
-    background: #fee;
-}
-
-.failure-item h4 {
-    color: #c0392b;
-    margin-bottom: 0.5rem;
-}
-
-.failure-details {
-    color: #333;
-    font-family: 'Courier New', monospace;
-    font-size: 0.9rem;
-    white-space: pre-wrap;
-    word-wrap: break-word;
-}
-
-/* Filter Controls */
-.filter-controls {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 1rem;
-    padding: 1rem;
-    background: #f8f9fa;
-}
-
-.filter-group {
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
-}
-
-.filter-group label {
-    font-size: 0.9rem;
-    font-weight: 500;
-    color: #34495e;
-}
-
-.filter-group input,
-.filter-group select {
-    padding: 0.5rem;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    font-size: 0.9rem;
-    min-width: 150px;
-}
-
-.filter-group select[multiple] {
-    height: auto;
-    min-height: 80px;
-}
-
-.filter-controls button {
-    padding: 0.5rem 1rem;
-    background: #3498db;
-    color: white;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 0.9rem;
-    align-self: flex-end;
-}
-
-.filter-controls button:hover {
-    background: #2980b9;
-}
-
-/* Test Tags */
-.tags-section, .metadata-section, .notes-section, .retry-section {
-    margin-top: 1rem;
-}
-
-.tags-list {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-}
-
-.test-tag {
-    background: #3498db;
-    color: white;
-    padding: 0.25rem 0.5rem;
-    border-radius: 12px;
-    font-size: 0.8rem;
-}
-
-/* Metadata */
-.metadata-list {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-}
-
-.meta-item {
-    padding: 0.5rem;
-    background: #f8f9fa;
-    border-radius: 4px;
-    border-left: 3px solid #3498db;
-}
-
-.meta-key {
-    font-weight: bold;
-    color: #2c3e50;
-}
-
-.meta-value {
-    color: #34495e;
-    font-family: monospace;
-}
-
-/* Notes */
-.notes-list {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-}
-
-.note-item {
-    padding: 0.5rem;
-    border-radius: 4px;
-    border-left: 3px solid #95a5a6;
-}
-
-.note-item.note-info {
-    background: #e8f4fd;
-    border-left-color: #3498db;
-}
-
-.note-item.note-warning {
-    background: #fef9e7;
-    border-left-color: #f39c12;
-}
-
-.note-item.note-error {
-    background: #fee;
-    border-left-color: #e74c3c;
-}
-
-.note-item.note-retry {
-    background: #f0f8e8;
-    border-left-color: #27ae60;
-}
-
-.note-type {
-    font-weight: bold;
-    text-transform: uppercase;
-    font-size: 0.8rem;
-}
-
-/* Retry Information */
-.retry-info {
-    padding: 0.5rem;
-    background: #fef9e7;
-    border-radius: 4px;
-    border-left: 3px solid #f39c12;
-}
-
-.retry-count {
-    color: #d68910;
-    font-weight: 500;
-}
-
-/* Retries Section */
-.retry-item {
-    padding: 1rem;
-    margin-bottom: 1rem;
-    border: 1px solid #f39c12;
-    border-radius: 4px;
-    background: #fef9e7;
-}
-
-.retry-item h4 {
-    color: #d68910;
-    margin-bottom: 0.5rem;
-}
-
-.retry-details {
-    display: flex;
-    gap: 1rem;
-    align-items: center;
-    font-size: 0.9rem;
-}
-
-.status-badge {
-    padding: 0.25rem 0.5rem;
-    border-radius: 4px;
-    font-size: 0.8rem;
-    font-weight: bold;
-    text-transform: uppercase;
-}
-
-.status-badge.passed {
-    background: #27ae60;
-    color: white;
-}
-
-.status-badge.failed {
-    background: #e74c3c;
-    color: white;
-}
-
-.status-badge.pending {
-    background: #f39c12;
-    color: white;
-}
-
-/* History Chart */
-.history-chart-container {
-    padding: 2rem 1rem;
-    display: flex;
-    justify-content: center;
-}
-
-#historyChart {
-    max-width: 100%;
-    height: auto;
-}
-
-/* Hidden items for filtering */
-.test-item.filtered-out {
-    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;
-}
-
-.bdd-badge {
-    background: #8e44ad;
-    color: white;
-    padding: 0.25rem 0.5rem;
-    border-radius: 4px;
-    font-size: 0.7rem;
-    font-weight: bold;
-}
-
-.bdd-feature-section {
-    margin-top: 1rem;
-    padding: 1rem;
-    background: #f8f9fa;
-    border-left: 4px solid #8e44ad;
-    border-radius: 4px;
-}
-
-.feature-name {
-    font-weight: bold;
-    font-size: 1.1rem;
-    color: #8e44ad;
-    margin-bottom: 0.5rem;
-}
-
-.feature-description {
-    color: #34495e;
-    font-style: italic;
-    margin: 0.5rem 0;
-    padding: 0.5rem;
-    background: white;
-    border-radius: 4px;
-}
-
-.feature-file {
-    font-size: 0.8rem;
-    color: #7f8c8d;
-    margin-top: 0.5rem;
-}
-
-.feature-tags {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.25rem;
-    margin: 0.5rem 0;
-}
-
-.feature-tag {
-    background: #8e44ad;
-    color: white;
-    padding: 0.2rem 0.4rem;
-    border-radius: 8px;
-    font-size: 0.7rem;
-}
-
-.bdd-steps-section {
-    margin-top: 1rem;
-}
-
-.bdd-steps-section h4 {
-    color: #8e44ad;
-    margin-bottom: 0.5rem;
-    font-size: 1rem;
-}
-
-.bdd-step-item {
-    display: flex;
-    align-items: flex-start;
-    padding: 0.5rem 0;
-    border-bottom: 1px solid #ecf0f1;
-    font-family: 'Segoe UI', sans-serif;
-}
-
-.bdd-step-item:last-child {
-    border-bottom: none;
-}
-
-.bdd-keyword {
-    font-weight: bold;
-    color: #8e44ad;
-    margin-right: 0.5rem;
-    min-width: 60px;
-    text-align: left;
-}
-
-.bdd-step-text {
-    flex: 1;
-    color: #2c3e50;
-    margin-right: 0.5rem;
-}
-
-.step-comment {
-    width: 100%;
-    margin-top: 0.5rem;
-    padding: 0.5rem;
-    background: #f8f9fa;
-    border: 1px solid #e9ecef;
-    border-radius: 4px;
-    color: #6c757d;
-    font-family: 'Courier New', monospace;
-    font-size: 0.8rem;
-    white-space: pre-wrap;
-}
-
-@media (max-width: 768px) {
-    .stats-cards {
-        flex-direction: column;
-    }
-    
-    .test-header {
-        flex-direction: column;
-        align-items: stretch;
-        gap: 0.5rem;
-    }
-    
-    .test-feature, .test-duration {
-        align-self: flex-start;
-    }
-}
-    `
-  }
-
-  function getJsScripts() {
-    return `
-function toggleTestDetails(testId) {
-    const details = document.getElementById('details-' + testId);
-    if (details.style.display === 'none' || details.style.display === '') {
-        details.style.display = 'block';
-    } else {
-        details.style.display = 'none';
-    }
-}
-
-function openImageModal(src) {
-    const modal = document.getElementById('imageModal');
-    const modalImg = document.getElementById('modalImage');
-    modalImg.src = src;
-    modal.style.display = 'block';
-}
-
-function closeImageModal() {
-    const modal = document.getElementById('imageModal');
-    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);
-    const featureFilter = document.getElementById('featureFilter').value.toLowerCase();
-    const tagFilter = document.getElementById('tagFilter').value.toLowerCase();
-    const retryFilter = document.getElementById('retryFilter').value;
-    const typeFilter = document.getElementById('typeFilter').value;
-
-    const testItems = document.querySelectorAll('.test-item');
-
-    testItems.forEach(item => {
-        let shouldShow = true;
-
-        // Status filter
-        if (statusFilter.length > 0) {
-            const testStatus = item.dataset.status;
-            if (!statusFilter.includes(testStatus)) {
-                shouldShow = false;
-            }
-        }
-
-        // Feature filter
-        if (featureFilter && shouldShow) {
-            const feature = (item.dataset.feature || '').toLowerCase();
-            if (!feature.includes(featureFilter)) {
-                shouldShow = false;
-            }
-        }
-
-        // Tag filter
-        if (tagFilter && shouldShow) {
-            const tags = (item.dataset.tags || '').toLowerCase();
-            if (!tags.includes(tagFilter)) {
-                shouldShow = false;
-            }
-        }
-
-        // Retry filter
-        if (retryFilter !== 'all' && shouldShow) {
-            const retries = parseInt(item.dataset.retries || '0');
-            if (retryFilter === 'retried' && retries === 0) {
-                shouldShow = false;
-            } else if (retryFilter === 'no-retries' && retries > 0) {
-                shouldShow = false;
-            }
-        }
-
-        // Test type filter (BDD/Gherkin vs Regular)
-        if (typeFilter !== 'all' && shouldShow) {
-            const testType = item.dataset.type || 'regular';
-            if (typeFilter !== testType) {
-                shouldShow = false;
-            }
-        }
-
-        if (shouldShow) {
-            item.classList.remove('filtered-out');
-        } else {
-            item.classList.add('filtered-out');
-        }
-    });
-
-    updateFilteredStats();
-}
-
-function resetFilters() {
-    document.getElementById('statusFilter').selectedIndex = -1;
-    document.getElementById('featureFilter').value = '';
-    document.getElementById('tagFilter').value = '';
-    document.getElementById('retryFilter').value = 'all';
-    document.getElementById('typeFilter').value = 'all';
-    
-    document.querySelectorAll('.test-item').forEach(item => {
-        item.classList.remove('filtered-out');
-    });
-
-    updateFilteredStats();
-}
-
-function updateFilteredStats() {
-    const visibleTests = document.querySelectorAll('.test-item:not(.filtered-out)');
-    const totalVisible = visibleTests.length;
-    
-    // Update the title to show filtered count
-    const testsSection = document.querySelector('.tests-section h2');
-    const totalTests = document.querySelectorAll('.test-item').length;
-    
-    if (totalVisible !== totalTests) {
-        testsSection.textContent = 'Test Results (' + totalVisible + ' of ' + totalTests + ' shown)';
-    } else {
-        testsSection.textContent = 'Test Results';
-    }
-}
-
-// Draw pie chart using canvas
-function drawPieChart() {
-    const canvas = document.getElementById('statsChart');
-    if (!canvas) return;
-    
-    const ctx = canvas.getContext('2d');
-    const data = window.chartData;
-    
-    if (!data) return;
-    
-    const centerX = canvas.width / 2;
-    const centerY = canvas.height / 2;
-    const radius = Math.min(centerX, centerY) - 20;
-    
-    const total = data.passed + data.failed + data.pending;
-    if (total === 0) {
-        // Draw empty circle for no tests
-        ctx.strokeStyle = '#ddd';
-        ctx.lineWidth = 2;
-        ctx.beginPath();
-        ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
-        ctx.stroke();
-        ctx.fillStyle = '#888';
-        ctx.font = '16px Arial';
-        ctx.textAlign = 'center';
-        ctx.fillText('No Tests', centerX, centerY);
-        return;
-    }
-    
-    let currentAngle = -Math.PI / 2; // Start from top
-    
-    // Draw passed segment
-    if (data.passed > 0) {
-        const angle = (data.passed / total) * 2 * Math.PI;
-        ctx.beginPath();
-        ctx.moveTo(centerX, centerY);
-        ctx.arc(centerX, centerY, radius, currentAngle, currentAngle + angle);
-        ctx.closePath();
-        ctx.fillStyle = '#27ae60';
-        ctx.fill();
-        currentAngle += angle;
-    }
-    
-    // Draw failed segment
-    if (data.failed > 0) {
-        const angle = (data.failed / total) * 2 * Math.PI;
-        ctx.beginPath();
-        ctx.moveTo(centerX, centerY);
-        ctx.arc(centerX, centerY, radius, currentAngle, currentAngle + angle);
-        ctx.closePath();
-        ctx.fillStyle = '#e74c3c';
-        ctx.fill();
-        currentAngle += angle;
-    }
-    
-    // Draw pending segment
-    if (data.pending > 0) {
-        const angle = (data.pending / total) * 2 * Math.PI;
-        ctx.beginPath();
-        ctx.moveTo(centerX, centerY);
-        ctx.arc(centerX, centerY, radius, currentAngle, currentAngle + angle);
-        ctx.closePath();
-        ctx.fillStyle = '#f39c12';
-        ctx.fill();
-    }
-    
-    // Add legend
-    const legendY = centerY + radius + 40;
-    ctx.font = '14px Arial';
-    ctx.textAlign = 'left';
-    
-    let legendX = centerX - 120;
-    
-    // Passed legend
-    ctx.fillStyle = '#27ae60';
-    ctx.fillRect(legendX, legendY, 15, 15);
-    ctx.fillStyle = '#333';
-    ctx.fillText('Passed (' + data.passed + ')', legendX + 20, legendY + 12);
-    
-    // Failed legend
-    legendX += 100;
-    ctx.fillStyle = '#e74c3c';
-    ctx.fillRect(legendX, legendY, 15, 15);
-    ctx.fillStyle = '#333';
-    ctx.fillText('Failed (' + data.failed + ')', legendX + 20, legendY + 12);
-    
-    // Pending legend
-    if (data.pending > 0) {
-        legendX += 90;
-        ctx.fillStyle = '#f39c12';
-        ctx.fillRect(legendX, legendY, 15, 15);
-        ctx.fillStyle = '#333';
-        ctx.fillText('Pending (' + data.pending + ')', legendX + 20, legendY + 12);
-    }
-}
-
-// Draw history chart
-function drawHistoryChart() {
-    const canvas = document.getElementById('historyChart');
-    if (!canvas || !window.testData.history || window.testData.history.length === 0) return;
-    
-    const ctx = canvas.getContext('2d');
-    const history = window.testData.history.slice().reverse(); // Most recent last
-    
-    const padding = 50;
-    const chartWidth = canvas.width - 2 * padding;
-    const chartHeight = canvas.height - 2 * padding;
-    
-    // Clear canvas
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    
-    // Find max values
-    const maxTests = Math.max(...history.map(h => h.stats.tests || 0));
-    const maxDuration = Math.max(...history.map(h => h.duration || 0));
-    
-    if (maxTests === 0) return;
-    
-    // Draw axes
-    ctx.strokeStyle = '#333';
-    ctx.lineWidth = 1;
-    ctx.beginPath();
-    ctx.moveTo(padding, padding);
-    ctx.lineTo(padding, canvas.height - padding);
-    ctx.lineTo(canvas.width - padding, canvas.height - padding);
-    ctx.stroke();
-    
-    // Draw grid lines
-    ctx.strokeStyle = '#eee';
-    ctx.lineWidth = 1;
-    for (let i = 1; i <= 5; i++) {
-        const y = padding + (chartHeight * i / 5);
-        ctx.beginPath();
-        ctx.moveTo(padding, y);
-        ctx.lineTo(canvas.width - padding, y);
-        ctx.stroke();
-    }
-    
-    // Draw pass/fail rates
-    const stepX = chartWidth / (history.length - 1);
-    
-    // Draw passed tests line
-    ctx.strokeStyle = '#27ae60';
-    ctx.lineWidth = 3;
-    ctx.beginPath();
-    history.forEach((run, index) => {
-        const x = padding + (index * stepX);
-        const y = canvas.height - padding - ((run.stats.passes || 0) / maxTests) * chartHeight;
-        if (index === 0) {
-            ctx.moveTo(x, y);
-        } else {
-            ctx.lineTo(x, y);
-        }
-    });
-    ctx.stroke();
-    
-    // Draw failed tests line
-    ctx.strokeStyle = '#e74c3c';
-    ctx.lineWidth = 3;
-    ctx.beginPath();
-    history.forEach((run, index) => {
-        const x = padding + (index * stepX);
-        const y = canvas.height - padding - ((run.stats.failures || 0) / maxTests) * chartHeight;
-        if (index === 0) {
-            ctx.moveTo(x, y);
-        } else {
-            ctx.lineTo(x, y);
-        }
-    });
-    ctx.stroke();
-    
-    // Add labels
-    ctx.fillStyle = '#333';
-    ctx.font = '12px Arial';
-    ctx.textAlign = 'center';
-    
-    // Y-axis labels
-    ctx.textAlign = 'right';
-    for (let i = 0; i <= 5; i++) {
-        const value = Math.round((maxTests * i) / 5);
-        const y = canvas.height - padding - (chartHeight * i / 5);
-        ctx.fillText(value.toString(), padding - 10, y + 4);
-    }
-    
-    // Legend
-    ctx.textAlign = 'left';
-    ctx.fillStyle = '#27ae60';
-    ctx.fillRect(padding, 20, 15, 15);
-    ctx.fillStyle = '#333';
-    ctx.fillText('Passed Tests', padding + 20, 32);
-    
-    ctx.fillStyle = '#e74c3c';
-    ctx.fillRect(padding + 120, 20, 15, 15);
-    ctx.fillStyle = '#333';
-    ctx.fillText('Failed Tests', padding + 140, 32);
-}
-
-// Initialize - hide failures section if no failures and draw charts
-document.addEventListener('DOMContentLoaded', function() {
-    const failuresSection = document.querySelector('.failures-section');
-    const failureItems = document.querySelectorAll('.failure-item');
-    if (failureItems.length === 0) {
-        failuresSection.style.display = 'none';
-    }
-    
-    // Draw charts
-    drawPieChart();
-    drawHistoryChart();
-    
-    // Set up filter event listeners
-    document.getElementById('statusFilter').addEventListener('change', applyFilters);
-    document.getElementById('featureFilter').addEventListener('input', applyFilters);
-    document.getElementById('tagFilter').addEventListener('input', applyFilters);
-    document.getElementById('retryFilter').addEventListener('change', applyFilters);
-    document.getElementById('typeFilter').addEventListener('change', applyFilters);
-});
-    `
-  }
-}