Cypress

Here you will learn how to configure the Cypress Cucumber project to generate Cucumber JSON reports and the beautiful HTML report using Multiple Cucumber HTML Reporter.

Tip

Check out the example project under examples/cypress folder in the reporter repository.
You can also refer to the GitHub Actions workflow for Cypress along with the generated reports attached.

Steps to generate Multiple Cucumber HTML reporter

Generate Cucumber JSON reports

The multiple cucumber HTML reporter requires the Cucumber JSON report files in order to generate the beautiful HTML reports.

We have used @badeball/cypress-cucumber-preprocessor and @bahmutov/cypress-esbuild-preprocessor dependencies to generate the Cucumber JSON report files.

Cypress Configuration

Update the Cypress Configuration file as shown below to save the result in JSON format. This data will be used later.

// cypress.config.ts
import { writeFileSync } from 'node:fs';
import { addCucumberPreprocessorPlugin, afterRunHandler } from '@badeball/cypress-cucumber-preprocessor';
import { createEsbuildPlugin } from '@badeball/cypress-cucumber-preprocessor/esbuild';
import createBundler from '@bahmutov/cypress-esbuild-preprocessor';
import { defineConfig } from 'cypress';

async function setupNodeEvents(
  on: Cypress.PluginEvents,
  config: Cypress.PluginConfigOptions,
): Promise<Cypress.PluginConfigOptions> {
  await addCucumberPreprocessorPlugin(on, config);

  on(
    'file:preprocessor',
    createBundler({
      plugins: [createEsbuildPlugin(config)],
    }),
  );
  on(
    'after:run',
    async (results: CypressCommandLine.CypressRunResult | CypressCommandLine.CypressFailedRunResult): Promise<void> => {
      if (results) {
        await afterRunHandler(config, results);
        writeFileSync('.run/results.json', JSON.stringify(results));  
      }
    },
  );

  return config;
}

export default defineConfig({
  e2e: {
    specPattern: 'cypress/e2e/**/*.feature',
    setupNodeEvents,  
    defaultCommandTimeout: 60000,
    pageLoadTimeout: 60000,
    video: false,
    experimentalInteractiveRunEvents: true,
    downloadsFolder: './cypress/.run/downloads',
    fixturesFolder: './cypress/.run/fixtures',
    screenshotsFolder: './cypress/.run/screenshots',
    videosFolder: './cypress/.run/videos',
  },
});

Cucumber pre-processor configuration

Add the following configuration to your .cypress-cucumber-preprocessorrc.json file to generate the Cucumber JSON report files.

// .cypress-cucumber-preprocessorrc.json
{
  "json": {
    "enabled": true,  
    "output": ".run/reports/json/cucumber-report.json"
  },
  "messages": {
    "enabled": true,
    "output": ".run/reports/messages/cucumber-report.json"
  },
  "stepDefinitions": [
    "cypress/e2e/[filepath].step.{js,ts}",
    "cypress/e2e/[filepath]/*.step.{js,ts}"
  ]
}

Reporter config file

Create a typescript reporter config file at the root of the project as shown below:

// .multiple-cucumber-html-reporter.ts
import type { Options } from 'multiple-cucumber-html-reporter';

const config: Options = {
  jsonDir: './.run/reports/json/',
  reportPath: './.run/html-report/',
  openReportInBrowser: true,
  useCDN: true,
  metadataFilePath: './.run/reports/json/metadata.json',
  customData: {
    projectName: 'Cypress sample project',
    release: '1.2.0',
    testCycle: process.env.GITHUB_RUN_ID || 'Cycle 1',
    buildNumber: process.env.GITHUB_RUN_NUMBER || 'Build 1',
    environment: 'production',
    ciPipeline: 'GitHub Actions',
  },
  pageTitle: 'Cypress Sample',
  reportName: 'Cypress Sample',
  displayDuration: true,
  displayReportTime: true,
};

export default config;

Configure the scripts in `package.json`

// package.json
{
  "scripts": {
    "clean": "rm -rf dist .run",
    "build": "pnpm clean && tsc",
    "test": "pnpm build && tsx cypress-runner.ts",
    "report": "mchr --silent"
  },
}

pnpm clean - Remove the dist and .run folders
pnpm build - Compiles the TypeScript code for cucumber-html-report.ts
pnpm test - Run the tests in the browser
pnpm report - Generate the HTML report

Install the dependencies

Install the dependencies by running the following command:

pnpm install

Run the Tests

Execute your test cases by running the following command in the terminal:

pnpm test

Generate the HTML reporter

Once the test execution is done, run the following command in the terminal to generate the HTML report:

pnpm report

On this page