How To Configure Multiple Environments in Playwright

In this article, we will explore how to configure multiple environments in Playwright test automation framework to optimize the testing process.

What is Cross-Environment Testing?

Often applications have multiple environments like development, staging and production. Testing across different environments also known as Cross-environment testing is a crucial aspect of ensuring the robustness and reliability of applications in modern software development and testing processes.

Cross-environment testing is a tedious and repetitive task and is often challenging in a fast-paced agile environment. Each environment may have different URLs, API endpoints, Credentials or other configurations. The test automation framework should be able to execute the test scripts on all environments to reduce the execution time and effort.

Advantages of Cross-Environment testing

Multiple environment testing helps to validate that the application behaves correctly in each environment.
Different environments may use different sets of test data, with multiple environments we can verify whether the application is deployed correctly, dependencies are configured properly, and the overall environment is set up as expected.
Executing tests in multiple environments ensures that the application behaves correctly and consistently across various setups, preventing environment-specific issues.
By testing in multiple environments, the risk of encountering environment-specific issues is reduced.

How to Configure and Execute Playwright Tests in Multiple Environments

There are multiple ways through which we can configure multiple environments in Playwright and perform cross-environment testing. I will discuss 2 approaches in this article.

1. Configure Multiple Environments in Playwright using the Config File and Dotenv Package

Install dotenv package

We require a package to load environment variables from the .env file. Open your Playwright project, go to the terminal and execute the below command.

npm install dotenv --save

Once the installation is successful, a dependency will be added to the package.json file.

Create config.json file

Go to the project’s root, create a new file as config.json and add configurations for different environments.

{
    "Staging": {
        "baseUrl": "URL",
        "userName": "yourUserName",
        "password": "YourPassword"
    },
    "Production": {
        "baseUrl": "URL",
        "userName": "yourUserName",
        "password": "YourPassword"
    }
}

The keys show different environments and For each environment, there are properties that define various configuration settings like baseURL, Username and Password.

Add Environment File

Create a new .env file in the project root folder. Add environment key.

environment = Staging

Load the dot env package

To utilize the dot env package we need to load it after successful installation. Go to the project root level and create a new file. Name this file as config.ts. Import the below packages in this file.

import config from './config.json';
import dotenv from 'dotenv';

dotenv.config();

The dotenv. config() function is called to load environment variables from a file, typically named .env. This allows the configuration to be adjusted based on the current environment.

Write logic to retrieve the configuration settings from the config.json file based on the current environment.

import config from './config.json';
import dotenv from 'dotenv';

dotenv.config();

export function getBaseUrl(): string {
    const env = process.env.environment;
    return config[env].baseUrl;
}
export function getUserName(): string {
    const env = process.env.environment ;
    return config[env].userName;
}
export function getPassword(): string {
    const env = process.env.environment ;
    return config[env].password;
}

Three functions (getBaseUrl, getUserName, and getPassword) are exported, each responsible for retrieving specific information from the configuration based on the current environment.

The process.env.environment statement is used to retrieve the current environment from environment variables.

Read .env file variables in test scripts

Multiple environment setup is complete, now let’s try to utilize it in our test scripts. Open the test file and replace the code.

  import {Page} from '@playwright/test';
  import {loginPage} from '../page-objects/loginPage';
  import { getBaseUrl,getUserName,getPassword } from '../config';

  let page: Page;

 test('Client App login', async ({page})=>
 {
  const loginpage = new loginPage(page);
  
    await loginPage.goto(getBaseUrl())
    await loginpage.validUserLogin(getUserName(),getPassword());
    await expect(loginpage.DashboardHeading).toBeVisible()
 });

Execute the script using the ‘npx playwright test’. The staging environment Base URL is launched and login is successful. We can execute the same script on any other environment like production, by just changing the “environment = Production” in the .env file and all configuration related to the Production environment will be picked up from the config.json file.

2. Configuring multiple environments in Playwright with cross-env and dot-env package

This is a popular approach where we use two npm packages to configure multiple environments in the Playwright test automation framework. First Install the dot-env package in your project as discussed in approach one.

Install Cross-Env Package

Cross-env is an npm package used to set and use environment variables across different operating systems. Install this package using the below command:

npm install --save-dev cross-env

Add Multiple Environment Files

Go to the root of the project and create env files for the staging and production environment. Add baseURL and credential information in these environment files for the respective environments.

Configure Multiple Environments in Playwright

Manage Environment Keys

To manage the environment keys seamlessly across the different environments we need to create an encapsulated class. Go to the utility folder, create a new class under this folder and add the below code.

export default class ENV{
    public static BASE_URL = process.env.BASE_URL
    public static USERNAME = process.env.USERNAME
    public static PASSWORD = process.env.PASSWORD
}

We are exporting the class ENV as the default export of the module, making it available for use in other parts of the code. The purpose of this (ENV) class is to centralize the access to environment variables.

Create a Global Setup file

Create a new file, name it as global setup and add the below code.

import { FullConfig } from "@playwright/test";
import dotenv from "dotenv"

async function globalSetup(config: FullConfig) {

    try {
        if (process.env.test_env) {
            dotenv.config({
                path: `.env.${process.env.test_env}`,
                override: true
            });
        }
    } catch (error) {
        console.error("Error loading environment variables:", error);
    }
}
export default globalSetup;

This code uses dotenv to load the environment variables and checks if the test_env environment variable is set (process.env.test_env). If it is set, it means there’s a specific environment file to be loaded. First, it locates the required environment file in the project folder and then loads the environment variables from a corresponding .env file.

Configure the Playwright config file

To properly identify the environment and load the necessary information before executing the script, it is essential to include this global setup file in the Playwright configuration file.

import { defineConfig, devices } from '@playwright/test';
export default defineConfig({
  testDir: './tests',
  outputDir: 'test-results',
  globalSetup: "./utility/GlobalSetup.ts",
  projects: []
 });

Create Scripts

Open the package.json file and go to the scripts section. Scripts are used to define and run various commands related to the project. These scripts are commonly used for tasks such as running tests, building the project, or starting the application. Add the below-mentioned scripts under the sections of the script.

"scripts": {
    "test:test": "cross-env test_env=test npx playwright test",
    "test:staging": "cross-env test_env=staging npx playwright test",
    "test:production": "cross-env test_env=prod npx playwright test"
  },

Modify Test scripts

Open the loginTest.spec.ts file and modify the code to utilize the cross-environment configuration. Import the env class and access the variables.

import {Page} from '@playwright/test';
import {loginPage} from '../page-objects/loginPage';
import ENV from '../utility/env';

let page: Page;

test('Client App login', async ({page})=>
 {
  const loginpage = new loginPage(page);
  await loginPage.goto(`${ENV.BASE_URL}`)
  await loginpage.validUserLogin(`${ENV.USERNAME}`,`${ENV.PASSWORD}`);
  await expect(loginpage.DashboardHeading).toBeVisible()
 });

Execution

Now all the setup is complete. To execute the test cases go to the terminal and type

npm run test:production

This command will look for the production tag in the scripts tag. Load the environment variables from env. prod file and execute the tests on the prod environment.

Conclusion

Configuring multiple environments in a test automation framework is a best practice that helps in identifying and addressing potential issues across different environments and improves the overall reliability and quality of the product. I provide a detailed explanation of how to configure multiple environments in the Playwright automation framework and execute scripts without modifying the test scripts.

Visit here to learn how to implement the Playwright POM framework. Refer GitHub repo for the code.