Environment variables in playwright tests

[jsheffers]

Is there a way to pipe in the VITE_ variables to the Playwright tests? For example, depending on which Vite MODE is set, I load a different set of environment variables including the URL. If I console.log(process.env) in app.spec.js none of the Vite variables are included. I'm using this as a yarn command to start the test MODE=mymode node tests/app.spec.js. Any thoughts?

[SalahAdDin]

Did you get any way to do this?

[cawa-93]

Try my answer below

[cawa-93]

Use loadEnv helper from Vite to load Environment variables from .env file wherever you want. It read .env file and setup variables in process.env

[SalahAdDin]

Do you have any example of this with full setup?

[cawa-93]

Do you have any example of this with full setup?

No. Just call loadEnv from test entry file.

[SalahAdDin]

I just need to pass import.meta.env.BASE_URL; to playwright, but how can we set the same base url for both vite and BASE_URL?

[SalahAdDin]

Ok, I followed this example and I could load all variables from .env files, so we have the same values for playwright and vite.

Thanks!

[codespearhead]

Here's how I set it up based on the answers above. No additional dependencies are needed.

My env file is located higher up in the directory tree, hence the "ENV_DIR" variable.

The variables are accessible in Playwright test files via "process.env".

# vite.config.ts

import { defineConfig } from "vite";

export const ENV_DIR = "./../../../";
export default defineConfig({ envDir: ENV_DIR })

# playwright.config.ts

import { defineConfig } from '@playwright/test';
import { loadEnv } from 'vite';
import { ENV_DIR } from "./vite.config";

export const ENV_DIR = "./../../../";
Object.assign(process.env, loadEnv('', ENV_DIR));

export default defineConfig({ fullyParallel: true });

[hatton]

Is it possible to just inject one variable, at runtime, without using .env? Before vite, I just had

electron.launch({
      env: {
        E2E: "true",
      }
    });

Whereas with the vite approach, it sounds like have I have to have a special .env for e2e, and make a special build for e2e, in order to inject this one value. Hopefully I'm just confused.

[codespearhead]

You can do it via the "loadEnv" method from "vite" [1], but you don't have to. See this [2] answer.

[1] import { loadEnv } from 'vite';
[2] #514 (reply in thread)