Allure Cypress

Allure Cypress npm latest version

Generate beautiful HTML reports using Allure Report and your Cypress tests.

Allure Report Cypress Example

How to start

1. Prepare your project

  1. Open a terminal and go to the project directory. For example:

    cd /home/user/myproject
  2. Install the Allure Report command-line tool, if it is not yet installed in your operating system. Note that Allure Report requires Java, see the installation instructions.

    npm install --save-dev allure-commandline
    yarn add --dev allure-commandline
    pnpm install --dev allure-commandline
  3. Install the Allure Cypress adapter.

    npm install --save-dev allure-cypress
    yarn add --dev allure-cypress
    pnpm install --dev allure-cypress
  4. In the e2e section of your Cypress configuration script, define a setupNodeEvents() function that calls allureCypress(), as shown in the example.

    Pass the configuration options if necessary, see Allure Cypress configuration.

    const { defineConfig } = require("cypress"); const { allureCypress } = require("allure-cypress/reporter"); module.exports = defineConfig({ e2e: { setupNodeEvents(on, config) { allureCypress(on); }, }, });
  5. In your E2E support file, import the Allure Cypress commands.

    import "allure-cypress/commands";

2. Run tests

Run your Cypress tests same way as your would run them usually. For example:

npx cypress run
yarn run cypress run
pnpx cypress run

This will save necessary data into allure-results or other directory, according to the Configuration. If the directory already exists, the new files will be added to the existing ones, so that a future report will be based on them all.

3. Generate a report

Finally, run Allure to convert the test results into an HTML report. This will automatically open your browser to view the report.

npx allure serve allure-results
yarn dlx allure serve allure-results
pnpx allure serve allure-results

If necessary, replace allure-results with the path to the directory specified in the Configuration.

There are some options that can affect how the report is generated. Run allure --help for the full list of options.

Writing tests

The Allure Cypress adapter extends the standard reporting features of Cypress by providing additional capabilities for crafting more informative and structured tests. This section highlights key enhancements that can be utilized:

Adding Metadata

Allure allows you to enrich your reports with a variety of metadata. This additional information provides context and details for each test, enhancing the report's usefulness. Refer to the metadata reference section for an exhaustive list of what can be added.

In most cases, Allure Cypress provides two different ways to use a feature: the Metadata API and the Runtime API.

  • Metadata API: add a special command (beginning with @) into the test name. Allure Cypress will extract it and update the test result's data accordingly. When using this approach, the data is guaranteed to be added regardless of how the test itself runs.

  • Runtime API: use Allure's functions to add certain data to the test result during its execution. This approach allows for constructing the data dynamically.

    Note that it is recommended to call the Allure's functions as close to the beginning of the test as possible. This way, the data will be added even if the test fails early.

import * as allure from "allure-cypress"; import { Severity } from "allure-js-commons"; it("Authentication", () => { allure.owner("John Doe"); allure.tag("Web interface"); allure.tag("Authentication"); allure.severity(Severity.CRITICAL); // ... });
it( "Authentication" + " @allure.label.owner=JohnDoe" + " @allure.label.tag=WebInterface" + " @allure.label.tag=Authentication" + " @allure.label.severity=critical", () => { // ... }, );

Organize tests

As described in Improving navigation in your test report, Allure supports multiple ways to organize tests into hierarchical structures.

To specify a test's location in the behavior-based hierarchy:

import * as allure from "allure-cypress"; it("Authentication", () => { allure.epic("Web interface"); allure.feature("Essential features"); allure.story("Authentication"); // ... });
it( "Authentication" + " @allure.label.epic=WebInterface" + " @allure.label.feature=EssentialFeatures" + " @allure.label.story=Authentication", () => { // ... }, );

To specify a test's location in the suite-based hierarchy:

import * as allure from "allure-cypress"; it("Authentication", () => { allure.parentSuite("Tests for web interface"); allure.suite("Tests for essential features"); allure.subSuite("Tests for authentication"); // ... });
it( "Authentication" + " @allure.label.parentSuite=WebInterface" + " @allure.label.suite=EssentialFeatures" + " @allure.label.subSuite=Authentication", () => { // ... }, );

Divide a test into steps

To create steps and sub-steps, you can use the step() function, see the reference.

import * as allure from "allure-cypress"; it("Authentication", () => { allure.step("Step 1", () => { allure.step("Sub-step 1", () => { // ... }); allure.step("Sub-step 2", () => { // ... }); }); allure.step("Step 2", () => { // ... }); });

Describe parametrized tests

Since tests in Cypress, unlike in some other frameworks, are written as anonymous functions, it is very easy to implement the parametrized tests pattern, i.e. to run the same test logic with different test data. To do so, just write the test inside a loop and use the variable parameters in both its title and its body.

To display a parameter value in the test report, pass it to the parameter() function.

import * as allure from "allure-cypress"; for (const login of ["johndoe", "[email protected]"]) { it("Authentication", () => { allure.parameter("login", login); allure.parameter("time", new Date().toUTCString(), { excluded: true }); // ... }); }

Attach screenshots and other files

In Allure reports, you have the ability to attach various types of files, which can greatly enhance the comprehensibility of the report. A common practice is to attach screenshots that capture the state of the user interface at specific moments during test execution.

Allure Cypress automatically adds to the reports any screenshots taken with cy.screenshot().

Adding other file is possible by using Cypress's cy.readFile() with Allure's allure.attachment().

import * as allure from "allure-cypress"; it("Authentication", () => { // ... cy.readFile("/path/to/image.png", null).then((file) => { allure.attachment("My image", file, "image/png"); }); });

Select tests via a test plan file

Test plan is currently not supported by the Allure Cypress adapter.

Environment information

For the main page of the report, you can collect various information about the environment in which the tests were executed.

For example, it is a good idea to use this to remember the OS version and Node.js version. This may help the future reader investigate bugs that are reproducible only in some environments.

Allure Report Environments Widget

To provide such information, put a file named into the allure-results directory after running the tests. The file must use the .properties file format.

os_platform = linux os_release = 5.15.0-60-generic os_version = #66-Ubuntu SMP Fri Jan 20 14:29:49 UTC 2023 node_version = v18.13.0

Note that this feature should be used for properties that do not change for the whole test run. If you have properties that can be different for different tests, consider using Parametrized tests.

Powered by

Join our newsletter

Join our community

We aim to make Allure Report as reliable and user-friendly as possible, and together with the community, we're here to help when problems arise.

© 2024 Qameta Software Inc. All rights reserved.