Cook your Gherkin in Cypress Cucumber!

The best ever good news for me in Cypress journey is that it is supporting Cucumber with Gherkin!

While developers hate writing tests, Cypress discovers fully baked batteries included with some stunning key features such a Debuggability on Real-Time, Spies, Stubs, and Clocks, Network Traffic Control, and not only that it supports to capture the screenshot of the video when your entire test suite when run from the CLI.
What else a developer need to have to be blown away?

Assuming that you have already experience with writing tests in Cypress using modern Javascript, I want to share how to keep your end-to-end tests, interaction tests, and unit tests in an English Intuitive way further with Gherkin step definitions.

Let’s get started!

1. Installation

Install the cucumber plugin:

npm install --save-dev cypress-cucumber-preprocessor

2. Cypress Configuration

Go to the cypress/plugins/index.js

Add the below configuration.

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

3. Configure the Feature File support.

Add support for feature files to your Cypress configurationcypress.json

{
  "testFiles": "**/*.feature"
}

This is where we make the `.feature` files are supported.

All Good!

Now let’s get started baking your tests! You can always put your feature files in `cypress/integration/`

signIn.feature

Feature: SignIn

  I want to access the system while login
  
  @focus
  Scenario: User can sign in with valid creds
    Given @nav I'm on the client page
    When @signIn I enter valid username as "admin"
    When @signIn I enter valid password
    Then @signIn I click to Submit
    Then @signin.assertions I can see the Dashboard

I know you are so curious about the step definitions behind this.

Now let’s look seek into the step definition.

All the .js files you may import the Gherkin keys through the cucumber re-processor like below

import { Given } from "cypress-cucumber-preprocessor/steps";

Likewise, you can keep importing the basic Gherkin hooks below.

Given, When, Then, And, But for steps (or *)

const url = 'https://testpractices.com'
Given('@nav I'm on the client page', () => {
  cy.visit(url)
})

Moving on to the next step defs!

When('@signIn I enter valid username as {string}', (username) => {
  cy.get.('@userNameInput').type(username); 
})

The best news is that you can re-use your step definitions while putting them in cypress/integration/common/ folder

Run

Launch your Cypress GUI Runner in your favourite way!

cypress open

OR

npx cypress open

Click on the .feature file and let the Magic happen!

Best IDE support for Gherkin

To get the best support with intellisence in your IDE, with Visual Studio Code you can get Cucumber (Gherkin) Full Support extension imported from the marketplace.

Note, that unlike WebStorm which will correctly identify multiple implementations of matching steps, the vscode extension currently resolves to the first matching occurrence it finds on its path.

Wanna hear more?

Cypress with Cucumber processing is not just what I mentioned above! I have only scratched the surface to give you the appetizer.

It has derived far more ahead with fascinating features where you can develop tests towards a bundled feature files, enabling data table parameterization, routes(), allowing background counters as listeners, sharing contexts and smart tagging!

I know testing is crucial and tedious! But the more you test will keep your product more in quality and reliable!

Stay tuned to hear from my hands-on experiences in Cypress — Cucumber journey!

Feel free to reach me out for anything I can respond during your experience and please share your experience in Cypress journey.

Happy Testing!