{"id":33287411,"url":"https://github.com/wlsf82/cucumber-salad","last_synced_at":"2026-06-12T06:31:11.970Z","repository":{"id":324686505,"uuid":"1047671485","full_name":"wlsf82/cucumber-salad","owner":"wlsf82","description":"Sample project to integrate Cypress with the Cucumber plugin.","archived":false,"fork":false,"pushed_at":"2025-12-12T20:28:26.000Z","size":722,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-12-14T10:55:52.765Z","etag":null,"topics":["cucumber","cypress-io","gherkin","talking-about-testing","testing"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wlsf82.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-08-31T00:23:06.000Z","updated_at":"2025-10-01T03:23:36.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/wlsf82/cucumber-salad","commit_stats":null,"previous_names":["wlsf82/cucumber-salad"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/wlsf82/cucumber-salad","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wlsf82%2Fcucumber-salad","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wlsf82%2Fcucumber-salad/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wlsf82%2Fcucumber-salad/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wlsf82%2Fcucumber-salad/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wlsf82","download_url":"https://codeload.github.com/wlsf82/cucumber-salad/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wlsf82%2Fcucumber-salad/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34232789,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-12T02:00:06.859Z","response_time":109,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cucumber","cypress-io","gherkin","talking-about-testing","testing"],"created_at":"2025-11-17T18:01:22.574Z","updated_at":"2026-06-12T06:31:11.952Z","avatar_url":"https://github.com/wlsf82.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# cucumber-salad\n\n[![CI](https://github.com/wlsf82/cucumber-salad/actions/workflows/ci.yml/badge.svg)](https://github.com/wlsf82/cucumber-salad/actions/workflows/ci.yml)\n\nSample project to integrate Cypress with the Cucumber plugin.\n\n## 🥒 Project Overview\n\nThis 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.\n\n## 📋 Prerequisites\n\n- Node.js (version 20 or higher - LTS)\n- npm or yarn package manager\n\n## 🚀 Getting Started\n\n### 1. Clone and Install\n\n```bash\ngit clone \u003crepository-url\u003e\ncd cucumber-salad/\nnpm install\n```\n\n### 2. Running Tests\n\n#### Interactive Mode (Cypress Test Runner)\n\n```bash\nnpm run cy:open\n```\n\n#### Headless Mode (All Tests)\n\n```bash\nnpm test\n```\n\nBelow is the result of a successfull execution.\n\n```bash\n(Run Finished)\n\n\n       Spec                                                            Tests  Passing  Failing  Pending  Skipped\n  ┌──────────────────────────────────────────────────────────────────────────────────────────────────────────────┐\n  │ ✔  EngageSphere/greeting/greeting.feature                 00:02        3        3        -        -        - │\n  ├──────────────────────────────────────────────────────────────────────────────────────────────────────────────┤\n  │ ✔  EngageSphere/cookies/cookies.feature                   00:01        2        2        -        -        - │\n  ├──────────────────────────────────────────────────────────────────────────────────────────────────────────────┤\n  │ ✔  EngageSphere/itemsPerPage/itemsPerPage.feature         00:02        4        4        -        -        - │\n  ├──────────────────────────────────────────────────────────────────────────────────────────────────────────────┤\n  │ ✔  HackerStories/lastSearches/lastSearches.feature        00:01        1        1        -        -        - │\n  ├──────────────────────────────────────────────────────────────────────────────────────────────────────────────┤\n  │ ✔  HackerStories/removeStories/removeStories.feature      00:01        1        1        -        -        - │\n  └──────────────────────────────────────────────────────────────────────────────────────────────────────────────┘\n    ✔  All specs passed!                                      00:08       11       11        -        -        -\n```\n\n#### Run Smoke Tests Only\n\n```bash\nnpm run test:smoke\n```\n\n#### Run Non-Smoke Tests\n\n```bash\nnpm run test:not:smoke\n```\n\n#### Run EngageSphere Tests Only\n\n```bash\nnpm run test:engagesphere\n```\n\n#### Run Hacker Stories Tests Only\n\n```bash\nnpm run test:hackerstories\n```\n\n#### Generate HTML Report\n\n```bash\nnpm run test:with:html:report\n```\n\n#### Generate HTML Report (Windows)\n\n```bash\nnpm run test:with:html:report:win\n```\n\nThe above commands should open a report like the following.\n\n![HTML Report Example](./html-report.png)\n\n## 🏗️ Project Structure\n\n```text\ncypress/\n├── e2e/                   # Feature files and step definitions\n│   ├── EngageSphere/      # EngageSphere app functionality tests\n│   │   ├── cookies/       # Cookie consent functionality tests\n│   │   ├── greeting/      # Greeting functionality tests\n│   │   └── itemsPerPage/  # Items per page functionality tests\n│   └── HackerStories/     # Hacker Stories app functionality tests\n│       └── lastSearches/  # Last searches feature tests\n│       └── removeStories/ # Remove Stories feature tests\n├── screenshots/           # Test failure screenshots\n└── support/\n  ├── commands.js          # Custom Cypress commands\n  ├── e2e.js               # Global test configuration\n  └── step_definitions/\n    └── common.js          # Shared step definitions\n```\n\n## 🧪 Test Features\n\nBelow are listed the tests for both the EngageSphere and the Hacker Stories apps.\n\n### EngageSphere\n\nBelow are listed the features covered by tests for the EngageSphere app with some of the tests' details.\n\n#### Cookie Consent Banner\n\n- Tests cookie consent banner functionality\n- Verifies banner acceptance and decline workflows\n- Validates cookie values are properly set\n\n#### Greeting Functionality\n\n- Tests default greeting display\n- Tests customized greeting with user input\n- Icon display validation based on input values\n- Uses data-driven testing with Examples table\n\n#### Items Per Page\n\n- Tests pagination functionality\n- Verifies correct number of items displayed per page\n- Data-driven tests with multiple page sizes (5, 10, 20, 50)\n\n### Hacker Stories\n\nBelow are listed the features covered by tests for the Hacker Stories app with some of the tests' details.\n\n#### Last Searches\n\n- Tests search functionality in the Hacker Stories application\n- Validates last search terms are displayed as buttons\n- Uses data tables for multiple search term testing\n\n### Remove Stories\n\nValidates that removing a story from the Hacker Stories list updates the count from 20 to 19 stories.\n\n## 🏷️ Test Tags\n\nThe project uses Cucumber tags for test organization:\n\n- `@smoke` - Critical functionality tests that run in the smoke test suite\n- `@engagesphere` or `@hackerstories` to specify which apps tests should run\n- Tests can be filtered using tags in npm scripts\n\n## 📊 Reporting\n\n- HTML reports are generated using the Cucumber preprocessor\n- Reports are configured in `.cypress-cucumber-preprocessorrc.json`\n- Generated report file: `cucumber-report.html`\n\n## 🔧 Configuration\n\n### Cypress Configuration (`cypress.config.js`)\n\n- Uses ES modules syntax\n- Configured with Cucumber preprocessor and esbuild\n- Spec pattern set to `**/*.feature` files\n- Environment variables for filtering specs\n\n### Cucumber Configuration (`.cypress-cucumber-preprocessorrc.json`)\n\n- HTML reporting enabled\n- Additional configuration options available\n\n## 📝 Writing Tests\n\n### Feature Files\n\nWrite feature files using Gherkin syntax in the `cypress/e2e/` directory. Examples include:\n\n**Basic Scenario:**\n\n```gherkin\nFeature: Feature Name\n\n  Scenario: Test scenario description\n    Given I have a precondition\n    When I perform an action\n    Then I should see the expected result\n```\n\n**Data-driven Testing with Examples:**\n\n```gherkin\nFeature: Greeting\n\n  @smoke\n  Scenario: shows a customized greeting\n    When I type \"\u003cname\u003e\" in the name input field\n    Then I see the following greeting: Hi \"\u003cname\u003e\"!\n    And I see the following icon: \"\u003cicon\u003e\"\n\n    Examples:\n      | name     | icon            |\n      | Walmyr   | none            |\n      | Squirrel | lucide-squirrel |\n```\n\n**Data Tables for Multiple Values:**\n\n```gherkin\nFeature: Hacker Stories - Last Search\n\n  Scenario: shows the last three searched terms as buttons\n    Given I access the Hacker Stories web app\n    When I search for these terms\n      | Vue | Svelte | Angular |\n    Then I see \"3\" buttons, one for each of the last searched terms\n```\n\n### Step Definitions\n\nImplement step definitions in JavaScript files alongside feature files or in the shared `common.js` file:\n\n```javascript\nimport { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'\n\nGiven('I have a precondition', () =\u003e {\n  // Implementation\n})\n```\n\n## 🎯 Target Applications\n\nTests are designed to run against multiple applications:\n\n### EngageSphere Application\n\n- URL: `https://engage-sphere.vercel.app/`\n- Cookie consent functionality\n- User greeting interface with customizable names and icons\n- Data table with pagination controls\n\n### Hacker Stories Application\n\n- URL: `https://wlsf82-hacker-stories.web.app/`\n- Search functionality for Hacker Stories\n- Last searches feature with button display\n- Dynamic search term management\n- Stories removal\n\n## 🤝 Contributing\n\n1. Follow the existing project structure\n2. Write descriptive feature files using Gherkin syntax\n3. Implement step definitions in appropriate locations\n4. Use meaningful tags for test organization\n5. Ensure tests are independent and can run in any order\n\n## 📚 Resources\n\n- [Cypress Documentation](https://docs.cypress.io/)\n- [Cucumber in Cypress: A step by step guide](https://filiphric.com/cucumber-in-cypress-a-step-by-step-guide#configuration)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwlsf82%2Fcucumber-salad","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwlsf82%2Fcucumber-salad","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwlsf82%2Fcucumber-salad/lists"}