E2E Testing with Cucumber and Playwright

Write BDD E2E tests using Cucumber and Playwright. While both tools support multiple programming languages (Python, Java, Javascript, and more), I will focus on my language of choice which is Javascript (more specifically — Typescript).

Why BDD (Behavioral Driven Development)?

In BDD you write your system requirements in structural but natural language. Writing End-to-End tests in a natural language enlarges the audience that can read and use them. This means your Product Management and Customer Success teams can read and comment on your tests without knowing any programming language.

Gherkin is a BDD language that uses some keywords to describe the scenarios. The general structure of Gherkin tests looks like this:

Feature: Title of the Scenario
Given [Preconditions or Initial Context]
When [Event or Trigger]
Then [Expected output]

You can imagine a Gherkin feature for a shopping site to look as follow:

Feature: Buy an item
Given anonumous user is on the main site
When user searches for "a horse walks into a bar"
Then results list contains 5 items
When user selects "a horse walks into a bar" book
And user adds selected book to the cart
And user goes to shopping cart
Then cart contains 1 item

If you compare the above to a test scenario written in a language like Javascript it is easy to see why the Gherkin syntax makes easier communication.

describe('shopping', () => {
   test('buying a book item', async () => {
      await goto('https://my-shopping.com');
      await enterSearchItem('A horse walks into a bar');
      const resultListLength = await resultsPage.getList();
      expect(resultListLength).toEqual(5);
      await selectItem('a horse walks int a bar');
      await addSelectedToList();
      const shoppingCartTotalItems =  await             
shoppingCart.getTotalItems();
      expect(shoppingCartTotalItems).toEqual(1);
   });
});

The clear syntax of Gherkin also allows for building complex business scenarios that require multiple steps and are still easy to read and understand.

Why Cucumber?

Cucumber is the most popular testing framework for writing Gherkin tests. Cucumber reads the Gherkin feature (usually stored in .feature files) and executes each step in the test.

To define a Gerkin step, you use the cucumber syntax to parse the text and execute the relevant code.

Given('anonumous user is on the main site', async function () {
// Step implementation goes here
}

Gherkin steps support enhanced parameters to define the steps. A simple parameterized step can be written as:

When('user searches for {string}', async function (
  searchTerm: string
) {
// Step implementation goes here
}

A more complex step can use Regex expressions to define the steps:

When(/^user selects "([^"]+)" (book|movie)$/', async function (
  title: string, 
  itemType: string
) {
// Step implementation goes here
}

Why Playwright?

The last part is the implementation of the steps. For a web-based system, this means that a browser automation tool is needed. The most popular tool is Selenium but a new generation of tools now exists allowing for a faster and better development experience.

The most modern of them is Microsoft’s Playwright. Playwright is built with testing in mind and overcomes most common problems when writing browser-based test automation. I detailed some of the reasons why I think Playwright is awesome.

Putting it All Together

Typescript is your main programming language? here is some good news for you! I have created a starter repository that has cucumberjs, playwright, and Typescript. Just click on the “Use this template” button and you can start writing your own tests.

Tallyb/cucumber-playwright

E2E tests are written from the user’s perspective so you can use this automation regardless of the development framework of the underlying system, be it React, Vue, Angular, Jquery, or even vanilla Javascript.

To make it even more fun, I threw in some goodies:

• Screens snapshotting that are included in the test report
• An option to run the test and record its execution in a video (thank you Playwright!)
• VSCode configuration to run and debug a single feature.

You are welcome to leave comments to share your experience and opinions.