Writing E2E tests with Gherkin, Cucumber, and Selenium

Now, we are ready to integrate with tools that can mimic user interaction with a browser. For our first test, let's test something very simple—a user will type in a valid email, but their password is too short. In this case, we want to assert that the Register button will be disabled.

Like our backend E2E tests, we will be writing our test cases in Gherkin, and using Cucumber to run our scenarios. So, let's add these as development dependencies:

$ yarn add cucumber babel-register --dev

Then, we need to create feature files and step definition files. For our first scenario, I have opted to group the features and steps in the following structure:

$ tree --dirsfirst spec
spec
└── cucumber
    ├── features
    │   └── users
    │       └── register
    │           └── main.feature
    └── steps
        ├── assertions
        │   └── index.js
        ├── interactions
        │   ├── input.js
        │   └── navigation.js
        └── index.js

Note...