Hardik Chotaliya

Posted on Nov 7, 2023 • Originally published at hardikchotaliya.hashnode.dev on Nov 6, 2023

🌐 How to Set Up a World Object: Seamlessly Exchange Data Between Steps in WebdriverIO, TypeScript, Cucumber Automation Framework

Learn how to seamlessly exchange data between steps in WebDriverIO TypeScript Cucumber automation framework for better testing efficiency.

🚩 Problem Statement

As an Automation Test Engineer ,

I want to set a Value/Data in one step definition

So that I can access the same value on another step definition in the same feature file of cucumber.

Usage:- Use for data exchange like OrderID, AppID, TestCaseID, Unique Identifiers etc.

🏁 Introduction

In the realm of automation testing, especially with WebdriverIO, TypeScript, and Cucumber, efficiently exchanging data between test steps is crucial. It's like passing the baton in a relay race, where each step relies on the information provided by the previous one. This guide will take you through the process of setting up a World Object, a valuable tool for sharing data between steps in your automated tests.

🚀 The World Object: Your Data Relay

Understanding the Need

Imagine a scenario in which you're testing a web application, and you need to create an application ID in one step. Later on, you must access the same application ID in a different step to continue the flow of your test. The World Object is the solution to this challenge. It allows you to set values in one step and access those same values in another, seamlessly passing data between your test steps.

Scope of the World Object

Before diving into implementation, it's essential to understand the scope of the World Object. The data stored in the World Object is not accessible throughout your entire feature file. Instead, it is available only for the duration of a scenario or iteration. For example, if you're using a scenario outline, the data is available for a single iteration of that scenario.

🛠 Implementation: Step by Step

1. Creating the World Object

The first step is to create a TypeScript file to define your World Object. In your project's step definitions folder, create a file named world.ts. This is where you'll manage your World Object.

import { setWorldConstructor } from "@wdio/cucumber-framework";

class CustomWorld {
    appid: string; // add any properties that you need
    constructor() {
        this.appid = "" // initialize the properties with default values
    }
}
setWorldConstructor(CustomWorld) // set the custom world as the default world

In this example, we're defining a CustomWorld class with an appID field, initialized as an empty string. This field will store the data we want to exchange between steps.

2. Generating and Setting Data

Now, let's assume that in one of your test steps, you generate a value, such as an application ID, and you want to store it in the World Object. You can do this using TypeScript's this operator.

When(/^I login with (\w+) and (.+)$/, async function (username, password) {
    this.appid = 'TestAppID'; //Set appid
    await LoginPage.login(username, password)
});

You can also directly set any value to this.appID. This represents the World Object you've defined.

3. Accessing Data in Another Step

To access the data stored in the World Object in a different step, you can simply use this.appID. Here's an example:

Then(/^I should see a flash message saying (.*)$/, async function (message) {
    console.log("App ID - " + this.appid); //Get appid
    await expect(SecurePage.flashAlert).toBeExisting();
    await expect(SecurePage.flashAlert).toHaveTextContaining(message);
});

This code snippet demonstrates how to retrieve the appID from the World Object and use it in another step.

4. Executing Feature file

Feature: The Internet Guinea Pig Website

  Scenario Outline: <TestID>: As a user, I can log into the secure area
    Given I am on the login page
    When I login with <username> and <password>
    Then I should see a flash message saying <message>
    Examples:
      | TestID | username | password | message |
      | Test_01 | tomsmith | SuperSecretPassword! | You logged into a secure area! |
      | Test_02 | foobar | barfoo | Your username is invalid! |

🌍 Real-world Application

In real-world automation projects, you can use the World Object to store and exchange various types of data, not just strings. You can work with boolean values, numbers, objects, arrays, and more. This flexibility makes it easy to pass the right information between steps, enhancing your test automation capabilities.

https://github.com/hardikchotaliya/WebdriverIO-TS-Cucumber-e2e

🎬 A Demonstration

Let's see the World Object in action by running a sample test:

>> npm run wdio-local

In this demonstration, you'll observe how the appID is passed from one step to another, effectively exchanging data between steps.

Terminal Output

Execution of 1 workers started at 2023-11-05T14:02:28.910Z

[0-0] RUNNING in chrome - file:///features/login.feature
[0-0] App ID - TestAppID
[0-0] App ID - TestAppID
[0-0] PASSED in chrome - file:///features/login.feature

 "spec" Reporter:
------------------------------------------------------------------
[chrome 119.0.6045.105 mac #0-0] Running: chrome (v119.0.6045.105) on mac
[chrome 119.0.6045.105 mac #0-0] Session ID: 8ed26c36093cd2301632f76100542350
[chrome 119.0.6045.105 mac #0-0]
[chrome 119.0.6045.105 mac #0-0] /features/login.feature
[chrome 119.0.6045.105 mac #0-0] The Internet Guinea Pig Website
[chrome 119.0.6045.105 mac #0-0] Test_01: As a user, I can log into the secure area
[chrome 119.0.6045.105 mac #0-0] Given I am on the login page
[chrome 119.0.6045.105 mac #0-0] When I login with tomsmith and SuperSecretPassword!
[chrome 119.0.6045.105 mac #0-0] Then I should see a flash message saying You logged into a secure area!
[chrome 119.0.6045.105 mac #0-0]
[chrome 119.0.6045.105 mac #0-0] Test_02: As a user, I can log into the secure area
[chrome 119.0.6045.105 mac #0-0] Given I am on the login page
[chrome 119.0.6045.105 mac #0-0] When I login with foobar and barfoo
[chrome 119.0.6045.105 mac #0-0] Then I should see a flash message saying Your username is invalid!
[chrome 119.0.6045.105 mac #0-0]
[chrome 119.0.6045.105 mac #0-0] 6 passing (5.6s)

Spec Files: 1 passed, 1 total (100% completed) in 00:00:10

Note:- App ID we are getting twice because we are calling the feature file twice as it has Example data!

🔴 Possible Errors/Issues

Below are the possible Errors/Issues we may face while implementing this World object in the Automation framework.

Error - TypeError: Cannot set properties of undefined (setting 'appid')

Terminal Error while running script -

Execution of 1 workers started at 2023-11-05T11:20:18.140Z

[0-0] RUNNING in chrome - file:///features/login.feature
[0-0] Error in "0: When I login with tomsmith and SuperSecretPassword!"
TypeError: Cannot set properties of undefined (setting 'appid')
    at CustomWorld.<anonymous> (file:///Users/name/Documents/workspace/WebdriverIO-TS-Cucumber-e2e/features/step-definitions/steps.ts:18:15)
[0-0] Error in "1: When I login with foobar and barfoo"
TypeError: Cannot set properties of undefined (setting 'appid')
    at CustomWorld.<anonymous> (file:///Users/name/Documents/workspace/WebdriverIO-TS-Cucumber-e2e/features/step-definitions/steps.ts:18:15)
[0-0] FAILED in chrome - file:///features/login.feature

Steps.ts File -

When(/^I login with (\w+) and (.+)$/, async (username, password) => {
    this.appid = 'TestAppID'; //Test appid
    await LoginPage.login(username, password)
    console.log("App ID - " + this.appid); //Test appid
});

Solution:-

In Steps.ts file we have written function which doesnt accept the callback functions! So you need to Modify your When step definition to accept a callback function that takes a parameter:

Steps.ts File -

When(/^I login with (\w+) and (.+)$/, async function (username, password) {
    this.appid = 'TestAppID'; //Test appid
    await LoginPage.login(username, password)
    console.log("App ID - " + this.appid); //Test appid
});

🎉 Conclusion

The World Object in WebdriverIO, TypeScript, and Cucumber automation framework is a powerful tool for exchanging data between test steps. It ensures the seamless flow of information, making your tests more efficient and robust.

By understanding the scope of the World Object and following the steps mentioned in this guide, you can harness its potential and create automation tests that are truly data-driven.

So, go ahead, set up your World Object, and elevate your test automation to new heights! 🌐💡🚀

tags: WebDriverIO,TypeScript,Cucumber,AutomationFramework,TestAutomation,WorldObject,DataExchange,StepDefinitions,WebDriverIOTutorial,CucumberAutomation,AutomationTips

DEV Community