Search code examples
reactjscucumbercypress

Improve Cypress structure and reuse Given step in multiple files

I am using Cypress and Cucumber for my end to end test.

I have the following Cypress structure:

page-one/
another-page/
cypress/integration/page-one/check-hero.js
cypress/integration/page-one/check-custom-block.js
cypress/integration/page-one.feature
cypress/integration/another-page.feature

Inside both files check-hero.js and check-custom-block.js I have:

Given('I navigate to page one', () => {
  cy.visit(`${Cypress.env('baseUrl')}/page-one`);
});

Can I improve this structure to make it more DRY and to reuse this Given step in multiple files?

Solution

  • You can create reusable step definitions as they call it in the official docs for cypress-cucumber-preprocessor.

    You can create a file in cypress/integration/common/ with your Given step and then use it in both cypress/integration/page-one/check-hero.js and cypress/integration/page-one/check-custom-block.js. If I understand the documentation well, the file with reusable steps can have really any name, let's say visit.js in your example.