How to use Cucumber and Selenium WebDriver effectively for BDD test automation (part 1)

This tutorial focuses on how Cucumber and Selenium WebDriver can be used to implement Behaviour Driven Development (BDD) automated tests, and adopting programming best practices. We will be using Selenium WebDriver with JavaScript.
Cucumber is a BDD tool that uses the Gherkin language to describe software behavior in a human-readable format, without the need to go into implementation details of writing out codes. Hence, bridging the communication gap between the business and development team.
Selenium WebDriver is a tool used to simulate application usage through automation of user interactions with different parts of the application. This helps to verify that the app works as expected.

SETTING UP

Below is a file structure for a simple case study

e2e
├── config.js
│   │
├── features
│   │
│   ├── app.feature
│   │
│   ├── step-definitions
│   │   ├── app.js
│   │
│   ├── support
│   │   ├── world.js
│   │   ├── hooks.js

We will be using chrome for testing, although Selenium WebDriver is cross-browser compatible. Install the test dependencies.

$ npm install selenium-webdriver cucumber chromedriver -D

So, you should have the following in package.json devDependencies

{
   ...
  "scripts": {
      "e2e-test": "cucumber-js e2e"
  },
  "devDependencies": {
      "chromedriver": "^83.0.0",
      "cucumber": "^6.0.5",
      "selenium-webdriver": "^4.0.0-alpha.7"
   }
 }

NOTE: For WebDriver to work, the version of the installed chromedriver module and the chrome on your computer must be the same, up to the version patch. To ensure that this versioning is always compatible irrespective automatic of updates of your chrome browser, create a .npmrc file in your root directory and add this rule to it. It ensures that the installed chromedriver version will always be the same as your chrome browser.

detect_chromedriver_version=true

To complete the setup, add the following to your files, as specified:

e2e/config.js

module.exports = {
  timeout: 10000,
  browser: 'chrome',
  baseURL: 'mail.google.com'
};

e2e/features/support/world.js

const seleniumWebdriver = require('selenium-webdriver');
const {setWorldConstructor, setDefaultTimeout} = require('cucumber');
const {timeout, browser} = require('../../config');

class CustomWorld {
  constructor() {

    this.driver = new seleniumWebdriver
      .Builder()
      .forBrowser(browser)
      .build();
  }
}

setDefaultTimeout(timeout);
setWorldConstructor(CustomWorld);

e2e/features/support/hooks.js

const {Before, After} = require('cucumber');

Before(function() {
  return this.driver.manage().window().maximize();
});

After(function() {
  return this.driver.quit();
});

TESTING

To ensure the reusability of step-definitions for similar test cases, it is encouraged to use stringed-arguments in cucumber scenarios.
Considering behaviours for Gmail sign in as a case study, paste the following cucumber scenarios into the app.feature file

Feature: Gmail sign in
  As a Gmail user
  I want to be able to sign in to my Gmail Account

  Scenario: A user signing in with invalid email should get an error message indicating that email cannot be found
    Given A user visits mail.google.com
    Then the user should see the following navigation options
    	| OPTIONS		|
        | Sign in		|
        | Create an account	|
    When the user clicks on "Sign in" option
    Then the user should see the following texts
    	| TEXTS			|
        | Sign in		|
        | Continue to Gmail	|
    When the user enters "email" into the "email input" field
    And the user clicks on "Next"
    Then the user should see "Couldn't find your Google Account" error message
    
  Scenario: A user signing in with valid email and invalid password should get an error message indicating wrong password
    Given A user visits mail.google.com
    Then the user should see the following navigation options
    	| OPTIONS		|
        | Sign in		|
        | Create an account	|
    When the user clicks on "Sign in" option
    Then the user should see the following texts
    	| TEXTS			|
        | Sign in		|
        | Continue to Gmail	|
    When the user enters "<email>" into the "email input" field
    And the user enters "pas" into the "password input" field
    When the user clicks on "Next"
    Then the user should see "Wrong password" error message
    
  Scenario: A user signing in with valid email and valid password should sign in successfully and the user identity should be visible on the page
    Given A user visits mail.google.com
    Then the user should see the following navigation options
    	| OPTIONS		|
        | Sign in		|
        | Create an account	|
    When the user clicks on "Sign in" option
    Then the user should see the following texts
    	| TEXTS			|
        | Sign in		|
        | Continue to Gmail	|
    When the user enters "<email>" into the "email input" field
    And the user enters "<password>" into the "password input" field
    When the user clicks on "Next"
    Then the user should see the Google Account used to sign in to the email

PART 2 contain the step-definitions for this BDD test and further explanations on the BDD approach.