Allure

Allure Report with Cypress: Rich Test Reports for E2E Tests

HelpMeTest

HelpMeTest

— 3 min read
Allure Report with Cypress: Rich Test Reports for E2E Tests

Allure Report integrates with Cypress via the allure-cypress plugin. It captures test steps, attaches screenshots on failure, records test history, and generates interactive HTML reports. Every failed test shows exactly which step failed and what the page looked like.

Key Takeaways

allure-cypress is the official reporter plugin. Install it alongside allure-commandline to both generate data and serve reports.

Automatic screenshot attachment on failure. Allure captures the failure screenshot that Cypress takes and embeds it in the test report.

Steps are added with cy.allure().step(). Document your test flow in the report — reviewers can follow the test logic without reading code.

allure generate && allure open serves the HTML report. The raw data is in allure-results/; the report is generated from it.

Test history tracks flaky tests. After multiple runs, Allure shows pass/fail trends per test. Consistently flaky tests stand out.

Setup

npm install allure-cypress allure-commandline --save-dev

Register the plugin in cypress.config.ts:

import { defineConfig } from 'cypress'
import { allureCypress } from 'allure-cypress/reporter'

export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      allureCypress(on, config, {
        resultsDir: 'allure-results',
      })
      return config
    },
    specPattern: 'cypress/e2e/**/*.cy.{js,ts}',
  },
})

Register in cypress/support/e2e.ts:

import 'allure-cypress'

Writing Tests with Allure Steps

// cypress/e2e/checkout.cy.ts
describe('Checkout Flow', () => {
  it('user can complete purchase', () => {
    cy.allure()
      .parentSuite('E2E')
      .suite('Checkout')
      .subSuite('Happy Path')
      .severity('critical')
      .story('SHOP-42')
      .tag('regression')

    cy.allure().step('Navigate to shop')
    cy.visit('/shop')

    cy.allure().step('Add item to cart')
    cy.contains('Add to Cart').first().click()
    cy.contains('Cart (1)').should('be.visible')

    cy.allure().step('Proceed to checkout')
    cy.contains('Checkout').click()
    cy.url().should('include', '/checkout')

    cy.allure().step('Fill shipping information')
    cy.get('[data-testid=shipping-name]').type('Alice Smith')
    cy.get('[data-testid=shipping-address]').type('123 Test St')

    cy.allure().step('Complete payment')
    cy.get('[data-testid=card-number]').type('4242424242424242')
    cy.get('[data-testid=card-expiry]').type('12/27')
    cy.get('[data-testid=card-cvc]').type('123')
    cy.contains('Place Order').click()

    cy.allure().step('Verify order confirmation')
    cy.contains('Order Confirmed').should('be.visible')
    cy.get('[data-testid=order-id]').should('match', /ORD-\d+/)
  })
})

Attaching Screenshots and Videos

Screenshot on failure is automatic. To manually attach screenshots:

it('validates error message', () => {
  cy.visit('/login')
  cy.get('[data-testid=submit]').click()

  // Take screenshot and attach to report
  cy.screenshot('login-validation-errors').then(() => {
    cy.readFile('cypress/screenshots/login-validation-errors.png', 'base64').then(base64 => {
      cy.allure().attachment('Validation Error Screenshot', 
        Cypress.Buffer.from(base64, 'base64'), 
        'image/png')
    })
  })

  cy.contains('Email is required').should('be.visible')
})

Attach text or JSON data:

cy.request('GET', '/api/cart').then(response => {
  cy.allure().attachment(
    'API Response',
    JSON.stringify(response.body, null, 2),
    'application/json'
  )
})

Environment Information

Add environment metadata to the report:

// cypress/support/e2e.ts
before(() => {
  cy.allure().writeEnvironmentInfo({
    App_Version: Cypress.env('APP_VERSION') || 'local',
    Environment: Cypress.env('ENV') || 'development',
    Browser: Cypress.browser.name,
    Cypress_Version: Cypress.version,
  })
})

This appears in the "Environment" section of the Allure report.

Generating and Serving Reports

# Run tests (generates allure-results/)
npx cypress run

# Generate HTML report
npx allure generate allure-results --clean -o allure-report

# Open in browser
npx allure open allure-report

# Or: generate and open in one command
npx allure serve allure-results

CI Integration

GitHub Actions:

- name: Run Cypress tests
  run: npx cypress run
  continue-on-error: true  # don't fail the pipeline before generating report

- name: Generate Allure report
  if: always()
  run: npx allure generate allure-results --clean -o allure-report

- name: Upload report as artifact
  if: always()
  uses: actions/upload-artifact@v4
  with:
    name: allure-report-${{ github.run_id }}
    path: allure-report/
    retention-days: 30

# Optional: publish to GitHub Pages
- name: Deploy to GitHub Pages
  if: github.ref == 'refs/heads/main'
  uses: peaceiris/actions-gh-pages@v3
  with:
    github_token: ${{ secrets.GITHUB_TOKEN }}
    publish_dir: ./allure-report

Using Allure TestOps for History

With a local Allure report, you lose test history after each run. Allure TestOps (the hosted service) keeps history across runs:

- name: Upload results to Allure TestOps
  if: always()
  run: |
    npx allurectl upload \
      --endpoint ${{ secrets.ALLURE_ENDPOINT }} \
      --token ${{ secrets.ALLURE_TOKEN }} \
      --project-id ${{ vars.ALLURE_PROJECT_ID }} \
      --launch-id $ALLURE_LAUNCH_ID \
      allure-results

Allure TestOps shows:

  • Pass/fail trend per test over time
  • Flakiness score (how often each test changes result)
  • Duration trends (tests getting slower)
  • First seen / last seen dates

Organizing Tests with Labels

describe('User Registration', () => {
  beforeEach(() => {
    cy.allure()
      .parentSuite('Authentication')
      .suite('Registration')
      .epic('User Onboarding')
      .feature('Registration Form')
  })

  it('registers with valid email', () => {
    cy.allure()
      .story('Successful Registration')
      .severity('blocker')
      // ...
  })

  it('shows error for duplicate email', () => {
    cy.allure()
      .story('Duplicate Email Error')
      .severity('normal')
      // ...
  })
})

This structure lets you filter the report by epic, feature, story, and severity — making it easy to find all tests for a specific feature or all critical failures.

Summary

Feature How to Use
Steps cy.allure().step('description')
Severity .severity('critical' | 'blocker' | 'normal' | 'minor' | 'trivial')
Labels .epic(), .feature(), .story(), .tag()
Attachments .attachment(name, content, type)
Issue links .issue('JIRA-123')
Auto screenshots Captured on failure automatically
History Available with Allure TestOps (hosted)

Allure transforms Cypress test output from a pass/fail list into a navigable report that non-developers can read, failures are instantly reproducible, and patterns across many runs become visible.

Read more

Start now free