Playwright - How to work with Multiple Environments!

Practice Test Automation: commitquality.com
Twitter: / commitquality
If you find these videos useful and would like to support me creating these videos, Super Thanks now available on the video.
Throughout this step-by-step guide, we'll explore the invaluable dotenv package and how it can revolutionize your Playwright projects. Whether you're building web automation scripts, testing web applications, or developing end-to-end browser automation, dotenv provides an elegant solution for handling environment variables
We'll demonstrate how to set up environment-specific variables in dotenv files, ensuring your project remains secure and easily configurable across different environments, including development, staging, and production.
www.npmjs.com/package/dotenv

[@la2126]

I knew you would have the answer Jarad, as always! Exactly what I needed, thank you!

[@CommitQuality]

Always glad I can help you :)

[@EwelinaWes]

Exactly what I needed! Super simple explained :) Thank You :)

[@CommitQuality]

You're welcome! Thank you :)

[@juanjoarranz8213]

Many thanks for your wonderful Playwright tutorials.I learnt all Playwright from you !

[@CommitQuality]

That's amazing to hear, it's what makes me continue wanting to post videos! Thank you very much for the super thanks, you are my first one😁

[@LouiseHarney-pb7ms]

This is really helpful, thank you!

[@CommitQuality]

Not a problem, glad I can help 😃

[@ravirajug1137]

nice and detailed and short video. thanks

[@CommitQuality]

Glad it was helpful!

[@joshuaschuster5867]

As always great content! Is there any plans to make a video about managing automated test cases? In my work, we find it difficult to actually keep track of our test cases in an Excel sheet to understand our total test coverage. If you made a video on that it could be potentially really helpful to a lot of people :) thank you for these tutorials!

[@CommitQuality]

This is a really interesting comment. I can definitely give an example of what I do / what I would do on my test website. I will put something together for this because I really like the idea.

[@Another0neTime]

Thanks, bud.

[@umesh1056]

Please let me know how to integrate with gh actions How to store the gh secrets to the variable present in the env files(present in env folder)

[@arunganesh100]

Instead of power shell if we use cmd then what command should I use to set the value. Please suggest the command.

[@gdd546]

thanks, i'm practicing playwright automation and azure pipelines and this was very easy to follow and understand. i've set up a practice build pipeline with a custom agent that runs my playwright tests and i have created a release pipeline aswell, but i'm struggling to get my head around how it'll work with azure releases to qa, prod and then uat. im guessing its something to do with the yaml file?

[@gdd546]

i found it in your azure pipeline video

[@pranavpothiwala8091]

Hi you make amazing videos which cleared my many doubts, I have question how can I use this as script in package.json file instead of running in command line I tried to use cross-env but didn't got it if you can share a script would be great thank you in advance

[@umskip2779]

can you set default .env that will be used when not specifying the env when running the tests?

[@CommitQuality]

Yes you can do this in the playwright config file. You could set up a const that would say use whatever base env is, and if its empty, set it to something e.g. const defaultEnv = process.env.ENV || 'prod' and then use the const where you define the path of the file. So if my ENV variable is empty, it will take the base version

[@poosam4065]

Hi. This is a great video and I learned a lot. I have a question. Can we run tests through VS code Test Explorer and pick up the .env file values? Because when I try to do so it always says as undefined.

[@Macrntree]

same error )=

[@rexrexnis]

Thanks for the vid. Nicely explained. One question, though. I can easily use the env variables in the test block of code, as presented in the video, but I cannot use them inside the setup code (in the auth.setup.ts file). Returns undefined. Any suggestions? Thanks!

[@CommitQuality]

Thank you! Where are you originally creating your variables and are you using the playwright setup approach?

[@rexrexnis]

I have them stored in a .env file (just one file, as there is one environment as for now). And as i said, they do work within a test file, but i also need to use them in the authentication setup, which is taken directly from the playwright documentation. And it does work itself (the setup I mean), but at this moment I have the secrets passed as normal strings….

[@rexrexnis]

​@@CommitQualityany advice?;)

[@andibm5623]

hi, thanks a lot for your video. Is it suppose to work with bush instead of pwsh? I've got such error. $env:ENV="deploytest" bash: :ENV=deploytest: command not found

[@7contractors]

You have probably forgotten to fix you scripts in package.json

[@nauta28]

Great stuff, simple and effective. Spent an hour to trying figure this out with some random StackOverFlow comments..

[@CommitQuality]

I'm glad to hear I have helped :)

[@tyexcel2312]

Thanks for this great content. Please I have a question, I'm getting this error when I ran this command $env:ENV='local'. I don't have powershell in my terminal as I'm using Mac: zsh: command not found: :ENV=local Please what can I do. Thanks

[@18traspie]

for zsh use "export ENV=local"

[@rifattaque7301]

Beautiful content. Could you also please show us how to change the environment file on test run command. I mean is there any way to call the desired env file with 'npx playwright test' so we can avoid switching between the env files before running 'npx playwright test' command? something like-> npx playwright test --env '.env.local'

[@marko96]

Try using bash instead of powershell. The command for bash would be: ENV=local npx playwright test The downside is that you have to write ENV=local/prod before executing every test but its still one step less than with using powershell in which you set the env and then run the test.

[@CommitQuality]

What I typically do is run a powershell script. Inside the script I can set the env variables I want and the. Also run the npx Playwright test command. I would then execute the powershell script

[@rifattaque7301]

@@marko96 sounds good, gonna try that. Thanks buddy.

[@aparnausa3619]

Do you have another video for js for the same topic

[@CommitQuality]

Are there any specific parts that are not working for you via JavaScript, there should be only small differences

[@AparnaKompella]

i am still seeing undefined after following steps as it is on powershell

[@AparnaKompella]

Hi, what is the error i see in my playwright.config.js file internal error:unable to connect to the test server playwright ? how do i fix it, could you please let know

[@CommitQuality]

Can you share the contents of your config file please

[@vaishalisoni8022]

Hi, is there a way to check data of file and then choose which one to use.

[@CommitQuality]

When you say check data of a file, do you mean the content of any file, or a specific one? I have videos on reading from CSV files and soon to be ones from pdfs

[@vaishalisoni8022]

@@CommitQuality I mean we have different env like stage, prod etc and we save json data for each env in each of these files and on the bases of req we call these files.

[@vaishalisoni8022]

Also tried above approach but env variables are not populating.

[@riteshkavankar]

Can we hide password in this file, so no other can see it in git commits.

[@CommitQuality]

You may want to look into git secret

[@riteshkavankar]

@@CommitQuality Done👍🏻

[@webtestingui7187]

Hello,Please share your github url

[@CommitQuality]

github.com/CommitQuality

[@webtestingui7187]

Thank you @@CommitQuality

[@kovacstibi9595]

I need a little assistant. In terminal I type this: $env:ENV="prod" but when I run the basic test and log ENV variable 'console.log(process.env.ENV)' then I got "undefined" result.. I am bit lost... dotenv.config({ path: `./env/.env.prod` }) -->this works dotenv.config({ path: `./env/.env.${process.env.ENV}` }) this failed...

[@CommitQuality]

What type of terminal are you using?

[@kovacstibi9595]

powershell but today morning everything works.. bit confused.. maybe the restart solved... (I am new with typscript/playwright/visual code) anyway thanks! your videos are awesome!@@CommitQuality

[@CommitQuality]

The classic turn it off and on again :D Thank you :) @@kovacstibi9595

[@ramprasadprathapani3578]

This will help us for undefined in dotenv.config block path: './env/.env.' + process.env.ENV_Test