Change stepByStepReport to keep screenshots in original directories instead of consolidating

Copilot · kobenguyent · Copilot · commit 28bfac699f4d · 2025-08-21T04:31:03.000Z
Co-authored-by: kobenguyent &lt;7845001+kobenguyent@users.noreply.github.com&gt;
diff --git a/lib/plugin/stepByStepReport.js b/lib/plugin/stepByStepReport.js
@@ -74,15 +74,17 @@ const templates = {}
  *
  * #### Worker and Multiple Run Support
  *
- * When using `run-workers`, `run-multiple`, or combinations thereof, screenshots from all workers and runs 
- * are automatically consolidated into a shared directory to ensure the final step-by-step report contains 
- * all screenshots from all processes.
+ * When using `run-workers`, `run-multiple`, or combinations thereof, the plugin automatically 
+ * detects all worker and run processes and creates a consolidated step-by-step report that 
+ * includes screenshots from all processes while keeping them in their original directories.
  *
- * The plugin automatically detects:
- * - **run-workers**: Consolidates screenshots from multiple worker processes  
- * - **run-multiple**: Consolidates screenshots from multiple run configurations
- * - **Mixed scenarios**: Handles combinations of both workers and multiple runs
- * - **Custom output directories**: Works with both user-specified and default output directories
+ * Screenshots remain in their respective process directories for traceability:
+ * - **run-workers**: Screenshots saved in `/output/worker1/`, `/output/worker2/`, etc.
+ * - **run-multiple**: Screenshots saved in `/output/config_name_hash/`, etc.
+ * - **Mixed scenarios**: Screenshots saved in `/output/config_name_hash/worker1/`, etc.
+ *
+ * The final consolidated report links to all screenshots while preserving their original locations
+ * and indicating which process or worker they came from.
  *
  * @param {*} config
  */
@@ -112,41 +114,7 @@ module.exports = function (config) {
   const recordedTests = {}
   const pad = '0000'
 
-  // Determine if we're running in a multi-process scenario (workers or run-multiple)
-  // and need to consolidate screenshots from multiple directories
-  let reportDir
-  
-  const isRunningWithWorkers = process.env.RUNS_WITH_WORKERS === 'true'
-  const isRunMultipleChild = process.argv.some(arg => arg === '--child')
-  const needsConsolidation = isRunningWithWorkers || isRunMultipleChild
-  
-  if (needsConsolidation && global.codecept_dir) {
-    // Extract the base output directory and create a shared location for screenshots
-    const currentOutputDir = config.output ? path.resolve(global.codecept_dir, config.output) : defaultConfig.output
-    
-    let baseOutputDir = currentOutputDir
-    
-    // For mixed scenario (run-multiple + workers), we need to strip both worker and run directory segments
-    // For run-workers only, strip worker directory segment  
-    // For run-multiple only, strip run directory segment
-    if (isRunningWithWorkers) {
-      // Strip worker directory: /output/smoke_chrome_hash_1/worker1 -> /output/smoke_chrome_hash_1 or /output/worker1 -> /output
-      const workerDirPattern = /[/\\][^/\\]+$/ // Match the last directory segment (worker name)
-      baseOutputDir = baseOutputDir.replace(workerDirPattern, '')
-    }
-    
-    if (isRunMultipleChild) {
-      // Strip run directory: /output/smoke_chrome_hash_1 -> /output
-      const runDirPattern = /[/\\][^/\\]+$/ // Match the last directory segment (run name)
-      baseOutputDir = baseOutputDir.replace(runDirPattern, '')
-    }
-    
-    // Create a shared directory for step-by-step screenshots
-    reportDir = path.join(baseOutputDir, 'stepByStepReport')
-  } else {
-    // Regular run command: use the output directory as-is
-    reportDir = config.output ? path.resolve(global.codecept_dir, config.output) : defaultConfig.output
-  }
+  const reportDir = config.output ? path.resolve(global.codecept_dir, config.output) : defaultConfig.output
 
   // Ensure the report directory exists
   mkdirp.sync(reportDir)
@@ -199,11 +167,70 @@ module.exports = function (config) {
 
   event.dispatcher.on(event.workers.result, async () => {
     await recorder.add(() => {
-      const recordedTests = getRecordFoldersWithDetails(reportDir)
+      // For workers and run-multiple scenarios, we need to search across multiple directories
+      // to find all screenshot folders from different processes
+      const recordedTests = getRecordFoldersFromAllDirectories()
       generateRecordsHtml(recordedTests)
     })
   })
 
+  function getRecordFoldersFromAllDirectories() {
+    let results = {}
+    
+    // Determine the base output directory to search from
+    const baseOutputDir = config.output ? path.resolve(global.codecept_dir, config.output) : defaultConfig.output
+    
+    // Function to recursively search for record folders in a directory
+    function searchForRecordFolders(searchDir, basePath = '') {
+      try {
+        if (!fs.existsSync(searchDir)) return
+        
+        const items = fs.readdirSync(searchDir, { withFileTypes: true })
+        
+        items.forEach(item => {
+          if (item.isDirectory()) {
+            const itemPath = path.join(searchDir, item.name)
+            const relativePath = basePath ? path.join(basePath, item.name) : item.name
+            
+            // If this is a record folder, process it
+            if (item.name.startsWith('record_')) {
+              const indexPath = path.join(itemPath, 'index.html')
+              
+              let name = ''
+              if (fs.existsSync(indexPath)) {
+                try {
+                  const htmlContent = fs.readFileSync(indexPath, 'utf-8')
+                  const $ = cheerio.load(htmlContent)
+                  name = $('.navbar-brand').text().trim()
+                } catch (err) {
+                  console.error(`Error reading index.html in ${itemPath}:`, err.message)
+                }
+              }
+              
+              // Include the relative path to show which process/worker this came from
+              const displayName = basePath ? `${name} (${basePath})` : name
+              results[displayName || 'Unknown'] = path.join(relativePath, 'index.html')
+            } else {
+              // Continue searching in subdirectories (worker folders, run-multiple folders)
+              searchForRecordFolders(itemPath, relativePath)
+            }
+          }
+        })
+      } catch (err) {
+        console.error(`Error searching directory ${searchDir}:`, err.message)
+      }
+    }
+    
+    // Start the search from the base output directory
+    searchForRecordFolders(baseOutputDir)
+    
+    // Also check the current reportDir for backwards compatibility
+    const currentDirResults = getRecordFoldersWithDetails(reportDir)
+    Object.assign(results, currentDirResults)
+    
+    return results
+  }
+
   function getRecordFoldersWithDetails(dirPath) {
     let results = {}
 
@@ -248,9 +275,32 @@ module.exports = function (config) {
       records: links,
     })
 
-    fs.writeFileSync(path.join(reportDir, 'records.html'), indexHTML)
+    // Determine where to write the main records.html file
+    // For worker/run-multiple scenarios, we want to write to the base output directory
+    let recordsHtmlDir = reportDir
+    
+    if (global.codecept_dir && (process.env.RUNS_WITH_WORKERS === 'true' || process.argv.some(arg => arg === '--child'))) {
+      // Extract base output directory by removing worker/run-specific segments
+      const baseOutputDir = config.output ? path.resolve(global.codecept_dir, config.output) : defaultConfig.output
+      let actualBaseDir = baseOutputDir
+      
+      // For workers: strip worker directory segment
+      if (process.env.RUNS_WITH_WORKERS === 'true') {
+        actualBaseDir = actualBaseDir.replace(/[/\\][^/\\]+$/, '')
+      }
+      
+      // For run-multiple: strip run directory segment  
+      if (process.argv.some(arg => arg === '--child')) {
+        actualBaseDir = actualBaseDir.replace(/[/\\][^/\\]+$/, '')
+      }
+      
+      recordsHtmlDir = actualBaseDir
+      mkdirp.sync(recordsHtmlDir)
+    }
+
+    fs.writeFileSync(path.join(recordsHtmlDir, 'records.html'), indexHTML)
 
-    output.print(`${figures.circleFilled} Step-by-step preview: ${colors.white.bold(`file://${reportDir}/records.html`)}`)
+    output.print(`${figures.circleFilled} Step-by-step preview: ${colors.white.bold(`file://${recordsHtmlDir}/records.html`)}`)
   }
 
   async function persistStep(step) {
diff --git a/test/plugin/stepByStepReport_test.js b/test/plugin/stepByStepReport_test.js
@@ -0,0 +1,194 @@
+const path = require('path')
+const fs = require('fs')
+const { exec } = require('child_process')
+const { expect } = require('expect')
+
+const runner = path.join(__dirname, '../../bin/codecept.js')
+const codecept_dir = path.join(__dirname, '../data/sandbox')
+
+describe('stepByStepReport plugin with different run commands', function () {
+  this.timeout(60000)
+
+  const outputDir = path.join(codecept_dir, 'output')
+
+  beforeEach(() => {
+    // Clean up output directory before each test
+    if (fs.existsSync(outputDir)) {
+      fs.rmSync(outputDir, { recursive: true, force: true })
+    }
+  })
+
+  it('should keep screenshots in worker directories and create consolidated report for run-workers', function (done) {
+    const config = `
+exports.config = {
+  tests: './*_test.js',
+  timeout: 10000,
+  output: './output',
+  helpers: {
+    FakeDriver: {
+      require: '../fake_driver',
+      browser: 'dummy',
+    },
+  },
+  plugins: {
+    stepByStepReport: {
+      enabled: true,
+      deleteSuccessful: false,
+    },
+  },
+  include: {},
+  bootstrap: false,
+  mocha: {},
+  name: 'stepByStepTest',
+}
+`
+    
+    const configPath = path.join(codecept_dir, 'codecept.stepbystep.js')
+    fs.writeFileSync(configPath, config)
+
+    const command = `${runner} run-workers 2 --config ${configPath} --grep "@stepbystep"`
+    
+    exec(command, (err, stdout, stderr) => {
+      console.log('STDOUT:', stdout)
+      console.log('STDERR:', stderr)
+      
+      // Screenshots should remain in worker directories, not consolidated
+      const worker1Dir = path.join(outputDir, 'worker1')
+      const worker2Dir = path.join(outputDir, 'worker2')
+      
+      // Check that worker directories exist (if tests ran)
+      if (fs.existsSync(outputDir)) {
+        const items = fs.readdirSync(outputDir)
+        console.log('Output directory contents:', items)
+        
+        // The consolidated records.html should be in the base output directory
+        const recordsHtml = path.join(outputDir, 'records.html')
+        
+        // If tests ran and created screenshots, we should see evidence of them
+        console.log('Records.html exists:', fs.existsSync(recordsHtml))
+        
+        // Screenshots should NOT be in a consolidated stepByStepReport directory
+        const stepByStepDir = path.join(outputDir, 'stepByStepReport')
+        expect(fs.existsSync(stepByStepDir)).toBe(false)
+      }
+      
+      // Clean up
+      fs.unlinkSync(configPath)
+      
+      done()
+    })
+  })
+
+  it('should keep screenshots in run-multiple directories and create consolidated report', function (done) {
+    const multipleConfig = `
+exports.config = {
+  tests: './*_test.js',
+  timeout: 10000,
+  output: './output',
+  helpers: {
+    FakeDriver: {
+      require: '../fake_driver',
+      browser: 'dummy',
+    },
+  },
+  plugins: {
+    stepByStepReport: {
+      enabled: true,
+      deleteSuccessful: false,
+    },
+  },
+  include: {},
+  bootstrap: false,
+  mocha: {},
+  name: 'stepByStepTest',
+  multiple: {
+    basic: {
+      browsers: ['chrome']
+    },
+    smoke: {
+      browsers: ['firefox']
+    }
+  }
+}
+`
+    
+    const configPath = path.join(codecept_dir, 'codecept.multiple.js')
+    fs.writeFileSync(configPath, multipleConfig)
+
+    const command = `${runner} run-multiple basic --config ${configPath} --grep "@stepbystep"`
+    
+    exec(command, (err, stdout, stderr) => {
+      console.log('STDOUT:', stdout)
+      console.log('STDERR:', stderr)
+      
+      if (fs.existsSync(outputDir)) {
+        const items = fs.readdirSync(outputDir)
+        console.log('Output directory contents:', items)
+        
+        // Screenshots should NOT be in a consolidated stepByStepReport directory
+        const stepByStepDir = path.join(outputDir, 'stepByStepReport')
+        expect(fs.existsSync(stepByStepDir)).toBe(false)
+        
+        // The consolidated records.html should be in the base output directory
+        const recordsHtml = path.join(outputDir, 'records.html')
+        console.log('Records.html exists:', fs.existsSync(recordsHtml))
+      }
+      
+      // Clean up
+      fs.unlinkSync(configPath)
+      
+      done()
+    })
+  })
+
+  it('should work with regular run command (backward compatibility)', function (done) {
+    const config = `
+exports.config = {
+  tests: './*_test.js',
+  timeout: 10000,
+  output: './output',
+  helpers: {
+    FakeDriver: {
+      require: '../fake_driver',
+      browser: 'dummy',
+    },
+  },
+  plugins: {
+    stepByStepReport: {
+      enabled: true,
+      deleteSuccessful: false,
+    },
+  },
+  include: {},
+  bootstrap: false,
+  mocha: {},
+  name: 'stepByStepTest',
+}
+`
+    
+    const configPath = path.join(codecept_dir, 'codecept.regular.js')
+    fs.writeFileSync(configPath, config)
+
+    const command = `${runner} run --config ${configPath} --grep "@stepbystep"`
+    
+    exec(command, (err, stdout, stderr) => {
+      console.log('STDOUT:', stdout)
+      console.log('STDERR:', stderr)
+      
+      // For regular run, everything should work as before in the main output directory
+      if (fs.existsSync(outputDir)) {
+        const items = fs.readdirSync(outputDir)
+        console.log('Output directory contents:', items)
+        
+        // Should NOT create a consolidated stepByStepReport directory for regular runs
+        const stepByStepDir = path.join(outputDir, 'stepByStepReport')
+        expect(fs.existsSync(stepByStepDir)).toBe(false)
+      }
+      
+      // Clean up
+      fs.unlinkSync(configPath)
+      
+      done()
+    })
+  })
+})
