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

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

Answer 1

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;