Playwright: How to pass environment variables from library to pipeline?

Question

Background

I have a React/TypeScript project running Playwright integration tests in an Azure DevOps pipeline. The pipeline gets environment variables from an Azure DevOps library.

Problem

I can run the tests locally against my deployed pre-prod environment successfully.

However, the tests fail in the pipeline. They fail because the pipeline cannot read the environment variables I am trying to pass in from the library.

Failing line of code:

await page.getByRole('textbox', { name: 'myVariable' }).fill(process.env.MyVariable as string);

Pipeline error on my environment variable:

How do I pass environment variables from the library to the pipeline such that Playwright can read them?

Answer 1

Solution

1. I updated my test file name from myFile.spec.ts to myFile.spec.tsx.
2. I prefixed my environment variables with REACT_APP_.

await page.getByRole('textbox', { name: 'myVariable' }).fill(process.env.REACT_APP_MY_VARIABLE as string);

3. Now my Azure DevOps pipeline can read the variables in the Azure DevOps library, and the tests succeed!