The Talent500 Blog

Enhance Testing Workflows with HTML Allure Reports in Cypress

Kailash Pathak

Allure Report is the utility that processes test results collected by a compatible test framework and produces an HTML report. Allure Report is indeed a powerful open-source tool designed to generate clear and concise test execution reports. It provides a detailed and visually appealing representation of test results, making it easier for teams to understand the test outcomes and identify issues.

Cypress is a popular JavaScript testing framework that is known for its ease of use and fast execution speed.Integration of Allure with Cypress can be used  to generate comprehensive and visually appealing reports of the test cases. Allure reports include detailed information about each test case, including its status, duration, steps, and screenshots.

About Allure Report?

Allure is an open-source framework designed for creating interactive and comprehensive test reports. It is commonly used in software testing to generate detailed and visually appealing reports for test execution results.

Allure provides a clear and concise way to represent test outcomes, making it easier for both technical and non-technical stakeholders to understand the test results.Allure reports allows everyone participating in the development process to extract maximum useful information from everyday execution of tests.

Why Allure Reports?

An open-source framework designed to create test execution reports that are clear to everyone in the team. From the dev/qa perspective Allure reports shorten common defect life cycle: test failures can be divided on bugs and broken tests, also logs, steps, fixtures, attachments, timings, history and integrations with TMS and bug-tracking systems can be configured, so the responsible developers and testers will have all information at hand.

Reasons why you use Allure reports

Below are some key reason why you choose Allure Reports

Clear Visualization:

Detailed Test Steps:

History and Trends:

Automated Reports:

Support for Multiple Languages and Frameworks:

Set-up Cypress

Installing Cypress

Below are the steps to install Cypress. However, you can go through this blog to get started with Cypress testing.

Step 1: Create a folder and Generate package.json.

  1. Create a project, naming it ‘talent500_Allure-Cypress’
  2. Use the npm init command to create a package.json file.

Step 2: Run the below command to install Cypress.

  1. In the project folder, run > npm install – save-dev cypress@11.2.0
  2. You can Cypress version 11.2.0 is reflected in package.json

 

Set-up Allure Reports

Step 1: Allure Installation

Enter the below commands in your command line to install allure

Using yarn: 

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

Or

Using npm: 

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

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

Step 2: Cypress Config File

Update Cypress Config File with below code under file  ‘cypress.config.js’

/// <reference types=“@shelex/cypress-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;

}

}

});

Here’s a breakdown of what this above configuration file is doing:

Step 3: Update index.js

Then register the command of allure plugin under the path cypress/support/index.js file

import ‘@shelex/cypress-allure-plugin’;

Step 4: Update package.json with below Script

{

“name”: “talent500_allure-cypress”,

“version”: “1.0.0”,

“description”: “”,

“main”: “index.js”,

“scripts”: {

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

“cy:run-test”: “cypress run –env allure=true”,

“generate-allure:report”: “allure generate allure-results –clean -o allure-report && allure open allure-report”,

“tests”: “npm run clean:folders && npm run cy:run-test && npm run generate-allure:report”

},

“author”: “Kailash Pathak”,

“license”: “ISC”,

“devDependencies”: {

“@shelex/cypress-allure-plugin”: “^2.40.0”,

“allure-commandline”: “^2.24.1”,

“cypress”: “^11.2.0”,

“mocha-allure-reporter”: “^1.4.0”

}

}

Walkthrough of package.json file

Here’s a breakdown of the key information in this file:

Step 2: Create Test Case

Let’s create a test case for 

  1. Open the URL https://talent500.co/auth/signin
  2. Enter Email  and Password
  3. Verify User should be logged in by verifying the text “PROFILE”
  4. Logout from the Application
  5. Verify text “Opportunities Favor The Bold” after logout

/// <reference types=“cypress” />

describe(“https://talent500.co/ , Login & Logout “, () => {

it(“Logs in successfully and verifies links in header”, () => {

cy.visit(“https://talent500.co/auth/signin”);

cy.get(‘[name=”email”]’).focus();

cy.get(‘[name=”email”]’).type(“applitoolsautomation@yopmail.com”);

cy.get(‘[name=”password”]’).focus();

cy.get(‘[name=”password”]’).type(“Test@123”);

cy.get(‘[type=”submit”]’).eq(1).click({ force: true });

cy.contains(“PROFILE”).should(“be.visible”);

cy.get(‘img[alt=”DropDown Button”]’).click({ force: true });

cy.contains(“Logout”).click();

cy.contains(“Opportunities favor the bold”).should(“be.visible”);

});

});

Step 3: Execute the test case

Lets run the command 

npm run tests

npm run tests

As we run the test case using the command  ‘npm run tests’ . You can see the below command start executing in terminal

“npm run clean:folders && npm run cy:run-test && npm run generate-allure:report”

Commands are run in below sequence

  1. First command ‘npm run clean:folders’ will clean the folders (allure:report,allure:results ) if already created
  2. Second command ‘npm run cy:run-test’ run the test cases from e2e folders
  3. Third command ‘npm run generate-allure:report’ will generate the allure report

In below screenshot you can see one test case found for execution and test case execution is started 

In below screenshot you can see test  cases are executed successfully 

FInally you can see see below command run and generate the allure report 

‘allure generate allure-results –clean -o allure-report && allure open allure-report’


Step 4: Fail Scenario 

Add some more test cases and failed some of the test cases. In the below screenshot you can see I have added one more test case and initially  both test cases are passing

Fail Case :

Let’s fail one of the test cases to see how the report looks when test cases fail. In the below report you can see in the First test case we have a total of 3 test cases. Among 3 test cade 1 test case is failing and 2 test case are passing


Wrapping up

Integrating Allure with Cypress elevates the quality of test reporting by generating comprehensive, visually appealing summaries of test cases.  Allure reports provide a thorough analysis of each test, including crucial information like status, execution time, specific actions taken throughout the test, and supplemental screenshots. This degree of detail gives stakeholders and testers a thorough understanding.

By leveraging this integration, development teams gain valuable insights into the performance and reliability of their applications, fostering continuous improvement and ensuring the delivery of high-quality software products

7+