# Cucumber Cypress

> Cucumber BDD with Cypress policies. Use when writing Gherkin scenarios with Cypress step definitions. Do NOT use for Playwright-based BDD -- use cucumber-playwright instead. Do NOT use for non-BDD Cypress tests.

- Skill: `majiayu000/cucumber-cypress` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/cucumber-cypress`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/cucumber-cypress/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/cucumber-cypress

---


# Cucumber + Cypress Policies

Use `@badeball/cypress-cucumber-preprocessor` for Cypress + Cucumber.

## Project Structure

```
cypress/
├── e2e/
│   ├── features/*.feature
│   └── step_definitions/*.steps.ts
├── support/
cypress.config.ts
```

## Gherkin Best Practices

### Use Scenario Outline for Multiple Cases

```gherkin
Scenario Outline: Login validation
  Given I am on the login page
  When I enter "<email>" as email
  And I enter "<password>" as password
  Then I should see "<message>"

  Examples:
    | email            | password | message             |
    | user@example.com | valid    | Welcome             |
    | user@example.com | wrong    | Invalid credentials |
```

### Keep Steps Reusable

Write steps that can be shared across features.

## Step Definition Policies

### Use data-testid Selectors

```typescript
// GOOD
cy.get('[data-testid="email-input"]').type(email)

// BAD: Brittle CSS selectors
cy.get('.input-field-xyz').type(email)
```

### Import from Correct Package

```typescript
import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
```

### Hooks for Setup/Cleanup

```typescript
import { Before, After } from '@badeball/cypress-cucumber-preprocessor'

Before(() => {
  cy.clearCookies()
  cy.clearLocalStorage()
})
```

### Tagged Hooks for Specific Scenarios

```typescript
Before({ tags: '@login' }, () => {
  cy.fixture('users').as('users')
})
```

## Commands

```bash
npx cypress run
npx cypress run --spec "cypress/e2e/features/login.feature"
npx cypress open  # Interactive
```

## Configuration

For setup details, use context7 to query `@badeball/cypress-cucumber-preprocessor` documentation.