如何同时运行cypress run与cypress open，实现可视化执行并生成同一份报告

Great question! I’ve run into this exact scenario before—wanting to watch tests execute in the Cypress GUI while also getting a proper test report without spinning up two separate instances. Here’s how you can make this work smoothly:

Instead of trying to run npx cypress open and npx cypress run at the same time (which would launch two separate Cypress instances), you can configure your setup to generate reports while using the GUI mode. Here's the step-by-step breakdown:

1. Install a Cypress Reporter Package #

Pick a reporter that works seamlessly with both GUI and headless modes. mochawesome is a popular choice for detailed, user-friendly HTML reports. Install it along with helper tools for merging individual test reports:

npm install --save-dev mochawesome mochawesome-merge mochawesome-report-generator

2. Configure Cypress to Use the Reporter #

Open your cypress.config.js (or cypress.config.ts for TypeScript) and update the e2e configuration to enable reporting:

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // No extra setup needed here for basic reporting
    },
    // Set the reporter type
    reporter: 'mochawesome',
    reporterOptions: {
      overwrite: false, // Keep individual spec reports instead of overwriting
      html: false, // Skip immediate HTML generation (we'll merge first)
      json: true, // Generate JSON files for merging later
      reportDir: 'cypress/reports/mochawesome' // Directory to store raw report files
    }
  }
});

3. Run Tests in GUI Mode and Generate the Final Report #

• Launch the Cypress GUI as you normally would:

  npx cypress open
  

• Run your tests from the GUI (click on a single spec or "Run all specs"). As tests execute, Cypress will generate individual JSON reports in the cypress/reports/mochawesome folder.
• After tests finish, run these commands to merge the JSON files into a single report and generate the final HTML:

  npx mochawesome-merge cypress/reports/mochawesome/*.json > cypress/reports/mochawesome.json
  npx marge cypress/reports/mochawesome.json -o cypress/reports/final
  

• Open cypress/reports/final/mochawesome.html in your browser to view the full, consolidated report—this matches exactly what you watched execute in the GUI.

Bonus: Automate Report Generation with Scripts #

Save time by adding these scripts to your package.json:

{
  "scripts": {
    "cypress:open": "npx cypress open",
    "cypress:merge-reports": "npx mochawesome-merge cypress/reports/mochawesome/*.json > cypress/reports/mochawesome.json",
    "cypress:generate-report": "npx marge cypress/reports/mochawesome.json -o cypress/reports/final",
    "cypress:post-test": "npm run cypress:merge-reports && npm run cypress:generate-report"
  }
}

Now after running tests in the GUI, just run npm run cypress:post-test to generate your final report in one step.

Why This Works #

The Cypress GUI isn’t a separate runner—it’s just a visual layer on top of the same test engine used by cypress run. By configuring the reporter in your cypress.config.js, you tell Cypress to track test results and generate report data even in GUI mode. The merge step combines all individual spec reports into one cohesive document, just like cypress run would produce.

内容的提问来源于stack exchange，提问作者Muhammad Bilal