TestCafe Implementation in DANA- Part 3 : Gherkin

Reynold Vinson Chen
DANA Product & Tech
5 min readNov 6, 2020

--

TestCafe with Gherkin helps automation testing by simplifying multiple test cases into one scenario using scenario outline.

Before you read this section, we recommend you to read our TestCafe series:

Gherkin Cucumber and the advantages

First of all, we have to know about cucumber before we know Gherkin. Cucumber is a tool that support behaviour-driven development. It also reads executable specifications written in plain text and validates the software does what the specifications say, for example Gherkin syntax.

Source: https://cucumber.io/

Gherkin is a format that compatible with cucumber tools to help describe business behaviour and as line-oriented language similar to YAML and Python. This format deliver main purposes, as a documents for user scenarios and for writing an automation test.

There are several advantages using Gherkin cucumber on writing automation, such as:

  • Scenario outline feature on Gherkin that helps reduce redundancy on writing repetitive scenario by only changing the variables,
  • Gherkin is simple enough for non-programmer even business executives to understand the scenario,
  • Because Gherkin makes user stories easier to digest, it will target the business requirement easily, and
  • Gherkin can link acceptance tests directly to automated tests.

To know more about gherkin and its advantages, you can go to this link

DANA POM architecture with Gherkin TestCafe

From Part 1, we can see the POM (Page Object Model) are consists of two big sections, Tests and Page Objects, for Page Objects consist of Pages and Components, and for Tests consist of test cases steps that will run. Gherkin implementation use POM that quite different from Part 1, which Tests will split into Features and Step Definitions, Page and Components that consist of data or even image if needed and all of these sections will be on the same file, page-objects.

Therefore, the structure of POM using Gherkin can be seen as shown below on the right side and at the left side for POM from the part 1 so that you can see the differences.

POM without gherkin (left) and POM with gherkin (right)

For Gherkin’s POM, page will provide element selectors and components provide variables and images that needed for testing purposes. After that, automation test will run based on selected features with linked step definitions.

Each sections of Gherkin’s POM have their unique functions, which are :

  • Features is a collection of scenarios consist of test cases. Automation testing is executed by run this feature file based on Gherkin syntax that have been declared and linked with step definitions.
  • Step Definitions is a bunch of steps that will run when automation test is executed, assisted by pages and components file .This file is similar to test.js file on TestCafe Implementation Part 1.
  • Pages consist of all elements that have been defined as selector on each page where automation test is executed.
  • Components consist of main data that will used in step definitions file, also store images needed in automation testing.

How to Implement ?

We will use DANA Website on Part 1 as example to implement Gherkin. First, we create page-objects folder. You need to know this kind of folder name cannot use blank space, hence don’t use it 😄.

Next, follow these steps so that you can try TestCafe automation using Gherkin by yourself:

1. On page-objects folder, create 4 new folders with named components, features, pages, and step_definitions. On each folder, create new file with the same name as shown image below on the right side. On the left side, you can see the folder structure that used on part 1 so that you can compare it side-by-side.

Folder structure without gherkin (left) and with gherkin (right)

2. Create a MainData.js file that will contain all data needed for testing. In this case, the data needed is only DANA Website url.

3. After creating MainData.js, the next step is to complete the GamePage.js which contain the elements on the DANA’s game page and all of the elements are stored into constructor.

Besides constructor, we could also declare function that can be used for combining multiple commands into one so that on step definition file, the command looks shorter than it should be.

4. Next, complete the game-step.js file with all steps needed in the test. Remember to import MainData and GamePage to this file.

In step definition file, we already use the Gherkin syntax (Given, When, Then) followed by the format shown above. You need to know that any steps will not do anything unless we write it on feature file. Therefore after completed game-step.js, you also need to complete game.feature.

5. Complete the game.feature file as shown in the script below.

As mention before, one of the advantages using Gherkin syntax is Scenario Outline. By this example you can apply that so no need to write repetitive steps, just change on the variables.

6. To run all of these scenarios, use this command npm run test-cucumber — — tags “@GameFeature”, and if you want to run specific scenario, it can be done by change the tags to scenario tags you want to run for example to run first scenario, use command npm run test-cucumber — — tags “@ValidGameName”, and if you want to run all of the feature file in features folder, just use command npm run test-cucumber and it will run all feature file on the same folder in alphabetically descending order.

Summary

Implement Gherkin on TestCafe will help tester to reduce redundancy steps that usually occurs on automation testing by declaring steps that can be use on many scenarios so that testing will become more convenient.

Aristotle once said “What we have to learn to do, we learn by doing” so that will conclude, happy learning and trying 😃

Sources:

--

--