Test reporting is a crucial aspect of test automation, providing a clear and comprehensive overview of test execution results. Detailed reports allow testers to analyze test outcomes, identify failures, and ensure that the application meets quality standards. Effective test reporting not only facilitates communication among team members but also helps stakeholders track project progress and make informed decisions. Without proper reporting, understanding the success and health of the testing process becomes challenging, which could lead to delayed issue identification and resolution.

In Cypress, reporting is a seamless experience thanks to its built-in capabilities and integration with third-party tools. Cypress provides real-time feedback during test execution through console logs and screenshots, enabling quick debugging. Additionally, it supports popular reporting tools like Mochawesome and Allure, which generate visually rich, customizable reports. These features make Cypress an excellent choice for teams looking to automate their testing processes with reliable and detailed reporting systems.

Setting Up Your Cypress Project for Generate Reports

To unlock the full capabilities of Cypress, it’s essential to establish a well-configured test environment. Follow this step-by-step guide to ensure an effective setup. 

For in-depth instructions on Cypress installation, refer to our blog: Cypress for Web: The Fast and Easy Way to Automate your UI

Why Are Reports Important?

Test reports play a vital role in the software testing process for several reasons:

1. Error Diagnosis: Reports help identify issues quickly by providing details about test failures, enabling efficient debugging.
2. Quality Assurance: They offer insights into the application’s performance, ensuring it meets defined quality standards.
3. Transparency: Reports provide stakeholders with a clear view of the testing progress and results.
4. Accountability: They document the testing process, which can be useful for audits and compliance.
5. Informed Decisions: Well-structured reports assist teams in making data-driven decisions regarding releases or fixes.
6. Continuous Improvement: By analyzing historical reports, teams can identify trends and improve their testing strategies.

Key Features of Cypress Reports

1. Real-time Feedback: Cypress provides real-time logs during test execution, making it easier to debug while running tests.
2. Detailed Test Results: Reports include the status of each test case, along with error messages and stack traces for failed tests.
3. Screenshots and Videos: Cypress automatically captures screenshots and videos of test failures, enhancing debugging efficiency.
4. Customizable Reports: Using plugins like Mochawesome or Allure, you can generate tailored reports with a user-friendly interface.
5. Integration Support: Cypress reports can be integrated into CI/CD pipelines for consistent reporting across all test runs.
6. Easy Sharing: The reports are shareable and accessible to all stakeholders, promoting collaboration and transparency.

Types of Reports in Cypress Using JavaScript

Cypress provides robust reporting mechanisms to help testers gain insights into test execution. These can be broadly categorized into built-in reports and custom reports, each serving unique purposes and offering varying levels of customization.

Built-In Reports in Cypress

Cypress includes built-in reporting features designed to give immediate feedback about test execution.

Because Cypress is built on top of Mocha, that means any reporter built for Mocha can be used with Cypress. Here is a list of Mocha’s built-in reporters.

By default, Cypress uses the spec reporter to output information to STDOUT.

Real-Time Console Output

• During test execution, Cypress logs details in the browser console, including the steps executed, test status (passed or failed), and any encountered errors.
• The detailed logs provide immediate insights, making debugging straightforward for testers.

Command Log Panel

• The Cypress Test Runner includes a command log panel that visually represents each test step in sequence.
• Testers can interact with this panel to inspect specific commands, view screenshots, or analyze error stacks for failed tests.

Screenshots and Video Recording

• Cypress automatically takes screenshots and records videos during test execution.
• These media assets are particularly helpful in understanding failures or reproducing issues.

Spec Report: 

The Spec Reporter in Cypress is built into Cypress by default, so you don’t need to install an external library to enable it. It displays test results directly in the terminal during a test run, making it easy to see the status of each test. Below are the steps to ensure it’s properly configured and running in your Cypress project.

Key Features of the Spec Reporter

1. Clear Test Output: Displays the test suite, individual test names, and their status (e.g., ✓ passed, ✖ failed).
2. Error Details: Includes detailed stack traces for any failing tests.
3. Progress Updates: Provides a real-time summary of the total, passed, failed, and pending tests.

Steps to Configure the Spec Reporter in Cypress

Step 1. Install the cypress-spec-reporter Plugin

Run the following command in your project directory to install the Spec Reporter plugin as a dev dependency:

• npm install cypress-spec-reporter –save-dev

Step 2. Update cypress.config.js File

You need to modify the cypress.config.js file to use the Spec Reporter plugin.

• Open the cypress.config.js or cypress.config.mjs file in your project.
• Update the reporter option to use the Spec Reporter:

CommonJS Syntax (cypress.config.js):

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

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // Remove the invalid reporter plugin reference
      // No need for `require("cypress-spec-reporter/plugin")`
    },
    reporter: "spec", // Cypress comes with the Spec Reporter by default
  },
  defaultCommandTimeout: 90000,
  pageLoadTimeout: 60000,
  viewportHeight: 1080,
  viewportWidth: 1920,
});

Step 3: Run Cypress Tests

Run your Cypress tests using the following commands:

• To open the Cypress Test Runner:
  • npx cypress open
• To execute tests in the terminal:
  • npx cypress run

Expected Output:

Best Practices

Combine with Mochawesome: If you need detailed HTML or JSON reports, combine the Spec Reporter with Mochawesome for enhanced reporting.

Use CI Logs: Spec Reporter logs are great for debugging in CI pipelines, as they provide concise and readable test summaries.

Custom Reports in Cypress

Custom reports in Cypress refer to the creation and configuration of test execution reports that go beyond the default reporting capabilities. While Cypress provides a simple text-based output in the console by default, custom reports enable testers to generate detailed, user-friendly reports in formats such as HTML, JSON, or interactive dashboards. These reports can include specific information, visualizations, and integrations tailored to project requirements.

By leveraging custom reports, testers can enhance the reporting process with features such as:

• Test execution summaries for a clear overview of test results.
• Custom formatting for test steps to improve readability.
• Specific metrics and KPIs like test pass rate, execution time, and test coverage.
• Integration with third-party tools such as Slack, CI/CD dashboards, or external reporting platforms.
• Additional data insights like screenshots, logs, and pie charts for better analysis.

Custom reports can be implemented using Cypress plugins or by extracting test data from Cypress and transforming it into a structured report format (e.g., JSON, HTML, or Excel). This flexibility ensures that test reporting aligns with the project’s needs, providing more actionable insights and improving the overall testing process.

Why Use Custom Reports in Cypress?

Custom reports are beneficial for:

1. Improved Readability: Create more user-friendly and visually appealing reports.
2. Enhanced Debugging: Include additional details such as logs, screenshots, and stack traces.
3. Data Visualization: Add charts, graphs, or pie charts to show test pass/fail distribution.
4. Stakeholder Communication: Share comprehensive reports with non-technical stakeholders.
5. CI/CD Integration: Generate reports suitable for integration with tools like Jenkins, GitHub Actions, or Azure DevOps.

Mochawesome Report

• Mochawesome is a popular reporting library that extends the capabilities of Mocha, Cypress’s underlying test framework. It generates elegant, visually appealing, and highly informative reports that are useful for analyzing test results, sharing with stakeholders, and integrating into CI/CD pipelines.

Key Features of Mochawesome

Detailed Test Execution Data:

• Mochawesome provides a breakdown of individual test cases, including status (pass, fail, or skip), duration, and error messages.
• It highlights failed tests with detailed stack traces to aid in debugging.

Visual Appeal:

• Reports are presented in a clean and interactive HTML format, making them user-friendly.
• Each test step is displayed with collapsible sections for easy navigation.

JSON and HTML Output:

• Along with an HTML report, Mochawesome generates a JSON report that can be used for further customization or integration into other tools.

Screenshots and Logs Integration:

• When integrated with Cypress, Mochawesome can include screenshots and other logs, providing a comprehensive view of test execution.

Customizable:

• Users can configure the output directory, enable/disable overwriting of reports, and choose the format of the generated reports.

Setting Up Mochawesome in Cypress

Step 1: Install Mochawesome Reporter

• Open your terminal and navigate to your Cypress project directory.
• Run the following command to install the required Mochawesome dependencies:

Command:

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

Step 2: Update Cypress Configuration

To integrate Mochawesome as the reporter in your Cypress project, update the cypress.config.js (or cypress.config.mjs) file:

• Using CommonJS Syntax (cypress.config.js):

const { defineConfig } = require("cypress");
module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      const cypressMochawesomeReporter = require("cypress-mochawesome-reporter/plugin");
      cypressMochawesomeReporter(on);
    },
    reporter: "cypress-mochawesome-reporter",
    reporterOptions: {
      reportDir: "cypress/reports",
      overwrite: true,
      html: true,
      json: true,
      embeddedScreenshots: true, // Embed screenshots in the report
      inlineAssets: true,        // Inline assets for portability
    },
    screenshotOnRunFailure: true, // Automatically take a screenshot on failure
  },
  defaultCommandTimeout: 90000,
  pageLoadTimeout: 60000,
  viewportHeight: 1080,
  viewportWidth: 1920,
});

Step 3:  Add the Reporter in Cypress Support File

Modify the cypress/support/e2e.js (or cypress/support/index.js for older versions) file to include the reporter:

import "cypress-mochawesome-reporter/register";

Step 4: Ensure Screenshots Are Captured

Cypress automatically captures screenshots on test failures if screenshotOnRunFailure is enabled. No additional configuration is needed for this.

Step 5: Run the Tests

1. Use the following command to execute your tests and generate the Mochawesome report:

• npx cypress run

2. After the tests complete, the reports will be saved in the directory specified in the reportDir option (e.g., cypress/reports).

Step 6: Verify the Report

After the test run, the Mochawesome report will be generated in the cypress/reports folder.

Open the HTML report (e.g., cypress/reports/mochawesome.html) to verify that screenshots are embedded within the report for failed tests.

Step 7: Merge Reports (Optional for Parallel Runs)

• If you are running tests in parallel, you’ll end up with multiple JSON reports. You can merge them into a single report using the mochawesome-merge and mochawesome-report-generator utilities:

Merge JSON reports:

• npx mochawesome-merge cypress/reports/*.json > cypress/reports/merged-report.json

Generate an HTML report from the merged JSON:

• npx mochawesome-report-generator cypress/reports/merged-report.json

The final HTML report will be generated in the same directory as the merged JSON file.

How Mochawesome Works with Cypress

• Integration: Mochawesome integrates seamlessly with Cypress by replacing the default reporter. It logs the test results and formats them into both JSON and HTML formats.
• Visual Reports: The generated HTML report provides a visually appealing and detailed summary of test outcomes, including:

1. Passed, failed, and skipped tests.
2. Test durations.
3. Stack traces for errors.

• Sharing and Debugging: These reports can be easily shared with team members or stakeholders, and the detailed logs help debug failures effectively.

Best Practices

Use Git Ignore: Exclude the cypress/reports folder in .gitignore to avoid committing reports to your repository:

• /cypress/reports/

Automate Reporting: Add scripts in package.json for easier merging and report generation:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "merge-reports": "mochawesome-merge cypress/reports/*.json > cypress/reports/mochawesome.json",
    "generate-report": "marge cypress/reports/mochawesome.json"
  },

You can use:

• npm run test:run && npm run report:merge && npm run report:generate

Set Up CI/CD: Include Mochawesome reports in your CI/CD pipelines for consistent reporting across builds.

Expected Outcome

• The generated Mochawesome report will include inline screenshots for all failed tests.
• Screenshots will not be stored in a separate folder but will be embedded directly in the report.

Allure Report

An Allure Report in Cypress is an advanced reporting tool that provides a highly visual, interactive, and detailed representation of test execution results. Allure is not specific to Cypress but is a general-purpose reporting framework compatible with various test automation tools and frameworks, including Selenium, JUnit, TestNG, and Cypress.

In the context of Cypress, Allure helps to transform raw test result data into user-friendly and visually rich reports, making it easier to analyze and understand test outcomes.

Key Features of Allure Reports

Interactive and Visual:

• Allure provides a clean, interactive UI with features like clickable graphs, test steps, and logs.

Detailed Test Steps:

• Each test case includes a breakdown of execution steps, logs, screenshots, and attachments for failures.

Failure Analysis:

• Failed tests include stack traces, error messages, and any logged information to aid debugging.

Attachments:

• Screenshots, videos, or custom artifacts can be attached to test cases.

Test Status Categorization:

• Allure organizes test results into categories like passed, failed, broken, or skipped, making it easier to interpret.

Supports Multiple Frameworks:

• Allure is versatile and integrates seamlessly with tools other than Cypress, making it a good option for cross-tool reporting.

Customizable:

• Allure supports plugins and customizations for including additional data, such as environment details or custom test metrics.

How to Generate Allure Reports in Cypress

To use Allure Reports with Cypress, you need to configure your project to generate Allure-compatible results during test execution.

1. Install Required Dependencies

Run the following commands to install the necessary Allure packages:

• npm install –save-dev @shelex/cypress-allure-plugin allure-commandline
• @shelex/cypress-allure-plugin: Enables Allure reporting in Cypress.
• allure-commandline: Allows you to generate and serve the Allure report.

2. Update Cypress Configuration

Modify your cypress.config.js file to integrate the Allure plugin:

const { defineConfig } = require('cypress');
const allureWriter = require('@shelex/cypress-allure-plugin/writer');

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      allureWriter(on, config);
      return config;
    },
  },
});

3. Update package.json

Add scripts to your package.json to run tests and generate the Allure report:

{
  "name": "cypress",
  "version": "1.0.0",
  "main": "cypress.config.js",
  "scripts": {
    "cypress:run": "cypress run",
    "test:all": "npx cypress run --browser=chrome --headed --spec cypress/e2e --reporter mocha-allure-reporter",
    "report:allure": "allure generate allure-results --clean -o allure-report && allure open allure-report",
    "type": "module"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "@shelex/cypress-allure-plugin": "^2.40.2",
    "allure-commandline": "^2.32.0",
    "chai": "^5.1.2",
    "cypress": "^13.16.1",
    "cypress-mochawesome-reporter": "^3.8.2",
    "cypress-multi-reporters": "^2.0.4",
    "mocha-allure-reporter": "^1.4.0",
    "mocha-junit-reporter": "^2.2.1"
  },
  "dependencies": {
    "cypress-xpath": "^2.0.1"
  }
}

4. Run Tests and Generate Reports

1. Execute Cypress tests with Allure:

• npm run test:all

This generates test results in the allure-results directory.

2. Generate and view the Allure report:

• npm run report:allure
• This creates an HTML report in the allure-report directory and opens it in the browser.

Benefits of Allure Reports in Cypress

1. Enhanced Test Insights:
   • Allure provides detailed insights into test executions, making it easy to identify the root cause of issues.
2. Better Collaboration:
   • The visually appealing and interactive reports are easy for non-technical stakeholders to understand.
3. Integration with CI/CD:
   • Allure reports can be generated automatically in Continuous Integration pipelines for better visibility into test results.
4. Attachments for Debugging:
   • Including screenshots, videos, and logs helps in diagnosing failures quickly.
5. Test History Tracking:
   • When integrated with tools like Jenkins or GitHub Actions, Allure can provide historical test execution trends.

Troubleshooting Common Errors in Allure Reporting

Error: Allure Results Not Generated

• Cause: The Allure plugin is not correctly configured.
• Fix: Ensure the allureWriter is added to setupNodeEvents in cypress.config.js.

Error: Allure Command Not Found

• Cause: allure-commandline is not installed globally.
• Fix: Install it globally using:
  npm install -g allure-commandline

Error: Reports Overwritten

• Cause: Running multiple test suites overwrites the previous results.
• Fix: Use the –clean option in the report generation command to avoid overwriting.

Error: Incomplete Data in Reports

• Cause: Test steps or logs not recorded properly.
• Fix: Verify that tests include detailed steps, and ensure screenshots or logs are attached using Cypress commands like cy.screenshot() and cy.log().

Tesults Report

The Tesults reporter in Cypress is an integration that allows you to upload and manage your test results in the Tesults platform. Tesults is a test results management tool designed for storing, analyzing, and sharing test results across teams. It supports features like reporting, visual dashboards, and result tracking, which makes it particularly useful for QA and development workflows

Key Features of Tesults Reporter

1. Centralized Results: Provides a single platform for storing test results.
2. Customizable Reporting: Supports metadata like test case names, results (pass/fail), execution times, and file attachments (screenshots/videos).
3. Integration with CI/CD: Allows seamless integration with tools like Jenkins, GitHub Actions, and other CI/CD pipelines.
4. Team Collaboration: Enables sharing reports across teams for better collaboration and faster issue resolution.

How Tesults Reporter Works in Cypress

The Tesults reporter works by:

1. Collecting Cypress test results after the test suite runs.
2. Packaging the results (including metadata, screenshots, and videos).
3. Uploading them to the Tesults platform using a unique target token for your project.

Detailed Steps to Configure Tesults Reporter in Cypress

Here’s a step-by-step guide to configure and use Tesults Reporter in your Cypress project, with all necessary details:

Step 1: Create a Tesults Account and Project

1. Sign up for Tesults: Go to Tesults and create an account.
2. Create a New Project: After logging in, create a new project where your Cypress test results will be uploaded.
3. Get the Target Token: Each Tesults project has a unique Target Token. You can find it in your project settings. Copy this token; you’ll use it for uploading results.

Step 2: Install Tesults Library

Install the Tesults Node.js library in your Cypress project:

• npm install –save-dev tesults

Step 3: Configure Tesults Data

Create a new JavaScript file to handle the Tesults upload, e.g.,runner.js

const cypress = require('cypress')
const tesults = require('cypress-tesults-reporter');

cypress.run({
    browser: 'chrome',
    headed: true,
    screenshotOnRunFailure: true,
    spec: [
        './cypress/e2e/demoQa.cy.js',
        './cypress/e2e/testDemoQa.cy.js'
    ],
})
.then((results) => {
  const args = {
    target: '[Add Your Tsults Token here]',
  }
  tesults.results(results, args);
})
.catch((err) => {
 console.error(err)
})

Step 4: Enable Screenshots and Videos in Cypress

Ensure Cypress captures screenshots and videos for failed tests. Update your cypress.config.js file:

const { defineConfig } = require('cypress');
const fs = require('fs')

module.exports = defineConfig({
  reporter: "mocha-tesults-reporter",
  reporterOptions: {
    screenshotOnRunFailure: true,
    video: true,
    videoCompression: 32,
    videoUploadOnPasses: false,
    reportDir: 'cypress/report',
    charts: false,
    reportPageTitle: 'Job Stack 2.0 - Web Automation Report',
    embeddedScreenshots: true,
    html: true,
    json: false,
    quiet: false,
  },
  e2e: {
    setupNodeEvents(on, config) {
      on('after:spec', (spec, results) => {
        if (results && results.video) {
          // Do we have failures for any retry attempts?
          const failures = results.tests.some((test) =>
            test.attempts.some((attempt) => attempt.state === 'failed')
          )
          if (!failures) {
            // delete the video if the spec passed and no tests retried
            fs.unlinkSync(results.video)
          }
            }
          })
       // return require('./cypress/plugins/index.js')(on, config)
    },
    excludeSpecPattern: ['**/*.ex.js'],
},
});

Step 5: Configure Scripts in package.json

Add a script to run Cypress tests and upload results to Tesults:

{
  "name": "cypress",
  "version": "1.0.0",
  "main": "cypress.config.js",
  "scripts": {
    "test": "cypress run",
    "type": "module",
    "report:tesults": "tesults --input ./cypress/reports/tesults-report.js --output ./cypress/reports/tesults-report.html"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "chai": "^5.1.2",
    "cypress": "^13.17.0",
    "cypress-tesults-reporter": "^1.4.1",
    "mocha-tesults-reporter": "^1.4.0",
    "mochawesome": "^7.1.3",
    "mochawesome-merge": "^4.3.0",
    "mochawesome-report-generator": "^6.2.0",
    "tesults": "^1.2.0"
  },
  "dependencies": {
    "aws-sdk": "^2.1692.0",
    "cypress-xpath": "^2.0.1"
  },
  "description": ""
}

Step 6: Run Cypress Tests with Tesults

Run the tests and upload the results to Tesults using the script:

•  node runner.js

Step 7: Verify Results on Tesults Dashboard

1. Log in to your Tesults account.
2. Navigate to the project you created earlier.
3. Verify that the test results have been uploaded. You should see test case names, results (pass/fail), reasons for failure, and attached screenshots/videos.

Optional Enhancements

Dynamic Data Collection

Automatically gather results after test execution. Use the Cypress afterEach hook in your cypress/support/e2e.js file:

Cypress.on('test:after:run', (test, runnable) => {

    if (test.state === 'failed') {

        const screenshotPath = `cypress/screenshots/${Cypress.spec.name}/${runnable.parent.title} -- ${test.title} (failed).png`;

        console.log('Screenshot taken:', screenshotPath);
    }
});

Custom Data Fields

Add more details to your test cases in the tesults-upload.js:

{

    name: 'Login Test',

    result: 'fail',

    suite: 'Authentication',

    reason: 'Element not found',

    duration: 5000, // Test duration in milliseconds

    files: ['cypress/screenshots/login-test.png'],

}

Merge Reports from Parallel Execution

If you’re running tests in parallel, collect and merge results into one file before uploading:

const fs = require('fs');

// Read and merge JSON files

const mergedResults = {

    target: 'your-tesults-target-token',

    results: {

        cases: []
    }
};

const files = fs.readdirSync('./results');

files.forEach(file => {

    if (file.endsWith('.json')) {

        const fileData = JSON.parse(fs.readFileSync(`./results/${file}`, 'utf-8'));

        mergedResults.results.cases.push(...fileData.cases);
    }
});

// Upload merged results

tesults.results(mergedResults, (err, response) => {

    console.log(response);

});

Common Issues and Solutions

Issue 1: Incorrect token type

• Cause: Using an incorrect target token (e.g., a source token).
• Solution: Use the target token from the Tesults project settings.

Issue 2: No files uploaded

• Cause: File paths are incorrect or files are not present.
• Solution: Double-check file paths in tesults-upload.js. Use absolute paths if necessary.

Issue 3: Slow uploads for large files

• Solution: Compress videos and limit their size before uploading.

Advantages of Tesults Reporter

• Rich Analytics: Visualize test trends, pass/fail rates, and execution times.
• File Attachments: Upload screenshots and videos to debug issues faster.
• CI/CD Friendly: Easily integrates into automated pipelines.
• Scalability: Suitable for projects of all sizes, from small teams to large enterprises.

Limitations

• Free Plan Restrictions: Limited to fewer test cases and storage for screenshots/videos.
• Upload Time: Large files (e.g., videos) can increase the upload time.

Best Practices

1. Optimize File Sizes: Compress videos to save space and upload time.
2. Organize Test Suites: Use logical names for suites and cases to simplify analysis.
3. Use Metadata: Attach additional information like test durations and reasons for failure.

HTML Report

The HTML Reporter in Cypress allows you to generate visually appealing, easy-to-read reports after executing tests. One of the most commonly used HTML reporters in Cypress is Mochawesome, which creates detailed HTML and JSON reports with useful charts and test statistics.

Here’s a detailed description of how to integrate and configure the HTML reporter in a Cypress project:

Steps to Configuration HTML report in the project

Install the Necessary Packages:

To begin, you need to install the following dependencies:

• mochawesome – The reporter itself, which generates the HTML reports.
• mochawesome-merge – Merges multiple JSON reports into one.
• mochawesome-report-generator – Converts the merged JSON file into an HTML report.
• cypress-mochawesome-reporter – The Cypress plugin that integrates Mochawesome with Cypress.

Run the following command to install the required packages:

• npm install –save-dev mochawesome mochawesome-merge mochawesome-report-generator cypress-mochawesome-reporter

Update cypress.config.js for Reporter Configuration

Next, you need to configure the Cypress reporter by modifying the cypress.config.js file (or cypress.json for older versions of Cypress).

Here’s the configuration to enable the Mochawesome reporter and specify options:

cypress.config.js 

Example:

const { defineConfig } = require("cypress");
module.exports = defineConfig({
  reporter: "cypress-mochawesome-reporter", // Set Mochawesome as the reporter
  reporterOptions: {
    reportDir: "cypress/reports",             // Directory where the report files will be saved
    overwrite: false,                         // Don't overwrite existing reports
    html: true,                               // Generate HTML report
    json: true,                               // Generate JSON report
    charts: true,                             // Include charts (like a pie chart)
    embeddedScreenshots: true,                // Embed screenshots into the report
    inlineAssets: true,                       // Inline CSS and JS files into the HTML report
  },
  e2e: {
    setupNodeEvents(on, config) {
      require("cypress-mochawesome-reporter/plugin")(on);  // Attach the Mochawesome plugin to Cypress
    },
  },
});

Explanation of the Options:

• reportDir: This defines the directory where the report will be stored (in this case, cypress/reports).
• overwrite: Set to false to ensure that previous reports aren’t overwritten.
• html: Enables the generation of HTML reports.
• json: Enables the generation of JSON reports.
• charts: Adds charts like a pie chart or bar graph for test results.
• embeddedScreenshots: Embeds screenshots directly within the HTML report.
• inlineAssets: Ensures that CSS and JavaScript assets are embedded into the HTML file, making it self-contained.

Add Screenshot Support for Failed Tests

To include screenshots for failed tests, modify the cypress/support/e2e.js file:

cypress/support/e2e.js 

Example:

import "cypress-mochawesome-reporter/register";
Cypress.on("test:after:run", (test, runnable) => {
  if (test.state === "failed") {
    // Include screenshot in the report for failed tests
    const screenshotPath = `cypress/screenshots/${Cypress.spec.name}/${runnable.parent.title} -- ${test.title} (failed).png`;
    addContext({ test }, screenshotPath);  // Attach the screenshot to the failed test
  }
});

Here, the addContext method is used to attach the screenshot path to the test report if the test fails.

Running Tests to Generate Reports

Once the configuration is set up, you can run your tests as usual using the following command:

• npx cypress run

After running the tests, you should see the generated reports in the cypress/reports directory.

Merging Multiple JSON Files (for Parallel Runs)

If you’re running tests in parallel or across multiple browsers, multiple JSON files will be generated. You can merge them into one using mochawesome-merge:

1. Merge the JSON reports:

• npx mochawesome-merge cypress/reports/*.json > cypress/reports/merged-report.json

      2. Generate a combined HTML report from the merged JSON:

• npx mochawesome-report-generator cypress/reports/merged-report.json -o cypress/reports/combined-report.html

This ensures that even if you run your tests in parallel, all results are combined into one HTML report.

View the HTML Report

Once the tests are complete, navigate to the cypress/reports directory. You should find an HTML file, such as index.html or combined-report.html, which can be opened in any web browser.

The HTML report will contain:

• Test results (pass/fail status)
• Charts (like pie charts for passed/failed tests)
• Test case details with logs, screenshots, and other relevant information.
• A summary of the entire test run.

Customize the HTML Report (Optional)

You can further customize the report using the configuration options:

• inlineAssets: true ensures that all the assets (CSS, JS, images) are embedded in the report itself, making it a standalone file.
• charts: true adds visual charts to show the overall test results.

Automating the Report Generation in CI/CD

To automate report generation in a continuous integration (CI) environment, such as Jenkins or GitHub Actions, you can include the report generation steps in your pipeline configuration.

For example, in GitHub Actions, you can include steps like:

• – name: Run Cypress tests
•   run: npx cypress run
• – name: Merge mochawesome reports
•   run: npx mochawesome-merge cypress/reports/*.json > cypress/reports/merged-report.json
• – name: Generate combined report
•   run: npx mochawesome-report-generator cypress/reports/merged-report.json -o cypress/reports/combined-report.html

Summary of Configuration Steps:

1. Install dependencies: npm install –save-dev mochawesome mochawesome-merge mochawesome-report-generator cypress-mochawesome-reporter.
2. Configure Cypress reporter: Set the reporter to cypress-mochawesome-reporter in cypress.config.js.
3. Set up screenshots: Add logic in e2e.js to attach screenshots for failed tests.
4. Run Cypress tests: Execute npx cypress run to generate reports.
5. Merge reports (if necessary): Use mochawesome-merge and mochawesome-report-generator to combine and generate a final report.
6. View the report: Open the generated HTML file in a browser.

Benefits of HTML Reports in Cypress

HTML reports provide a powerful way to visualize test execution results in Cypress. Below are the key benefits of using HTML reports in your Cypress projects:

1. User-Friendly Interface

• HTML reports offer a visually appealing and organized structure for displaying test results.
• The interface makes it easier for stakeholders to navigate through the results without technical expertise.

2. Detailed Test Results

• They include test summaries, detailed logs, and insights into passed, failed, and skipped tests.
• Reports often provide execution timestamps, test durations, and failure stack traces.

3. Visual Representation

• HTML reports often include charts and graphs, such as pie charts and bar graphs, to represent test statistics like pass/fail rates.
• These visual aids make it easier to analyze trends and overall test performance.

4. Embedding Screenshots and Videos

• HTML reports can integrate screenshots and videos captured during test execution, especially for failed tests.
• This feature simplifies debugging by providing direct evidence of what went wrong.

5. Easy Sharing

• Since HTML files are browser-readable, they can be easily shared with team members or stakeholders via email or hosted on servers.
• No additional tools or installations are required to view the report.

6. Customizability

• You can customize HTML reports to include additional information such as environment details, test configurations, or custom messages.
• Branding and formatting options allow the report to align with organizational requirements.

7. Integration with CI/CD Pipelines

• HTML reports can be automatically generated and shared as part of a CI/CD pipeline, ensuring test results are readily available after every build.
• This promotes faster feedback and quicker resolution of issues.

8. Facilitates Root Cause Analysis

• By combining logs, screenshots, and execution flow in a single report, HTML reports provide everything needed to perform root cause analysis effectively.

9. Enhances Productivity

• With clear and concise test outcomes, HTML reports save time for testers by reducing manual efforts to document or explain results.

10. Supports Compliance and Documentation

• HTML reports serve as documentation for test execution, which is useful for audits, compliance, or maintaining test histories.

Conclusion

Custom reports in Cypress play a crucial role in enhancing test automation workflows by providing detailed insights, improving visibility, and enabling better communication of test results. By leveraging tools like Mochawesome, Allure, or Extent Reports, testers can create visually appealing, data-rich reports tailored to specific project needs. These reports help in debugging, monitoring test trends, and sharing meaningful insights with stakeholders. Additionally, custom reporting configurations, such as embedding screenshots, generating charts, and integrating with CI/CD pipelines, ensure a more robust testing process.

Whether you choose existing reporting tools or design a custom solution, the ultimate goal is to make your reports informative, user-friendly, and actionable. Custom reports not only streamline testing but also empower teams to maintain high-quality software delivery, making them an indispensable part of modern test automation.

Witness how our meticulous approach and cutting-edge solutions elevated quality and performance to new heights. Begin your journey into the world of software testing excellence. To know more refer to Tools & Technologies & QA Services.

If you would like to learn more about the awesome services we provide,  be sure to reach out.

Happy Testing 🙂