Angular E2E with Cypress and Cucumber

We are going to look into how to integrate Cucumber with Cypress for Angular E2E testing.

I am taking Tour of Heroes application which can be downloaded from here. You can find details about the application here.

Once the application is up and running, next step would be to install Cypress:

npm i cypress --save-dev

This will create a folder named “cypress” at the top level of project directory:

“Cypress” folder

Now Cypress can be run from command prompt at project root level using “./node_modules/.bin/cypress open” or “$(npm bin)/cypress open”. But rather than remembering the command, we can add this under scripts section in package.json file:

This will help us to run Cypress Electron app using:

npm run cypress:open

Next part is to integrate Cucumber to write Gherkin-style syntax for E2E testing. To do this, we need to install ‘cypress-cucumber-preprocessor’ package. Detailed setup instructions can be found here. Basic steps are -

1. Install the package -
   npm install — save-dev cypress-cucumber-preprocessor
2. Add below line in cypress/plugins/index.js:

const cucumber = require(‘cypress-cucumber-preprocessor’).default
module.exports = (on, config) => {
  on('file:preprocessor', cucumber())
}

3. In package.json, add below line:

“cypress-cucumber-preprocessor”: {
   "nonGlobalStepDefinitions": true
}

Once the configuration is done, I created following structure -

Folder Strusture

As shown above, I created -

1. ‘cucumber’ folder under integration folder
2. created a feature file ‘ToHTest.feature’
3. created a step definition file under cucumber -> ToHTest

In ToHTest.feature, I wrote the spec like this -

Basically, we are doing -

1. Created a feature with feature name “ToHTestFeature”
2. Created a new scenario “Add new Hero”
3. Mention the steps using ‘Given’ and ‘And’ keywords

I installed “Cucumber (Gherkin) Full Support” extension in VS Code to write above spec. This is quite handy.

To make above spec running, we need to write all steps definition in ToHTest.js :

As shown above, we basically wrote definitions for all steps mentioned in feature file.

And that’s it. This will make the spec running :