How to set environment variables like test environment for playwright-cucumber js

Question

I've been using Playwright with Cucumber for e2e-automation of a react web application. This repo has been my starting point and it's been working out pretty good.

However, I'm looking for pointers on how to run these tests on different test environments - like development or QA, so that the target urls and other params vary as per the environment passed. For eg -

if (env == dev){
       baseurl = dev_url
       }
else{
      baseurl = qa_url
       }

The Cucumber documentation mentions the World parameter - an this issue looks like a similar issue, however I'm skeptical of passing a different JSON for this task.

Can this be achieved only at a Cucumber level or is there a Playwright or Node way of doing this?

Answer 1

As you are already using cucumber, define your world file like this: First you can segregate your properties files into: properties-dev.json and properties-qa.json. Below code reads properties file based on env we are passing in defaultOptions object and stores entire properties file data into 'this'. Use 'this' in your hooks file and call this.keyNameForUrl to get url specific to environment.

Note: 'this' can be accessible only in world and hooks files (refer // https://github.com/cucumber/cucumber-js/blob/master/docs/support_files/world.md). If you need this data in other files, create a separate class and declare all public static varibles in it. In Hooks BeforeAll function, reassign values from 'this' to the static variables created in the class.

import { setWorldConstructor } from 'cucumber';
const fs = require('fs');

const defaultOptions = {
    env: 'qa'
};

function processOptions(options) {
    let envFile = 'properties-' + options.env + '.json';
    let environment = JSON.parse(fs.readFileSync(envFile));
    return Object.assign(options, environment);
}

function World(input) {
    this.World = input;
    });

    Object.assign(this, processOptions(Object.assign(defaultOptions, options)), options);
}

setWorldConstructor(World);

// https://github.com/cucumber/cucumber-js/blob/master/docs/support_files/world.md