{"id":22672242,"url":"https://github.com/jimlynchcodes/simple-bdd-cypress-cucumber-example","last_synced_at":"2025-08-28T06:12:11.641Z","repository":{"id":40934331,"uuid":"207933796","full_name":"JimLynchCodes/Simple-BDD-Cypress-Cucumber-Example","owner":"JimLynchCodes","description":"A single feature BDD Testing example with Cypress.js \u0026 Cucumber.js!  🥒👍","archived":false,"fork":false,"pushed_at":"2023-01-04T10:02:20.000Z","size":843,"stargazers_count":3,"open_issues_count":13,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-26T07:11:09.622Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JimLynchCodes.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}},"created_at":"2019-09-12T00:53:10.000Z","updated_at":"2020-12-16T18:18:37.000Z","dependencies_parsed_at":"2023-02-02T08:02:07.101Z","dependency_job_id":null,"html_url":"https://github.com/JimLynchCodes/Simple-BDD-Cypress-Cucumber-Example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JimLynchCodes%2FSimple-BDD-Cypress-Cucumber-Example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JimLynchCodes%2FSimple-BDD-Cypress-Cucumber-Example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JimLynchCodes%2FSimple-BDD-Cypress-Cucumber-Example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JimLynchCodes%2FSimple-BDD-Cypress-Cucumber-Example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JimLynchCodes","download_url":"https://codeload.github.com/JimLynchCodes/Simple-BDD-Cypress-Cucumber-Example/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248565598,"owners_count":21125525,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":[],"created_at":"2024-12-09T16:18:30.330Z","updated_at":"2025-04-12T12:24:24.264Z","avatar_url":"https://github.com/JimLynchCodes.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Simple Cypress Cucumber Example\n\n\n\n## What's Here\nThere is no front-end project here, it's just one, full cucumber.js + cypress.js  Feature for \"showing results for what you meant instead of what you said\" by using Google.com's search and checks that when you misspell \"hello world\" as \"hello werld\" it corrects it and gives you results for \"hello world\".\n\n\n## Usage\n\nI used node v10.16.0 for this example:\n\n```\nnvm i v10.16.0\nnvm use v10.16.0\n```\n\nIf you just cloned this repo, install the dependencies:\n```\nnpm i\n```\n\nAt this point, all you gotta do is run either the cypress \"open\" or \"run\" commands depending on how you want to run the tests (ui mode or headless mode).\n\nwatch the automated tests:\n```\nnpm run cypress:open\n```\n\nor to run tests in headless mode:\n```\nnpm run cypress:run\n```\n\nThese commands should run the regular ol' cypress test and the feature file + the step definition file version of the test.\n\nIn the end the cucumber tests are all you really need, but the nicer browsersync updates makes developing in non-cucumber cypress a slightly nicer developer experience.\n\n\n## How To Remake This Project\nIf you want to set up cypress and cucumber from scratch in your repo, follow this guide. \n\n\n## Part 1 - Setup Cypress\n\n1. First, build choose repo where you want cypress.\n\n2. Next, initialze a project and created a package.json file.\n\n```\nnpm init\n```\n\n3. Install cypress\n\n```\nnpm install cypress --save-dev\n```\n\n\nYou can run cypress tests like this\n\n```\nnpm run cypress:open\nnpm run cypress:run\n```\n\n_Note: I guess there is something about \"cypress open\" that it will check if you have a cypress.json file and cypress directory already in the root of your project. If not, it will scaffold out a shit-ton of files for you. 👍_\n\n\nHere's some gherkin I came up with that describes the \"shows what you meant\" feature:\n\n```\nFeature: \"Showing Results Instead\"\n\n  Scenario: Mispelling hello world As hello welrd\n\n    Given I open the Google home page\n    When I type \"hello werld\" into the search and hit enter\n    Then I should see that the results are for \"hello world\".\n```\n\nI then built this out as a raw cypress test without cucumber, and that file is located here:\n`./cypress/examples/google-hello-werld-cypress-only.js`\n\nOnce I had this working, I went on to install cucumber.js!\n\n### Cucumber Stuff\n\n\n- Installed the \"cypress-cucumber-preprocessor\":\n```\nnpm i cypress-cucumber-preprocessor --save-dev\n```\n\nThen go to `cypress/plugins/index.js` and, bring in the cucumber function with require and add a line in my so that that line so that cypress knows to use this cucumber preprocessor:\n\n```\nvar cucumber = require('cypress-cucumber-preprocessor').default\n\nmodule.exports = (on, config) =\u003e {\n  on('file:preprocessor', cucumber());\n};\n\n```\n## Create Feature Folder With Feature Files\n\nCreate a folder named \"features\" within `cypress/integration` and place feature files there containing gherkin.\n\n## Create Step_Definitions Folder With Step Definition Files\n\nCreate a folder \"step_definitions\" within `cypress/support` and place step definition files there. Use `/cypress/support/step_definitions/google-hello-world.js` as a template.\n\nFor me it was very important to put the things above in these specific directories since these were the only locations where my files were actually found and run properly by cypress \u0026 cucumber.\n\n---\n\nTo run the cucumber specs first open cypress with `npm run cypress:open` and click on the feature files.\n\nTo run in headless mode: `npm run cypress:run`\n\n_Note, you can also ignore everything but the feature files by adding the option in `cypress.json`._\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjimlynchcodes%2Fsimple-bdd-cypress-cucumber-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjimlynchcodes%2Fsimple-bdd-cypress-cucumber-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjimlynchcodes%2Fsimple-bdd-cypress-cucumber-example/lists"}