QA Automation Labs

How to Integrate Allure report with Cypress?


How to Integrate Allure report with Cypress?

Why is Allure Reporting to Cypress?

  • Cypress does not have an inbuilt reporting solution
  • Easy to install
  • Allure reports provide great presentational diagrams
  • Clear and nice reporting UI
  • Can easily investigate test run

Cypress Installation

  1. Create a new folder, I called project allure_report
  2. Type npm init (package.json) is created

Step to Install cypress

  1. Installing Cypress
  2. To install Cypress, in the project folder i.e allure_report> run npm install cypress — save-dev

Allure Installation

Enter the below commands in your command line to install allure

using yarn: yarn add -D@shelex/cypress-allure-plugin


using npm: npm i -D @shelex/cypress-allure-plugin

npm install — save-dev mocha-allure-reporter allure-commandline

Allure Set Up

1. Enter below the line of code in — cypress/plugins/index.js

/// <reference types=”@shelex/cypress-allure-plugin” />

const allureWriter = require(‘@shelex/cypress-allure-plugin/writer’);

module.exports = (on, config) => {

allureWriter(on, config); return config; };

2. Register commands in cypress/support/index.js file:

import “@shelex/cypress-allure-plugin”;

How Package.json look after installation

Package.json code attached below (Just copy this code to run the test cases)

Script section in the below code :

  1. beforetest : Commands used to clean the folders (allure-report and allure-results)
  2. aftertest: Used to generate the report
  3. tests: Command used to run all the test cases


“name”: “allure_report”,

“version”: “1.0.0”,

“description”: “”,

“main”: “index.js”,

“scripts”: {

“cy:run”: “cypress run — env allure=true”,

“clean:folders”: “rm -R -f allure-report/* && rm -R -f allure-results/*”,

“allure:report”: “yarn run allure generate allure-results — clean -o allure-report && allure open allure-report”,

beforetest”: “npm run clean:folders”,

tests”: “npm run cy:run || npm run aftertest”,

aftertest”: “npm run allure:report”


“author”: “Kailash Pathak”,

“license”: “ISC”,

“devDependencies”: {

“@shelex/cypress-allure-plugin”: “2.26.5”,

“allure-commandline”: “2.17.2”,

“cypress”: “9.5.1”,

“mocha-allure-reporter”: “1.4.0”




Run the below command for execution in the terminal, allure report will open in the browser

yarn run tests

Before Execution Folder structure

After Execution Folder structure

After the execution folder, ‘allure-report’ and ‘allure-results’ were created with index.html


All Test cases Pass report

Here is the test case execution report generated when we open Index.html

When some test cases are failed

The screenshot and Video are attached to the report.


One basic problem that comes when we open the index.html blank report display like below

How to Solve :

One method is by disabling the cross-origin policy of the browser but it’s not the best way from a vulnerability perspective.

As we need some servers to run this index.html.

We can add one plugin (Live Server) in VS Studio. Once installed then we can open our index.html file

Leave a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

Let’s Play with Cypress Feature “Test Replay”

Problem Statement Before Cypress v13, test failures in CI have historically been captured through screenshots, videos, and stack trace outputs, b
Read More

Handling Shadow DOM Using Cypress

The idea of componentization has completely changed how we design and maintain user interfaces in the field of web development. The advent of Shadow D
Read More

Gear up for upcoming Conferences of 2024! ✨✨

Gear up for our upcoming Conferences of 2024! ✨ ✨ #TheTestTribe #SoftwareTesting #Testers #Community #Worqference #Worqference2024 #QonfX 
Read More