---
title: Cypress
description: Learn how to integrate Allure with Cypress to generate rich, interactive test reports. Follow step-by-step setup, test execution, and report generation guidance.
---

# Getting started with Allure Cypress

[![Allure Cypress npm latest version](https://img.shields.io/npm/v/allure-cypress?style=flat "Allure Cypress npm latest version")](https://www.npmjs.com/package/allure-cypress)

Generate beautiful HTML reports using [Allure Report](https://allurereport.org/docs/) and your [Cypress](https://cypress.io/) tests.

## Setting up

### 1. Prepare your project

1. Make sure [Node.js](https://nodejs.org/) is installed.

   Allure Cypress is tested against Node.js 18 and higher. Older versions may work, but we can't guarantee that.

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

   ```bash
   cd /home/user/myproject
   ```

1. Make sure Allure Report is installed. If it's not, follow the [installation instructions](/docs/v2/install/). Note that Allure Report requires Java.

1. Install the Allure Cypress integration.

   **npm:**
   ```bash
   npm install --save-dev allure-cypress
   ```

   **yarn:**
   ```bash
   yarn add --dev allure-cypress
   ```

   **pnpm:**
   ```bash
   pnpm install --dev allure-cypress
   ```

1. In the `e2e` section of your [Cypress configuration script](https://docs.cypress.io/guides/references/configuration), define a `setupNodeEvents()` function that calls `allureCypress()`, as shown in the example.

   Pass the configuration options if necessary, see [Allure Cypress configuration](/docs/cypress-configuration/).

   ```js
   import { allureCypress } from "allure-cypress/reporter";

   export default {
     e2e: {
       setupNodeEvents(on, config) {
         allureCypress(on, config, {
           resultsDir: "allure-results",
         });
         return config;
       },
     },
   };
   ```

   Tip:
   If you use custom event handlers or third-party Cypress plugins that may rely on event handling, follow the recommendations in [Using Allure Cypress with custom event handlers](/docs/cypress-configuration/#using-with-custom-handlers) or [Using Allure Cypress with other Cypress plugins](/docs/cypress-configuration/#using-with-other-plugins).

1. In your [E2E support file](https://docs.cypress.io/guides/core-concepts/writing-and-organizing-tests#Support-file), import the Allure Cypress library.

   ```js
   import "allure-cypress";
   ```

### 2. Run tests

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

**npm:**
```bash
npx cypress run
```

**yarn:**
```bash
yarn run cypress run
```

**pnpm:**
```bash
pnpx cypress run
```

This will save necessary data into `allure-results` or other directory, according to the [configuration](/docs/cypress-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, convert the test results into an HTML report. This can be done by one of two commands:

- `allure generate` processes the test results and saves an HTML report into the `allure-report` directory. To view the report, use the `allure open` command.

- `allure serve` creates the same report as `allure generate`, then automatically opens the main page of the report in a web browser.

## Writing tests

The Allure Cypress integration 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:

- **Metadata Annotation**: Enhance test reports with [descriptions, links, and other metadata](#add-metadata).
- **Test Organization**: Structure your tests into clear hierarchies for better readability and organization [organize tests](#organize-tests).
- **Step Division**: Break down tests into smaller [test steps](#divide-a-test-into-steps) for easier understanding and maintenance.
- **Parametrized Tests**: Clearly describe the parameters for [parametrized tests](#describe-parametrized-tests) to specify different scenarios.
- **Set labels globally**: Use [environment variables](#set-labels-globally) to set metadata and other labels.
- **Attachments**: Automatically capture [screenshots and other files](#attach-screenshots-and-other-files) during test execution.
- **Test Selection**: Use a test plan file to [select which tests to run](#select-tests-via-a-test-plan-file), allowing for flexible test execution.
- **Environment Details**: Include comprehensive [environment information](#environment-information) to accompany the test report.

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

- **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.

- **Metadata API**: add a metadata tag (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.

### Add Metadata

Allure allows you to enrich your reports with a variety of [metadata](/docs/v2/readability/#description-links-and-other-metadata). This additional information provides context and details for each test, enhancing the report's usefulness. Refer to the [metadata reference section](/docs/cypress-reference/#metadata) for an exhaustive list of what can be added.

**Runtime API:**
```ts
import * as allure from "allure-js-commons";

it("Authentication", () => {
  allure.description("This test attempts to log into the website.");
  allure.displayName("Test Authentication");
  allure.owner("John Doe");
  allure.tags("Web interface", "Authentication");
  allure.severity("critical");
  // ...
});
```

**Metadata API:**
```ts
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](/docs/v2/navigation/), Allure supports multiple ways to organize tests into hierarchical structures.

To specify a test's location in the [behavior-based hierarchy](/docs/v2/navigation/#behavior-based-hierarchy):

**Runtime API:**
```ts
import * as allure from "allure-js-commons";

it("Authentication", () => {
  allure.epic("Web interface");
  allure.feature("Essential features");
  allure.story("Authentication");
  // ...
});
```

**Metadata API:**
```ts
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](/docs/v2/navigation/#suite-based-hierarchy):

**Runtime API:**
```ts
import * as allure from "allure-js-commons";

it("Authentication", () => {
  allure.parentSuite("Tests for web interface");
  allure.suite("Tests for essential features");
  allure.subSuite("Tests for authentication");
  // ...
});
```

**Metadata API:**
```ts
it(
  "Authentication" +
    " @allure.label.parentSuite:TestsForWebInterface" +
    " @allure.label.suite:TestsForEssentialFeatures" +
    " @allure.label.subSuite:TestsForAuthentication",
  () => {
    // ...
  },
);
```

### Divide a test into steps

To [create steps and sub-steps](/docs/steps/), you can use the `step()` function, see the [reference](/docs/cypress-reference/#test-steps).

```ts
import * as allure from "allure-js-commons";
import { Status } from "allure-js-commons";

it("Authentication", () => {
  allure.step("Step 1", () => {
    allure.step("Sub-step 1", (ctx) => {
      ctx.parameter("foo", "1");
      // ...
    });
    allure.step("Sub-step 2", (ctx) => {
      ctx.parameter("foo", "2");
      // ...
    });
  });
  allure.logStep("Step 2", Status.SKIPPED);
});
```

### Describe parametrized tests

A typical way to implement the [parametrized tests](/docs/v2/readability/#parametrized-tests) pattern in Cypress is to define the test in a loop and use the loop variable in the test's title and body.

To display a parameter value in the test report, pass it to the [`parameter()`](/docs/cypress-reference/#parametrized-tests) function.

```ts
import * as allure from "allure-js-commons";

for (const login of ["johndoe", "johndoe@example.com"]) {
  it(`Authentication as ${login}`, () => {
    allure.parameter("login", login);
    allure.parameter("time", new Date().toUTCString(), { excluded: true });
    // ...
  });
}
```

### Set labels globally

Any [labels](/docs/cypress-reference/#label), including custom ones, can be set via the environment variables in your operating system. Here's an example (assuming you use the `npm` package manager):

**MacOS/Linux:**
```bash
export ALLURE_LABEL_epic=WebInterface
npx cypress run
```

**Windows:**
```powershell
$Env:ALLURE_LABEL_epic = "WebInterface"
npx cypress run
```

### Attach screenshots and other files

In Allure reports, you have the ability to [attach various types of files](/docs/attachments/), 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.

If your test calls [`cy.screenshot()`](https://docs.cypress.io/api/commands/screenshot) or if the [video recording](https://docs.cypress.io/guides/guides/screenshots-and-videos#Videos) is enabled in the Cypress configuration, the resulting images and video files will be attached to the test results automatically.

Adding other file is possible by using the `allure.attachment()` and
`allure.attachmentPath()` functions, see the [reference](/docs/cypress-reference/#attachments).

```ts
import * as allure from "allure-js-commons";
import { ContentType } from "allure-js-commons";

it("Authentication", () => {
  // ...

  allure.attachment("Text file", "This is the file content.", ContentType.TEXT);

  allure.attachmentPath("Screenshot", "/path/to/image.png", {
    contentType: ContentType.PNG,
    fileExtension: "png",
  });
});
```

### Select tests via a test plan file

Warning:
For this feature to work, make sure that the `config` object is passed from Cypress to Allure Cypress, as shown in the [configuration example](/docs/cypress-configuration/).

If the `ALLURE_TESTPLAN_PATH` environment variable is defined and points to an existing file, Cypress will only run tests listed in this file.

Here's an example of running tests according to a file named `testplan.json` (assuming you use the `npm` package manager):

**MacOS/Linux:**
```bash
export ALLURE_TESTPLAN_PATH=testplan.json
npx cypress run
```

**Windows:**
```powershell
$Env:ALLURE_TESTPLAN_PATH = "testplan.json"
npx cypress run
```

### Environment information

For the main page of the report, you can collect various information about the environment in which the tests were executed. To do so, edit the [`environmentInfo`](/docs/cypress-configuration/#environmentinfo) object in the configuration.

For example, it is a good idea to use this to remember the OS version and Node.js version retrieved from the [`os`](https://nodejs.org/api/os.html) and [`process`](https://nodejs.org/api/process.html) objects. This may help the future reader investigate bugs that are reproducible only in some environments.

Images: /images/js/environment-allure3.png, /images/js/environment-allure2.png

```js
import { allureCypress } from "allure-cypress/reporter";
import * as os from "node:os";

export default {
  e2e: {
    setupNodeEvents(on, config) {
      allureCypress(on, config, {
        environmentInfo: {
          os_platform: os.platform(),
          os_release: os.release(),
          os_version: os.version(),
          node_version: process.version,
        },
      });
      return config;
    },
  },
};
```

Note that if your launch includes multiple Cypress runs (see [How it works](/docs/how-it-works/)), Allure Cypress will only save the environment information from the latest run.