https://github.com/wlsf82/cucumber-salad
Sample project to integrate Cypress with the Cucumber plugin.
https://github.com/wlsf82/cucumber-salad
cucumber cypress-io gherkin talking-about-testing testing
Last synced: about 17 hours ago
JSON representation
Sample project to integrate Cypress with the Cucumber plugin.
- Host: GitHub
- URL: https://github.com/wlsf82/cucumber-salad
- Owner: wlsf82
- License: mit
- Created: 2025-08-31T00:23:06.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-12-12T20:28:26.000Z (6 months ago)
- Last Synced: 2025-12-14T10:55:52.765Z (6 months ago)
- Topics: cucumber, cypress-io, gherkin, talking-about-testing, testing
- Language: JavaScript
- Homepage:
- Size: 705 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# cucumber-salad
[](https://github.com/wlsf82/cucumber-salad/actions/workflows/ci.yml)
Sample project to integrate Cypress with the Cucumber plugin.
## 🥒 Project Overview
This project demonstrates how to set up end-to-end testing using **Cypress** with **Cucumber** for behavior-driven development (BDD). The tests are written in Gherkin syntax and target multiple applications including EngageSphere and Hacker Stories.
## 📋 Prerequisites
- Node.js (version 20 or higher - LTS)
- npm or yarn package manager
## 🚀 Getting Started
### 1. Clone and Install
```bash
git clone
cd cucumber-salad/
npm install
```
### 2. Running Tests
#### Interactive Mode (Cypress Test Runner)
```bash
npm run cy:open
```
#### Headless Mode (All Tests)
```bash
npm test
```
Below is the result of a successfull execution.
```bash
(Run Finished)
Spec Tests Passing Failing Pending Skipped
┌──────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│ ✔ EngageSphere/greeting/greeting.feature 00:02 3 3 - - - │
├──────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
│ ✔ EngageSphere/cookies/cookies.feature 00:01 2 2 - - - │
├──────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
│ ✔ EngageSphere/itemsPerPage/itemsPerPage.feature 00:02 4 4 - - - │
├──────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
│ ✔ HackerStories/lastSearches/lastSearches.feature 00:01 1 1 - - - │
├──────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
│ ✔ HackerStories/removeStories/removeStories.feature 00:01 1 1 - - - │
└──────────────────────────────────────────────────────────────────────────────────────────────────────────────┘
✔ All specs passed! 00:08 11 11 - - -
```
#### Run Smoke Tests Only
```bash
npm run test:smoke
```
#### Run Non-Smoke Tests
```bash
npm run test:not:smoke
```
#### Run EngageSphere Tests Only
```bash
npm run test:engagesphere
```
#### Run Hacker Stories Tests Only
```bash
npm run test:hackerstories
```
#### Generate HTML Report
```bash
npm run test:with:html:report
```
#### Generate HTML Report (Windows)
```bash
npm run test:with:html:report:win
```
The above commands should open a report like the following.
## 🏗️ Project Structure
```text
cypress/
├── e2e/ # Feature files and step definitions
│ ├── EngageSphere/ # EngageSphere app functionality tests
│ │ ├── cookies/ # Cookie consent functionality tests
│ │ ├── greeting/ # Greeting functionality tests
│ │ └── itemsPerPage/ # Items per page functionality tests
│ └── HackerStories/ # Hacker Stories app functionality tests
│ └── lastSearches/ # Last searches feature tests
│ └── removeStories/ # Remove Stories feature tests
├── screenshots/ # Test failure screenshots
└── support/
├── commands.js # Custom Cypress commands
├── e2e.js # Global test configuration
└── step_definitions/
└── common.js # Shared step definitions
```
## 🧪 Test Features
Below are listed the tests for both the EngageSphere and the Hacker Stories apps.
### EngageSphere
Below are listed the features covered by tests for the EngageSphere app with some of the tests' details.
#### Cookie Consent Banner
- Tests cookie consent banner functionality
- Verifies banner acceptance and decline workflows
- Validates cookie values are properly set
#### Greeting Functionality
- Tests default greeting display
- Tests customized greeting with user input
- Icon display validation based on input values
- Uses data-driven testing with Examples table
#### Items Per Page
- Tests pagination functionality
- Verifies correct number of items displayed per page
- Data-driven tests with multiple page sizes (5, 10, 20, 50)
### Hacker Stories
Below are listed the features covered by tests for the Hacker Stories app with some of the tests' details.
#### Last Searches
- Tests search functionality in the Hacker Stories application
- Validates last search terms are displayed as buttons
- Uses data tables for multiple search term testing
### Remove Stories
Validates that removing a story from the Hacker Stories list updates the count from 20 to 19 stories.
## 🏷️ Test Tags
The project uses Cucumber tags for test organization:
- `@smoke` - Critical functionality tests that run in the smoke test suite
- `@engagesphere` or `@hackerstories` to specify which apps tests should run
- Tests can be filtered using tags in npm scripts
## 📊 Reporting
- HTML reports are generated using the Cucumber preprocessor
- Reports are configured in `.cypress-cucumber-preprocessorrc.json`
- Generated report file: `cucumber-report.html`
## 🔧 Configuration
### Cypress Configuration (`cypress.config.js`)
- Uses ES modules syntax
- Configured with Cucumber preprocessor and esbuild
- Spec pattern set to `**/*.feature` files
- Environment variables for filtering specs
### Cucumber Configuration (`.cypress-cucumber-preprocessorrc.json`)
- HTML reporting enabled
- Additional configuration options available
## 📝 Writing Tests
### Feature Files
Write feature files using Gherkin syntax in the `cypress/e2e/` directory. Examples include:
**Basic Scenario:**
```gherkin
Feature: Feature Name
Scenario: Test scenario description
Given I have a precondition
When I perform an action
Then I should see the expected result
```
**Data-driven Testing with Examples:**
```gherkin
Feature: Greeting
@smoke
Scenario: shows a customized greeting
When I type "" in the name input field
Then I see the following greeting: Hi ""!
And I see the following icon: ""
Examples:
| name | icon |
| Walmyr | none |
| Squirrel | lucide-squirrel |
```
**Data Tables for Multiple Values:**
```gherkin
Feature: Hacker Stories - Last Search
Scenario: shows the last three searched terms as buttons
Given I access the Hacker Stories web app
When I search for these terms
| Vue | Svelte | Angular |
Then I see "3" buttons, one for each of the last searched terms
```
### Step Definitions
Implement step definitions in JavaScript files alongside feature files or in the shared `common.js` file:
```javascript
import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
Given('I have a precondition', () => {
// Implementation
})
```
## 🎯 Target Applications
Tests are designed to run against multiple applications:
### EngageSphere Application
- URL: `https://engage-sphere.vercel.app/`
- Cookie consent functionality
- User greeting interface with customizable names and icons
- Data table with pagination controls
### Hacker Stories Application
- URL: `https://wlsf82-hacker-stories.web.app/`
- Search functionality for Hacker Stories
- Last searches feature with button display
- Dynamic search term management
- Stories removal
## 🤝 Contributing
1. Follow the existing project structure
2. Write descriptive feature files using Gherkin syntax
3. Implement step definitions in appropriate locations
4. Use meaningful tags for test organization
5. Ensure tests are independent and can run in any order
## 📚 Resources
- [Cypress Documentation](https://docs.cypress.io/)
- [Cucumber in Cypress: A step by step guide](https://filiphric.com/cucumber-in-cypress-a-step-by-step-guide#configuration)