E2E Testing with BDD and Cypress.io

What is E2E testing?

End-to-end testing is a process of testing our entire application from start to finish utilizing written test scenarios and automated test software. These tests are written and ran to simulate real user scenarios.

Whether it be testing new features, or integration between components, end-to-end testing is key at catching bugs, flagging regressions, and overall validation of the system as interacted with by the user.

What is BDD?

Behavior-Driven Development (BDD) (which has evolved from Test Driven Development or TDD), is an example-driven way of communicating behavior of our software that is shared between both non-technicals and developers. It is written in plain-text easy-to-understand language. This syntax is called Gherkin.

Let’s look at an example test scenario written in Gherkin:

Given I visit google.com
When I type in a search query
Then I should see related results

Given the easy to understand language, this allows application requirements to be written by the business, included in user stories and shared with developers where they can then be used for automated testing. It follows the Given, When, And, Then structure.

Turning the above Gherkin Scenario into an automated test is actually very easy and straight-forward utilizing the Cucumber.js test framework along with Cypress.io.

Why Cypress.io?

For many years, selenium’s testing suite has been the standard for automating web-based applications and has been the basis of many automation strategies. It also has a steep learning curve for newcomers and requires a bit of preparation and set-up before you can even begin writing your tests.

Cypress.io, however, is a complete automated test software package that is quick to set up and easy to learn. No third-party drivers or bindings. With a well-documented API and simplified DOM queries akin to jQuery, writing tests has never been simpler.

Before we begin writing our first Automated BDD test, let’s get set up:

Getting Started

Cypress can both be manually downloaded and installed from there website or installed via JavaScript package manager such as npm. Let’s install both cypress and the needed modules into our project:

$ npm install cypress cucumber cypress-cucumber-preprocessor

Once installed, running cypress can be done by:

(from your project root directory)

$ ./node_modules/.bin/cypress open

At this point, you may also want to define this in your package.json file:

"scripts": {
    "test": "./node_modules/.bin/cypress open"
}

so that you can simply run `npm run test` to kick off testing.

Writing our tests

After adding a new project, Cypress will set up the needed directory structure which we will utilize for our testing.

From here, our first step will be adding our `.feature` file. Feature files express the Gherkin syntax in the plain language as exampled earlier. They do not hold the actual test logic but will act as an entry point for our tests.

First, navigate to the `integration` directory where you will create a new feature file named `google-search.feature`.

Within this file, let’s take the earlier Gherkin example and populate the contents:

Feature: Google Search

    Scenario: Search for ICF Next
        Given I visit google.com
        When I type in a search query
        Then I should see related results

Now, create a directory of the same name `google-search`. This will house as many test files as needed for your scenarios. Let’s keep it simple and add a new file within the directory of, yet again, the same name: `google-search.js`.

Within this file, we will write all the accompanied logic for our gherkin feature file:

import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps';
    
    Given('I visit google.com', () => {
        ...
    });

    When('I type in a search query', () => {
        ...
    });

    Then('I should see related results', () => {
        ...
    });

Now you can see exactly where we need to write our logic for our scenarios. These are called “step definitions” and house our instructions and assertions.

Let’s wrap up with some simple JavaScript code to get introduced to the cypress API:

import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps';

    Given('I visit google.com', () => {
        cy.visit('http://google.com')
    });

    When('I type in a search query', () => {
        cy.get('[type="text"]')
            .type('ICF Next')
            .submit();
        });

    Then('I should see related results', () => {
        cy.get('#resultStats')
            .contains('results');
        });

As you can see, DOM queries are akin to jQuery syntax. In fact, with jQuery integrated into Cypress, you can also use any familiar jQuery syntax to query and select any DOM elements.

Hopefully this gave you a basic idea of how to get started in integrating Cypress, Cucumber, and possibly BDD into your development process. There is much more to dive into, so be sure to check out the links below:

https://docs.cypress.io/guides/overview/why-cypress.html

https://cucumber.io/docs/guides/