Playwright URL Config - Environment variables for multiple apps and different base urls

Question

What would be the best way to configure and use urls for a project with

2x WebApps
3x Environments

... where we have a situation that looks like this as an example

Fruit App

baseurls:
- dev.fruits.com
- test.fruits.com
- prod.fruits.com
endpoints:
- /banana/
- /kiwi/
- /apple/

Color App

baseurls:
- dev.colors.com
- test.colors.com
- prod.colors.com
endpoints:
- /red/
- /blue/
- /green/

... and tests like this


    test('Navigate to fruits/banana', async () => {
      await page.goto('https://https://dev.fruits.com/banana/');
      ...
    });
     
    test('Navigate to colors/red', async () => {
      await page.goto('https://https://dev.colors.com/red/');
      ...
    });

... where I'd like to

Replace dev.fruits.com and dev.colors.com with baseurl variables
The "dev" part should be dynamic based on which environment I run tests in

score 9 · Accepted Answer · answered Jan 05 '22 at 00:11

You can use separate projects for different configurations:

// @ts-check
const { devices } = require('@playwright/test');

/**
 * @see https://playwright.dev/docs/test-configuration
 * @type{import('@playwright/test').PlaywrightTestConfig}
 */
const config = {
  projects: [
    {
      name: 'Fruit Dev',
      testMatch: 'fruits/**/*',
      use: {
        baseURL: 'https://dev.fruits.com'
      }
    },
    {
      name: 'Fruit Test',
      testMatch: 'fruits/**/*',
      use: {
        baseURL: 'https://test.fruits.com'
      }
    },
    {
      name: 'Fruit Prod',
      testMatch: 'fruits/**/*',
      use: {
        baseURL: 'https://test.fruits.com'
      }
    },
    {
      name: 'Color Dev',
      testMatch: 'colors/**/*',
      use: {
        baseURL: 'https://dev.colors.com'
      }
    },
    {
      name: 'Color Test',
      testMatch: 'colors/**/*',
      use: {
        baseURL: 'https://test.colors.com'
      }
    },
    {
      name: 'Color Prod',
      testMatch: 'colors/**/*',
      use: {
        baseURL: 'https://test.colors.com'
      }
    },
  ]
};
module.exports = config;

Thanks for the suggestion! Would you say this way is preferred or more beneficial over using process.env variables? — Hoppjerka, Jan 10 '22 at 17:06

score 3 · Answer 2 · answered Apr 08 '23 at 04:30

I came across this issue recently and as an alternative on using projects, I used env config files (like dotenv) as most of our codebase uses the same. In this instance, I categorised it based on the test environments and not on the apps used.

I created a config folder with the sample json files:
config/dev.env.json
config/test.env.json
config/prod.env.json

with the following content:

{
  "fruitApp": {
    "baseUrl": "prod.fruits.com",
    "endpoints": {
      "banana": "/banana/",
      "kiwi": "/kiwi/",
      "apple": "/apple/"
    }
  },
  "colorApp": {
    "baseUrl": "prod.colors.com",
    "endpoints": {
      "banana": "/red/",
      "kiwi": "/blue/",
      "apple": "/green/"
    }
  }
}

Then on playwright.config.ts, I have the following snippet:

const config = process.env.ENV || 'prod';
const env = require(`./config/${config}.env.json`); // load env from json

export default defineConfig({
  ...env,

On your spec/test file, you can call the above using:

console.log(env.fruitApp.baseUrl)

Running your tests with:

ENV=prod npx playwright test

Hi ! Your solution seems to be good but i have the error : `env is not defined` in my spec/test file ! Do you know why please ? — pcmanprogrammeur, Jun 28 '23 at 09:03

Playwright URL Config - Environment variables for multiple apps and different base urls

2 Answers2