Testing Staging and Production environments in Playwright

In this example we will explore how to work with different environments in playwright with example. When testing a website, you may need to test it across different environments, such as development, staging, and production. In this post let's take a look at how to set the baseURL and run tests across different environments in Playwright.

Setting different production environments process.env

To set the URL for different environments set the process.env variable in your baseURL. In the example below if 'STAGING' is set to '1' then the URL will be https://playwright.dev/docs/next/, otherwise it will default to https://playwright.dev/docs/.

playwright.config.ts or playwright.config.js

use: {
  baseURL: process.env.STAGING === '1' ? 'https://playwright.dev/docs/next/'
         : 'https://playwright.dev/docs/',
},

To run tests on the STAGING environment, add STAGING=1 to the beginning of the CLI command. Additionally, include --trace on to enable the trace viewer and verify the URL.

STAGING=1 npx playwright test

Setting up different projects

If you are regularly testing against different environments you can set up a different project for staging and production, and set the base URL for each one.

playwright.config.ts or playwright.config.js

projects: [
    {
      name: 'staging',
      use: { 
        ...devices['Desktop Chrome'],
        baseURL: 'https://playwright.dev/docs/next/'
       },
    },
    {
      name: 'production',
      use: { 
        ...devices['Desktop Chrome'],
        baseURL: 'https://playwright.dev/docs/'
       },
    },
    ...
]

To run these projects in the CLI add --project= to the end of the test command.

npx playwright test --project=staging
npx playwright test --project=production

Using projects gives us more freedom to add different configurations and modify more than just the baseURL to run tests with different configurations such as colorScheme, locale and so much more.