Stack Overflow
stackoverflow.com › questions › 78354421 › playwright-vs-code-extension-cannot-find-tests-if-config-is-dependent-on-environ
Playwright VS Code extension cannot find tests if config is dependent on environment variable - Stack Overflow
I'm not sure if this solves your exact situation but when I stumbled upon this question I found my answer in this GitHub issue: https://github.com/microsoft/playwright/issues/27864 - We can set any generated env vars for Playwright in the VSCode settings json file.
GitHub
github.com › microsoft › playwright › issues › 22289
Setting up environment variables and using it with the extension · Issue #22289 · microsoft/playwright
April 7, 2023 - I currently pass my environment variables externally via a command line and use the command npx playwright test to run my tests. If I want to use this extension for vscode how do I do that??
Author testPlaywright
[BUG] VS Code extension: `playwright.env` is not applied to config file
Context: Playwright Version: 1.33.0 Operating System: macOS Node.js version: 16.3.0 Visual Studio Code version: 1.77.3 Playwright for VSCode extension version: 1.0.10 Browser: N/A Extra: Code Snipp... More on github.com
6
May 4, 2023[BUG] using a different .env file with the Playwright for VSCode extension
Context: Playwright Version: @playwright/test": "^1.38.1" Operating System: Mac Node.js version: v18.17.0 Visual Studio Code version: 1.85.1 Playwright for VSCode extension version: ... More on github.com
5
December 20, 2023[FEATURE REQUEST] Allow setting up env variables inside VSCode extensions
Our setup is done in a way that we need to pass env vars to run against different environments. Currently I haven't found any clues on how to do that. But anyway, even if there is a hack to wor... More on github.com
2
November 21, 2022[Bug]: VS Code extension no longer picking up .env variables.
I have the following config · This has worked for months. Now when I run tests through the extension, the DEVELOPER_SUBDOMAIN variables is undefined. If I run tests through the terminal, it works fine More on github.com
2
June 4, 2024Videos
Playwright
playwright.dev › vs code
VS Code | Playwright
The Playwright VS Code extension brings the power of Playwright Test directly into your editor, allowing you to run, debug, and generate tests with a seamless UI-driven experience.
GitHub
github.com › microsoft › playwright › issues › 22818
[BUG] VS Code extension: `playwright.env` is not applied to config file · Issue #22818 · microsoft/playwright
May 4, 2023 - .vscode/settings.json: { "playwright.env": { "FOO": "bar" } } At the top of playwright.config.ts: if (process.env.FOO === undefined) { throw new Error("FOO env variable is not defined"); } We can see that the environment variable does not exist because the error is thrown.
Author OliverJAsh
Restack
restack.io › p › playwright-answer-vscode-env-setup
Playwright vscode env setup guide | Restackio
April 27, 2025 - Learn how to set up Playwright in VSCode for efficient testing. Step-by-step guide for developers. ... To make environment variables easier to manage in Playwright, consider using .env files.
GitHub
github.com › microsoft › playwright › issues › 28734
[BUG] using a different .env file with the Playwright for VSCode extension · Issue #28734 · microsoft/playwright
December 20, 2023 - I use the dotenv package to define a .env.test (as you can see in the code snippet) file that my application should use to launch for testing. When I launch tests with CLI it works perfectly, but the Playwright for VSCode extension doesn't follow this script obviously and I was not able to find a way to ask Playwright for VSCode extension to launch tests with the .env.test file instead of the .env for the environment variables.
Author Antoine-Regembal
Playwright Solutions
playwrightsolutions.com › enabling-pw-api-in-playwright-test-for-visual-studio-code
Enabling pw:api debugging in Playwright Test for VSCode
April 3, 2023 - DEBUG=pw:api npx playwright test Or you may have even permanently have this set as a system environment variable, which is pretty cool on its own! Look at all that beautiful, detailed debug deliciousness! You've explored more of the Playwright ecosystem, and setup into Visual Studio Code and installed the Playwright Test for VSCode Extension!
Visual Studio Marketplace
marketplace.visualstudio.com › items
Playwright Test for VSCode - Visual Studio Marketplace
Extension for Visual Studio Code - Run Playwright Test tests in Visual Studio Code.
DEV Community
dev.to › ryanroselloog › easiest-way-to-setup-a-vscode-launch-config-for-your-playwright-tests-2p9b
Easiest way to setup a VSCode launch config for your Playwright tests - DEV Community
July 9, 2022 - In this article we will look at an alternative approach to the Playwright VSCode extension by configuring our own VSCode launch config file.
GitHub
github.com › microsoft › playwright › issues › 18957
[FEATURE REQUEST] Allow setting up env variables inside VSCode extensions · Issue #18957 · microsoft/playwright
November 21, 2022 - Our setup is done in a way that we need to pass env vars to run against different environments. Currently I haven't found any clues on how to do that. But anyway, even if there is a hack to wor...
Author tymfear
Medium
medium.com › @hbsasithadilshan › executing-playwright-tests-in-multiple-environments-using-env-file-911ce6617182
Executing playwright tests in multiple environments using .env file | by Sasitha Babaranda | Medium
March 24, 2024 - First it locates the required environment file in the project folder and then loads the environment variables from the relevant .env file · We need to add globalSetup option in the configuration file to set something up once before running all tests · So we need to specify our path of globalSetup.js in playwright.config.js as below to properly identify the environment and load the required environment variables, before executing the script
GitHub
github.com › microsoft › playwright › issues › 31145
[Bug]: VS Code extension no longer picking up .env variables. · Issue #31145 · microsoft/playwright
June 4, 2024 - import type { PlaywrightTestConfig } from '@playwright/test' import * as dotenv from 'dotenv' dotenv.config({ path: '.env.development.local' }) dotenv.config({ path: '.env.staging' }) export const BASE_URL = `https://${process.env.DEVELOPER_SUBDOMAIN}.com` export const API_URL = `https://api.${process.env.DEVELOPER_SUBDOMAIN}` const config: PlaywrightTestConfig = { testDir: 'e2e', timeout: 30 * 1000, expect: { timeout: 5000, }, workers: 1, reporter: process.env.CI ?
Author imdavidkelly
Top answer 1 of 5
18
You can put require('dotenv').config() inside your playwright.config.ts and then it will work, see here:
https://www.npmjs.com/package/dotenv
2 of 5
7
In addition to Max Schmitt's answer, here's 3 other ways to do it:
dotenv-cli
Add dotenv-cli to your dev dependencies then use it: dotenv playwright test (or npx dotenv playwright test if you're running this command outside of a package.json script).
require + NODE_OPTIONS
Use the --require Node.js option and NODE_OPTIONS to set it: NODE_OPTIONS=--require=dotenv/config playwright test.
require + npx
Use the --require Node.js option and npx to set it: npx --node-options=--require=dotenv/config playwright test (if you're using an old version of npx, you might need to replace --node-options by --node-arg)
Medium
medium.com › @testerstalk › how-to-setup-playwright-in-visual-studio-code-ide-0d78f6d93b3d
How to Setup Playwright in Visual Studio Code IDE? | by Testers Talk | Medium
September 14, 2024 - How to Setup Playwright in Visual Studio Code IDE? Setting the playwright automation testing environment with visual studio(VS) code is very very simple! let’s do it step by step. Read my previous …
Top answer 1 of 2
2
Not sure exactly if by "browser to show up" you refer at the fact that you need the browser to not run in headless mode.
There are two possible ways:
- Install Playwright Test for VSCode as suggest by @MingJie-MSFT. You'll have a Show browser checkbox there in case you want to run your tests headless or not
- In the config file, for use, add:
headless: false
Example for both options
2 of 2
0
Please install Playwright Test for VSCode extension which automatically detects if you have Playwright installed and loads the browsers.
GitHub
github.com › microsoft › playwright › issues › 36257
[Bug]: The Playwright VSCode extension is not detecting my .env file · Issue #36257 · microsoft/playwright
June 10, 2025 - import { configEnv } from './config/config' import { defineConfig, devices } from '@playwright/test' export default defineConfig({ retries: process.env.CI ? 1 : 0, workers: process.env.CI ? 4 : 4, timeout: 35000, expect: { timeout: 15000 }, reporter: process.env.CI ?
Author yusufozturk-via
Playwright
playwright.dev › debugging tests
Debugging Tests | Playwright
You can debug your test live in VS Code. After running a test with the Show Browser option checked, click on any of the locators in VS Code and it will be highlighted in the Browser window. Playwright will also show you if there are multiple matches.
Playwright
playwright.dev › parameterize tests
Parameterize tests | Playwright
To make environment variables easier to manage, consider something like .env files. Here is an example that uses dotenv package to read environment variables directly in the configuration file. ... import { defineConfig } from '@playwright/test'; import dotenv from 'dotenv'; import path from 'path'; // Read from ".env" file.
Reddit
reddit.com › r/playwright › caching of env and config when using vs code
r/Playwright on Reddit: Caching of env and config when using VS Code
April 8, 2025 -
Hi all.
I am posting on behalf of one of my QA people who does not have a Reddit account.
We are new to using Playwright and have been struggling with something for a bit now. I fully realize that it is likely something obvious that we missed somewhere along the way.
Essentially, the env and playwright.config.ts files are being run a single time and subsequent runs are running the "cached" version. We noticed this because as part of the config is creating a directory with a timestamp so that we can keep multiple runs separate from each other. We also know that the env is being cached because if we change our secrets in it, it does not pick them up unless we quit VSCode and restart it.
For example, our reporter config looks like this:
reporter: [['list'],['html', { outputFolder: 'Reports/' + (new Date()).toString().replace(/[-:]/g, '_') }]], This should create a new folder on every run. Instead, it remembers the folder from the first run.
Any tips or URLs that could help him, and by expansion the whole team, would be fantastic.
Top answer 1 of 4
1
I guess playwright does not read the config file once again if it was not changed. So you have a few options : "touch" the config file after each run, or move the contents of the report directory to a new directory after each run. I'd go with the directory move.
2 of 4
1
I've never experienced this. What commands are you running to execute the test? Are you using the playwright extension or running them from the command line? Can you post your config file and .env file? It should be reading the these files for every test run
GitHub
github.com › microsoft › playwright-vscode › issues › 110
cannot set some env variables · Issue #110 · microsoft/playwright-vscode
before update to last version we have a extenstion setting "playwright.env". what about new version plugin and env variables ?