Configure Multiple Environment Variables in Playwright

If you have multiple environment specific properties or variables you can use this approach. 

Step 1: Open playwright.config.ts file

Step 2: Import PlaywrightTestConfig

import { PlaywrightTestConfig } from '@playwright/test';

Step 3: Create TestConfig interface and extend PlaywrightTestConfig

Add you properties here. For example baseUrl will be different for all platforms. 

interface TestConfig extends PlaywrightTestConfig {
  baseUrl: string;
  // Declare more properies or variables
  // Repeat same steps like baseUrl
}

  Step 4: Change default config statement to this

const defaultConfig: PlaywrightTestConfig = {
};

Step 5: Define Config for all Environment, outside of defaultConfig Json

// Dev Environment Config
const devConfig: TestConfig = {
  baseUrl: 'https://dev.mysite.com',
};

// Stage Environment Config
const stageConfig: TestConfig = {
  baseUrl: 'https://stage.mysite.com',
};

// Prod Environment Config
const prodConfig: TestConfig = {
  baseUrl: 'https://prod.mysite.com',
};

Step 6: Declare environment variable. To read environment value from terminal. Default Value is stage.

const environment = process.env.TEST_ENV || 'stage';

Step 7: Create Config Object, which implement TestConfig and include default and environment specific configuration

const config: TestConfig = {
  ...defaultConfig,
  ...(environment === 'stage' ? stageConfig : environment === 'prod' ? prodConfig : devConfig)
};

Step 8: export config

export default config;

Step 9: Import Config and Use your properties

import config from '../playwright.config';

test.describe('Header', ()=> {

    test.beforeEach(async ({ page }) => {
        // Read Base URL
        await page.goto(config.baseUrl);
    })
});    

Step 10: Set Environment Variable from Terminal 

TEST_ENV=prod npx playwright test