Manage URL changes across different environments

problem statement: Handle changes in the application URL based on different environments.

Testers often run the same automated scripts across various environments in the fast-paced software testing world. This post explores how Playwright can assist in this process. Although Playwright provides numerous solutions for this challenge, I will focus on the one that, based on my experience, strikes an ideal balance between ease and efficiency for streamlining this common task.

Here’s an example of configuring the baseURL depending on the environment. A similar approach can be used for configuration files as well.

This can be achieved by making simultaneous modifications in playwright.config, testConfig, and package.json. The testConfig object defines URLs or any configuration specific for different environments, which is then imported within playwright.config. The baseURL property, found under the projects section, is assigned a value from the testConfig object. This value is based on the ENV variable, defined in the scripts section of package.json.

The script uses cross-env to set the environment variable ENV to a specific value before running the tests. Therefore, when you run npm run application:test, it sets the ENV variable to APPLICATION_TEST and then runs the tests using Playwright against the test environment specified in the testConfig.

This is an example of playwright.config that imports testConfig and assigns values from the testConfig object based on the ENV variable. This is an abstract and not a complete playwright.config. Other options are included only for familiarity; the relevant part is the importing and assigning of values.

import { testConfig } from './env/testConfig';

projects: [
    {
      name: 'projectName',
      use: {
        baseURL: testConfig[ENV],
        launchOptions: {
     slowMo: 100
    }
      },
      testMatch: /Application\/.*.spec.ts/,
      testIgnore: '**/test-assets/**'
    },
  ]

This is an example of testConfig. You can name the file as per your preference. It can include URLs or any configuration changes specific to the environment.

export const testConfig = {
  APPLICATION_TEST: `https://domainName.test.applicationName.io`,
  APPLICATION_SANDBOX: `https://domainName.sandbox.applicationName.io`,
};

Below is an abstract of the package.jsonfile. Within the scripts section, application:test and application:sandbox scripts are defined. They utilize the cross-env npm package to set environment variables within node commands. This facilitates the execution of a single command to set the environment variable for the platform. This module is distributed through npm, bundled with node, and should be installed as one of your project’s devDependencies using the npm install — save-dev cross-env command.

"scripts": {
    "application:test": "cross-env ENV=APPLICATION_TEST npx playwright test --project=projectName ",
    "application:sandbox": "cross-env ENV=APPLICATION_SANDBOX npx playwright test --project=projectName",
    
  },

Lastly, in the test, page.goto() utilizes the URL() constructor to generate the corresponding URL. Therefore, when you run the application:test script, page.goto(‘/’) will navigate to https://domainName.test.applicationName.ioSimilarly, page.goto(‘/home.html’) will lead to https://domainName.test.applicationName.io/home.html

await this.page.goto('/');