How to pass data dynamically to your test scenarios or step definition using Tables in cucumber BDD framework with playwright

October 18, 2023

Introduction

Test Parameterization is a type of data-driven testing that allows you to execute the same test, multiple times using different parameters.

In the Playwright Cucumber BDD framework, parameterization refers to the ability to pass data or variables dynamically to your test scenarios or steps. This allows you to reuse scenarios with different inputs or test different variations of the same scenario.

Benefits of Data-Driven Testing and Test Parameterization

  • Tests are simple to comprehend, maintain and administer.
  • Execute the same test many times with various inputs to reduce the number of test cases required.
  • Execution time is cut in half.
  • Time-saving by avoiding the creation of repetitive test cases.
  • Tests and outcomes are better organised.
  • Reduces the amount of testing that is done twice.

Examples of Parameterization

Example 1. Simple Parameterization

In the below example we are parameterising the URL of the application which is to be tested

Feature file: Here we are parameterizing the URL of the application in the feature file.

Feature: Test Application URL
  Scenario: Access the application
    Given I open the URL ""
    When I verify the page title
    Then I should see the correct page title

Step Definition file: Here we are passing that parameter as ‘url’ in the function. Need to keep string as it is in the curly brackets but have to change parameters in the function from string url (whatever you wanted to give the name of string). Here we kept that as url.

Given('I open the URL {string}', function (url) {
  page.goto(url);
});

Page file: Here we are getting that parameter from step definition, passing it into the page file method and passing that in the statements of the method.

async function openUrl(url) {
  await page.goto(url);
}

Example 2. Passing Email and Password Values

In the below screenshot we can pass email Id and password values from feature file or from step definition file to fill the text input fields.

Parameterizing Country Values

We can also pass value in the locators also using the parametrisation techniques.

Like in the below example we passed country value from feature to step file, from step file to page file. So that we can dynamically select whichever country we want.

Example 3. Scenario Outline in Playwright Using Cucumber BDD Framework

Scenario Outlines in Cucumber are used to run the same scenario multiple times with different sets of data. To use Scenario Outlines with Playwright in a Cucumber test, you can follow these steps:

Step 1: Define Your Feature File

Create a. feature file where you define your scenario outline using the Scenario Outline keyword. Map the placeholders in your step definitions: In your step definition files, you need to map the placeholders (e.g., <value>, <result>) to variables that will receive the values from the Examples table.

Feature: Test User Registration
  Scenario Outline: Verify user registration
    Given I visit the registration page
    When I fill in the form with "" and ""
    Then I should see a success message
  Examples:
    | email           | password  |
    | test@example.com | password123 |
    | demo@example.com | demo123

Step 2: Map the Placeholders in Your Step Definitions

Create a step file where you implement the step definitions for your feature file. In these step definitions, you can capture the values and perform the desired actions. Use the parameter values in your step definitions: Inside the step definitions, you can use the received parameter values (value, result) to perform the desired actions or assertions.

Given('I fill in the form with {string} and {string}', function (email, password) {
  // Code to fill in form with email and password
});

Step 3: Implement Step Definitions

Create a step file where you implement the step definitions for your feature file. In these step definitions, you can capture the values and perform the desired actions. Use the parameter values in your step definitions.

In the above example, the first set will execute with 10 as value and verify result as Success. The second set will execute with 20 as value and verify result as Failure.

When you run the tests, Cucumber will generate separate test runs for each set of data defined in the Examples section of the Scenario Outline. The step definitions will be executed with the corresponding values, allowing you to perform the necessary actions or validations using Playwright.

Parameterizing Data from Tables

To retrieve data from tables in playwright using cucumber BDD framework

Step 1: Define Data Tables in the Feature File

In Your feature file, define a Data table using the pipe-separated values or any other format you prefer.

For Example:



Feature: Test Login
  Scenario Outline: Verify user login
    Given I enter the login credentials "" and ""
    Then I should see the login success message
  Examples:
    | username        | password    |
    | user1@example.com | pass1     |
    | user2@example.com | pass2     

Step 2: Create Step Definition in Your Step Definition File

Create step definition in your step definition file (usually a JavaScript file). In these step definitions, you can capture the values and perform the desired actions by implementing the code. Use the parameter values in your step definitions: Inside the step definitions, you can use the received parameter values to perform the desired actions or assertions.

For example:

Given('I enter the login credentials {string} and {string}', function (username, password) {
  // Code to handle login with username and password
});

Step 3: Run Your Cucumber Tests

Run your Cucumber tests Ensure you have the necessary dependencies installed, such as Cucumber, Playwright, and any other required libraries. Then, run your Cucumber tests using the command appropriate for your setup.

During the execution, the Data Table values will be passed as arguments to the corresponding step definition function. You can access and utilize the data within the step definition as needed.

Remember to customize the step definition code to fit your specific application and actions required.

Methods to Retrieve Data from Tables of Feature Scenarios

We used raw (), rows () and hashes () to retrieve data from table in our project.

Let’s see how to use raw (), rows () and hashes ()

raw() Function :

raw () and rows () function is not a built-in function for retrieving data from tables. raw () functions do not exclude the header row from the returned data.

Here’s an example of how to use the rows () function in a Cucumber step definition:

The raw() function does not exclude the header row from the returned data. Here’s an example:

const data = table.raw();

rows() Function 

rows () function is not a built-in function for retrieving data from tables. The rows () function is used to retrieve the data from a data table as an array of arrays, similar to the raw () function. However, unlike raw (), rows () exclude the header row from the returned data.

Here’s an example of how to use the rows () function in a Cucumber step definition:

The rows() function excludes the header row from the returned data. Here’s an example:

const data = table.rows();

hashes() Function

The hashes () function is used to retrieve the data from a data table in a Gherkin scenario. It returns data as an array of objects, where each object represents a row in the data table.

The keys of the object are derived from the header row of the data table, and the values are taken from the corresponding cells. similar to the hashes () function.

Here’s an example of how to use the hashes () function in a Cucumber step definition:

Here’s an example:

const data = table.hashes();

Conclusion

These functions provide flexibility in accessing and manipulating data from data tables in Cucumber scenarios using Playwright, allowing you to handle various table structures and perform operations based on the test data provided in the scenarios.
Note: The above steps assume you have already set up your Cucumber framework with Playwright and have the necessary configurations in place.

We at Varseno, provide Software Development Services for all business websites to improve their reliability, scalability and stability. Reach out to us for any web app services.