wdio-video-reporter同步异常报错排查及多报告器集成可行性咨询

Let's break this down into two clear parts: resolving the sync error first, then walking through how to integrate all three reporters smoothly.

Part 1: Fixing the "Unsynced Video Reporter" Error #

That error pops up when WebdriverIO's runner finishes before the video reporter has finished processing and saving all video files. Here are the most reliable fixes to try:

1. Increase Reporter Sync Timeout
   Give the video reporter extra time to wrap up its work by adding a reporterSyncTimeout to your wdio.conf.js:

   exports.config = {
     // ... your existing config
     reporterSyncTimeout: 30000, // 30 seconds - adjust based on your typical video length
   }
   

   This tells the runner to wait longer for all reporters to finish before exiting.

2. Verify Version Compatibility
   Make sure your wdio-video-reporter version matches your WebdriverIO version. For example:

   • WDIO v8 requires wdio-video-reporter v4.x+
   • WDIO v7 works with v3.x of the reporter
     Check your versions with:

   npm list wdio-video-reporter @wdio/cli
   

   If they're mismatched, upgrade/downgrade using:

   npm install wdio-video-reporter@<compatible-version> --save-dev
   

3. Check Appium Driver & Dependencies
   The video reporter relies on Appium's built-in recording capabilities. Ensure:

   • You're using a supported driver (UiAutomator2 for Android, XCUITest for iOS)
   • Android: FFmpeg is installed on your test machine (required for video encoding)
   • iOS: Your test device has proper screen recording permissions

4. Adjust Reporter Order
   Move the video reporter to the end of your reporters array. This ensures it starts processing only after the cucumberjs-json reporter has finished writing its files, reducing race conditions:

   reporters: [
     [ 'cucumberjs-json', { 
       jsonFolder: './results/report/json/', 
       language: 'en', 
     } ],
     [ video, { 
       saveAllVideos: true, 
       videoSlowdownMultiplier: 1, 
       outputDir: './results/report/videos/', // Use a separate folder for videos
       maxTestNameCharacters: 100, 
     } ],
   ]
   

Part 2: Integrating with wdio-cucumberjs-json-reporter & multiple-cucumber-html-reporter #

Absolutely! You can combine all three to get structured JSON reports, video recordings, and a polished HTML dashboard. Here's how to set it up:

Step 1: Install All Dependencies #

If you haven't already, install the required packages:

npm install wdio-video-reporter wdio-cucumberjs-json-reporter multiple-cucumber-html-reporter --save-dev

Step 2: Configure Reporters in wdio.conf.js #

Keep the reporter order as mentioned earlier, and use separate directories for JSON files and videos to keep things organized:

const video = require('wdio-video-reporter');

exports.config = {
  // ... other config (capabilities, specs, etc.)
  reporters: [
    [ 'cucumberjs-json', { 
      jsonFolder: './results/report/json/', 
      language: 'en', 
    } ],
    [ video, { 
      saveAllVideos: true, 
      videoSlowdownMultiplier: 1, 
      outputDir: './results/report/videos/',
      maxTestNameCharacters: 100,
      // Optional: Name videos to match scenario names for easy linking
      videoName: (test) => `${test.title.replace(/\s+/g, '_')}.mp4`
    } ],
  ],

Step 3: Generate HTML Report with Video Links #

Add an onComplete hook to your config to generate the HTML report and link videos to their corresponding test scenarios:

const { generate } = require('multiple-cucumber-html-reporter');
const fs = require('fs');
const path = require('path');

exports.config = {
  // ... existing config
  onComplete: function() {
    // Generate the HTML report
    generate({
      jsonDir: './results/report/json/',
      reportPath: './results/report/html/',
      displayDuration: true,
      customData: {
        title: 'Run Metadata',
        data: [
          { label: 'Project', value: 'Your App Name' },
          { label: 'Environment', value: 'Test' },
          { label: 'Device', value: 'Phone' }
        ]
      }
    });

    // Link videos to their scenarios in the JSON files (for HTML report reference)
    const jsonFiles = fs.readdirSync('./results/report/json/');
    jsonFiles.forEach(file => {
      const jsonPath = path.join('./results/report/json/', file);
      const reportData = require(jsonPath);

      reportData.features.forEach(feature => {
        feature.elements.forEach(scenario => {
          // Match video filename to scenario name (matches the videoName config above)
          const videoFileName = `${scenario.name.replace(/\s+/g, '_')}.mp4`;
          const videoPath = path.join('../videos/', videoFileName);
          // Attach video path to scenario metadata
          scenario.video = videoPath;
        });
      });

      fs.writeFileSync(jsonPath, JSON.stringify(reportData, null, 2));
    });
  }
};

Step 4: Add Video Embedding to HTML Report (Optional) #

To display videos directly in the HTML report, create a custom Handlebars template for multiple-cucumber-html-reporter:

1. Create a file named custom-template.hbs in your project root
2. Add this snippet where you want videos to appear (e.g., under scenario details):

{{#if scenario.video}}
  <div class="video-container">
    <h4>Test Video</h4>
    <video controls width="600">
      <source src="{{scenario.video}}" type="video/mp4">
      Your browser doesn't support HTML5 video.
    </video>
  </div>
{{/if}}

3. Update the generate call in onComplete to use this template:

generate({
  // ... existing config
  customTemplatePath: path.resolve('./custom-template.hbs')
});

内容的提问来源于stack exchange，提问作者Ferawati Hartanti Pratiwi