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


Mocking API Response In Cypress

What is Mocking ? Mocking, in a broader software development and testing context, is a technique used to simulate the behavior of certain components o
Read More

Cypress 13 Integration With BDD/Cucumber & POM

Problem Statement After Cypress version 10, there are some changes needed to integrate Cucumber/BDD with Cypress effectively. In this blog post, we wi
Read More

Running End-to-End Cypress Test cases in a Google Cloud Pipeline

Cypress is an end-to-end testing framework that is used to test web applications. It is an open-source JavaScript-based framework that enables de
Read More