Playwright Framework #2 | Execute in multiple environment | Playwright Tutorial - Part 80

[@Vijaygajjarapu]

I think you addressed all possible questions that might arise who are looking to execute their test cases in multiple environments, Thanks for the tutorial

[@letcode]

Thanks 🙏

[@tallurivamsi6413]

you never disappoints,you always gives great content.you probably comes up with all the questions about this environments.very clear and informative.keep inspiring us...

[@letcode]

Thanks ❤️

[@sathyasindru7315]

Hi bro.. Following ur channel for a month and learned selenium java it helped me a lot and now I got a job. Thanks to u and ur videos bro!!

[@letcode]

Congratulations Sathya 🎉

[@sathyasindru7315]

@@letcode thank u bro🙏

[@maheshtekawade3952]

Hi kaushik sir, if we pass 'as string' with url then there is no typescript error. Ex. await page.goto(ENV.BASE_URL as string)

[@letcode]

Great 👍

[@FlashTracer]

4:53 Now I know how to run tests by scripts, thank you so much!

[@letcode]

Great 👍

[@AI_Explore_Hub]

Thanks you so so much for you informational videos on playwright. It really helped me in implementing the framework for my new project. I appreciate your efforts.

[@letcode]

Great to hear!

[@76taran76]

Дуже дякую! Допоміг!)) 😀

[@letcode]

Happy learning 😃

[@youshiva]

Thank You Koushik. Could you please add a video to perform the same multiple environment settings using Javascript? I tried but I am getting undefined error or object returned while string is expected error.

[@letcode]

You can share the screenshot in our discord, js and TS both code is the same.

[@CJ2by4]

These videos are Awesome. Incredible job

[@letcode]

Glad you like them!

[@br7953]

what if you already have an browser stack existing global setup file with different configs, how can I add this to the existing global setup file? Thank you!

[@letcode]

You can modify the existing file.. Any issue?

[@KoushikThatipally]

Hello a small doubt followed this process step to step. When give the command to run directly from terminal it is failing with this error "is not recognized as the name of a cmdlet" but when passed through package.json it is working just wanted to know what could be the reason....thank you

[@letcode]

Hi, what is the command you have passed?

[@KoushikThatipally]

@@letcode cross-env test_env=qa npm test, qa is my env

[@olli-e5i]

Hi! I have configured global setup. Could you please advise how to run test from 'Testing' in VS? It does not know about 'test_env' so BASE_URL is underfined.

[@letcode]

Use gitbash as a terminal. I have explained how to run also, pls watch again.

[@olli-e5i]

Hi @@letcode Thank you for the video. I managed to solve the issue by setting env variable in terminal and run Visual code from terminal. Then when tests are run by 'Testing' in VS or Playwright UI mode( npx playwright test --ui), they use my env variable.

[@letcode]

Nice, thanks for the update

[@RameshbabuSripathi]

Hi Koushik, My scenario is test 1 having login and assertion then after test 2 has continue in same page navigate and create user But test 1 it closes browser NO login is available

[@letcode]

Within test you use multiple step functions. Test always run in individual browser.

[@CJ2by4]

Where is your video on Data providers? I see you have a file there but I couldnt find anything when I searched

[@letcode]

kzbin.info/www/bejne/eau0nmCji9Fnfsk

[@tejalkuralkar460]

Hi kaushik, I followed all the steps but while running it is giving undefined for all the values, could you please help

[@letcode]

Did u include the global setup on config file. Pls go through all the steps it must work.

[@akashdeep-vg4sg]

Hey Koushik, I followed the exact steps but every time I'm getting the "process.env.USER_NAME" as undefined in the console... basically, all the .env variables are showing as Undefined.

[@letcode]

No other configurations. Make sure u have followed all the steps. Global setup, package.json.

[@akashdeep-vg4sg]

@@letcode yeah, did the same

[@letcode]

This video has a simple demo, can u try with this kzbin.info/www/bejne/onqonaGHf95qprc

[@anandanand-d9j]

Hi Koushik, I'm facing Error: page.goto: url: expected string, got undefined when running "npm run env:prod" command

[@letcode]

Is the url passed correctly?

[@anandanand-d9j]

​@@letcode I have created .env file inside ENV folder, After moved .env files to out of the folder, the code working fine.

[@letcode]

@@anandanand-d9j great 👍

[@shaifalijain1253]

You are literally too good

[@letcode]

Thank you 😊

[@sunrisesoft7952]

Thank Koushik for great work and share! Folow your instructions I can run test multiple environments file from command line but when I run test by clicking the Green Triagle button, it can not pass the correct value from environment file? Could youd pls help me on that, thank you and have a nice day!

[@letcode]

I don't think it will work with the Playwright extension.

[@nileshraval4162]

HI I have configured multiple env setup as per video. but when i run script it is throwing below errors as page.goto: url: expected string, got undefined

[@letcode]

It should work if all steps followed correctly

[@tallurivamsi6413]

Hi Koushik, import ENV from "utils/Env" using this stmt in my test class and when i run the test class getting below error: Error: Cannot find module 'utils/Env.js' How can i solve this? tried the import path differently but its vain.Iam using JS

[@letcode]

For js you have to use the require statement.

[@tallurivamsi6413]

@@letcode i changed the file to ts,for this "ENV.BASE_URL" iam getting undefined in my test.ts followed the same approach 1.created globalSeup.ts 2.added the globalsetup path in playwirght.config.ts 3.create env.ts in utils and added all params. 4.imported ENV in my test ts but iam not able to fetch the or get the BASE_URL value.... note:added "cross-env test_env=pl22 npx playwright test UI-Tests/test1.spec.ts" in package.json could you pls help me whats the real issue here?

[@tallurivamsi6413]

@letcode basically iam getting ENV object as empty... import ENV from "../../utils/env"; test('test', async ({ page }) => { console.log("env is-->"+ENV) console.log("sample..."+process.env.test_env); console.log("val is->"+`.env.${process.env.test_env}`) console.log("url is.."+ENV.BASE_URL); //await page.goto(Env.BASE_URL); // await page.waitForTimeout(9000); console.log("url is.."+ENV.USERNAME); }); o/p: env is-->class ENV {} sample...pl22 val is->.env.pl22 url is..undefined url is..undefined

[@tallurivamsi6413]

Issue has been resolved.thanks for the video

[@letcode]

How did you solve it?

[@barathm5452]

Hi @Letcode with Koushik, when i run the script with "npx playwright test" command, it gives me the variables are undefined. Any solution? where else when I run using "npm run env:test" it works fine.

[@letcode]

Did u follow all the steps shown in the video? You have to run npm commands

[@jopscastaneda2195]

i am getting this error in the GLobal Setup part please help: test_env=staging : The term 'test_env=staging' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again. At line:1 char:1

[@letcode]

Pls use git bash terminal

[@jopscastaneda2195]

@@letcode thanks man i am able to execute the command in git bash terminal without the error but it does not seem to read the .env files do you have an idea why? here is my globalSetup.ts import { FullConfig } from "@playwright/test"; import dotenv from "dotenv" async function globalSetup(config: FullConfig) { if(process.env.test_env) { dotenv.config({ path:'.env.${process.env.test_env}', override:true }) } } export default globalSetup;

[@jopscastaneda2195]

I am getting the error url: expected string, got undefined 10 | > 11 | await page.goto(ENV.BASE_URL);

[@letcode]

Did u use the global config within the playwright config file.

[@jopscastaneda2195]

@@letcode yes i did that as well

[@prasadprasad9491]

what is the syntext for scroll bar in playwright i am using this but is not working page.mouse.move(0, 0); page.mouse.move(0, 100); page.mouse.move(0, 0); page.mouse.up()

[@prasadprasad9491]

Is there any approaches to scroll up & Down

[@letcode]

You can use the scroll into view function,

[@danielkovacs3664]

can you show a method into the global setup if test_nv=stage use a state and test_env=uat use another state for example if ( test_env == "stage" ) { storageState: STAGE_STATE, }els{ storageState: UAT_STATE }

[@letcode]

Coming soon

[@danielkovacs3664]

@@letcode fantastic :)

[@Gauravsharma-yi2dl]

how we can check variables of process.env from global config? and how I can add other variables in process.env in global config ?

[@letcode]

Simply you can use process.env.variablename and pass the variable along with value in the terminal

[@umesh1056]

Please let us know how to hook this code with gh actions

[@letcode]

I have to check, the basic concept is if the GitHub action supports parameters then we can achieve this.

[@umesh1056]

@@letcode thank you appreciate if you can share some insights about it

[@shaifalijain1253]

I started my 1st job but i don have experience how to deal with these problems or shpuld i ask my teammates.. I tried this, hope it will be passed from my company side Do you have any contacts or classes to share and ask problems directly?

[@letcode]

You can use our telegram group. Teammates should always help and assist.

[@VikasKumar-vg2jp]

Very helpful video Sir, Thanks a lot.🙏 I just have one query is there any other way to setup the environment?? For example instead of .env file, i can create a .ts file and define all the env related details in that and then use it another file and at run time as the per environment passed the execution will be done. If yes is there any video you have created for the same.🙏

[@letcode]

Thanks. As the variables should be passed from the terminal, either. Env files been be used or process.node can be used.

[@letcode]

kzbin.info/www/bejne/Y4iwYYSwltxnsMksi=1rfhPNCKNVjYy80C

[@danielkovacs3664]

nice series!! I have one more question. I understand that i have to use git bash terminal for this: test_env=stage npm run reg but if i want to run in azure devops pipeline with env variable from azure it will work?

[@letcode]

Use gitbash terminal.

[@kevinbonnett2168]

Worth noting that you can have a default environment in your global config: const test_env = process.env.test_env || "test" if (test_env) { dotenv.config({ path: `.env.${test_env}`, override: true }) }

[@SSLAZ]

Thank you . Can you also please share how can we use this in global set up file?

[@sivaramakrishnareddyrajula9605]

Hi, I tried to include loading ENV file and loggedstate.json in the same method, I am facing issue like TypeError: Cannot read properties of undefined (reading 'page'). If we try to load env file using class constructor, getting below error. Error: utils\ui_globalSetup.ts: file must export a single function. Can you help to fix it? import dotenv from "dotenv"; import { environment } from "./env"; import { chromium } from "@playwright/test"; import LoginPage from "../pages/Login.page"; let loginPage: LoginPage; async function globalSetup() { if (process.env.test_env) { dotenv.config({ path: `.env.${process.env.test_env}`, override: true }) } const browser = await chromium.launch(); const page = await browser.newPage(); loginPage = new LoginPage(page); const baseURL = `${environment.UI_BASE_URL}`; const userName = `${environment.UI_USER_NAME}`; const password = `${environment.UI_PASSWORD}`; console.log(baseURL); console.log(userName); console.log(password); // Login await page.goto(baseURL); await loginPage.verifyTitle(); await loginPage.enterUserName(userName); await loginPage.enterPassword(password); await loginPage.clickSignIn(); await loginPage.enterSecurityAnswer(); await loginPage.verifyBtn.click(); // Save Signed-In State to loggedInState.json await page.context().storageState({ path: 'loggedInState.json' }); await browser.close(); } export default globalSetup;

[@letcode]

Is it fixed ?

[@sivaramakrishnareddyrajula9605]

⁠​⁠​⁠@@letcodeyes, it is fixed. We need to use process.env.BaseURL directly as environment variables from other classes didn’t read properly. loggedinstate.json is generated but I am unable to use it. My tests are still redirected to login screen. We are using Okta token validation for login. Please let me know if you are aware of how to handle okta validation in login state. Dev team is storing access token in local storage.

[@cifuentes678]

Great tutorial! On the other hand, I tried to debug my tests using the Playwright Test for VSCode but it fails (it seems that it doesn't recognize the setup you suggest in your video. For some reason the env variables are null or "empty"). If I run the tests in the traditional way (through the CLI), it works.

[@letcode]

Hi, yes because the playwright vs cod extension doesn't check for env variable.

[@cifuentes678]

@@letcode Is there a way to read them, but still following your solution?

[@vaishalisoni8022]

facing same issue, even for me above env files set-up is not working, it prints "undefined", did you figure out how it worked for u ?

[@arutchelvana33]

Hello Koushik NIce Explanation. Thank you. test_env which we pass from command/config file, where is it defined? it is in the system env variable?

[@letcode]

No it's custom one, to set in the node.

[@arutchelvana33]

@@letcode sorry did I miss that setting in this vedio? If you don't mind can u explain how to set. Thank u

[@letcode]

@@arutchelvana33 from node you have to declare that's it bro , Eg. Test_env=test npm test

[@TestAutomationHub]

compile time issue as env variable may come as string or undefined where as your method accept only string, to fix you can pass or condition with some string value. const BASE_URL = process.env.BASEURL || "some default value or empty string" or also add //@ts-ignore above the line of code in test

[@letcode]

Yeah, i have a fix for this. Better way is to use the decorators that will also help to get the snippet suggestions

[@Brijendra9322]

@@letcode i am still facing the issue. it says undefined. url is not picked up

[@brijendrasingh7816]

Anyone pls help me with the solution.i am getting undefined in terminal.its not picking BASE_URL

[@letcode]

I believe you are using git bash else the way we set is going to differ. Pls read other comments to figure it out or send a screenshot to the discord.

[@girishh143]

Thanks For The video, it is really help full. Just want to know that, the same process we have to follow for POM framework ? because I am unable to read the values from .env file, I have created the POM framework, from your music video. There it didn't work. getting error " locator.fill: value: expected string, got undefined" It will be really helpful, if you can provide some input. Thanks 🙂

[@letcode]

Did u set the env value in terminal?

[@girishh143]

@@letcode Yes, test_env=test npm test

[@letcode]

Maybe u can check this video, Here I have used the same concept. kzbin.info/www/bejne/onqonaGHf95qprc

[@girishh143]

@@letcode Thank You !!🙂 I will check and update you.

[@akshaypramodpai7736]

Awesome tutorial

[@letcode]

Thanks buddy 😌

[@AnUnprofessionalChef]

Plz cover how to run playwright test against a browser in a docker container thru open agent, Thankyou!

[@ganesamuruganmuthiah1019]

Hi Koushik, I have faved issues like 0 Scenarios 0 Steps 0m00.003s (executing steps: 0m00.000s)

[@letcode]

Hi, using cucumber or playwright test runner?

[@szymonsawczuk]

Hi @LetCode with Koushik your tutorials are very helpful, thanks for that. Is there a chance to create such series but with JavaScript?

[@letcode]

I prefer typescript but concept wise both are the same.

[@rishabhaggarwal312]

@@letcode I am not able to implement this with JS, Any solution with which you can help?

[@letcode]

To handle multiple env it is the same as TS, no changes required. What is the issue u r facing?

[@srikanthpotipareddy4288]

@@rishabhaggarwal312 : Have you found any solution with JS as i am getting undefined.

[@youshiva]

@@srikanthpotipareddy4288 same undefined error. were you able to fix this?

[@debjanighosh5947]

Hi Kaushik, I have defined value of a select box in .env file as COUNTRY=GB and in the script i have written await page.locator('').selectOption(process.env.COUNTRY); But it can identify value from the .env file got expected object, got unidentified error can you please help me here what is wrong I am doing here?

[@debjanighosh5947]

*it cannot identify the select box value from the .env file

[@letcode]

Did u set the path correctly using dotenv.config ?

[@debjanighosh5947]

@@letcode in playwright.config file I have added require('dotenv').config() statement

[@letcode]

Not in the config file, it should be in the file where u r calling env . Country or it should be in the global setup

[@debjanighosh5947]

@@letcode 1. First I have run npm install dotenv --save 2. next it got added as dependencies in package.json file 3.next create an ,env file and define the variables 4. add line in the playwright.config file as require('dotenv').config() 5. after that calling the variables in the script Is there any step that need to do, to set .env in global setup? Please suggest

[@vijayrajendran3969]

Hey dude, @LetCode with Koushik execellent stuff! very helpful! would be doing a docker setup video? not a lot of info re this

[@letcode]

Thank you 😊. Circle CI with docker integration coming soon.

[@varsharajput243]

command not found.

[@letcode]

Lookout for other comments, you'll get the solution

[@DivyaMVN]

Thank you for your videos with detailed explanation. Appreciate that was very helpful when I was starting off with Playwright. Is there any other way we can do this avoiding use of multiple env files (this is because I have a big list of URLs I need to run against diff tests every release and dont want to endup creating like 10 .env files). Can we use the projects: [ ] feature of config file, to setup different testDirs, URLs and act accordingly to the current Project running? or Can you pls show how to add multiple config files and work with them or point me to an appropriate doc? Thanks a lot!!

[@letcode]

Yeah you can use multiple config file if that fits your requirement. npx playwright test --config=tests/my.config.js

[@kidvikvlogs]

Same thing will work using javascript?

[@letcode]

Yes it should work

[@kidvikvlogs]

Kindly upload the same concept using page object pattern

[@letcode]

@@kidvikvlogs it will be very same. Try and let me know if any issues there.

[@kidvikvlogs]

@@letcode in page object for particular java file i placed my url method .there what should I need to pass .calling this action from test file

[@sromankov6102]

Thanks cool video, could you record a video, how to use eslint with playwright ?

[@letcode]

Sure thing!

[@bismanpreetsingh3171]

Hi @Letcode with Koushik , your videos are really helpful , I have learned a lot from your videos. It would be really great if you could prepare a session on sorting verification of web tables in playwright. Your help will really be appreciated. Thanks 😊

[@letcode]

Hi, yeah sure I'll do that.

[@deepthibhandary4978]

Hi Kaushik, Thanks for this tutorial. Its very helpful. We run our Playwright tests on multiple integration environments. We are currently integrating our tests with CI now. Do you have a tutorial on how to run PlayWright tests on multiple environments from Jenkins where users can enter the environment name as a parameter in Jenkins?

[@letcode]

Hi, not yet, I'll try to make a video.

[@deepthibhandary4978]

@@letcode Thanks Kaushik. That would be very helpful!

[@DenisXemc]

how relevant is this course at this point in time? There are a lot of new features added in recent releases of playwright, it would be nice if this tutorial was up to date

[@letcode]

It is still relevant, but a new course is coming soon.

[@rickyleg1001]

I downloaded your framework and looks like it does not work

[@letcode]

It should work if u have downloaded the latest code. Can u also what is not working?

[@rickyleg1001]

@@letcode Another issue that I see is that only form.test.ts file is displayed in the test explorer. test.ts is not displayed in Test Explorer

[@rickyleg1001]

@@letcode unfortunately, the project does not work

[@letcode]

Ok, you have to learn playwright, only framework will not help u

[@grv1mehta]

Thanks Koushik, All your videos are really helpful, you are doing wonders for the testing community :) Regarding this video it worked well in my local but the same thing when integrated with Github actions fails to ready BASE_URL value defined in .env file. Its says undefined... Can you please help ?

[@letcode]

Thanks, pls confirm whether the npm command used in local to execute is also used in github action yml file? is the env files are committed to the branch?

[@grv1mehta]

@@letcode yes Koushik, it's the same npm run ctest Where ctest is cross-env test_env=envName playwright test --project=chromium

[@gokulnath329]

Hey Koushik, Hope you are doing good! I am unable to pass values to parameters from command line. Below is my setup. Please, could you throw some light on this? My package.json -> script : "smokeTest":"cross-env ENV=$ENV APP=$APP BROWSER=$BROWSER cucumber-js --config=config/cucumber.js --tags @smokeTest" when i try to run "$ENV=dev1 $APP=dev1 $BROWSER=chrome npm run smokeTest" ,i am not getting the parameters passed.

[@letcode]

Pls use githbash terminal

[@mrigankved]

Nice one

[@letcode]

Thanks 👍

[@therawtruth43]

Hi koushik! Good explanation. thank you! could you please cover the Excel reading and writing using playwright PDF reading and comparing the pdf and web page values

[@letcode]

Hi, ok I'll check.

[@therawtruth43]

@@letcode much appreciated thank you

[@rachitgarg3101]

Please provide the same tutorial for JavaScript

[@letcode]

Not much difference, save the file as js it should work. Only the export and import syntax will change

[@suriyanst9843]

Dynamic xpath tamil video podunga bro..ancestor, following,preceding,preceding-sibling,child,parent, dependant..oru clear video podunga pls

[@letcode]

English la 45 mins video potu erukan bro, Adhu parunga purila nah tamil la poduran kzbin.info/www/bejne/pqHRdZmEqridqNE

[@AnUnprofessionalChef]

Thanks bro😊

[@letcode]

Welcome 😊

[@TestingOnly-q9y]

OKAY , so for everyone who's got error and failed running their tests 1. in your test.spec file, to make BASE_URL not undefined, simply . It should work 2. Should use GIT BASH 3. When running the script, if you don't specify command in under script{} , you can simply type in , or set command script in package.json say you name it "mycommand" : then when running in gitbash, type in

[@letcode]

Did I fail to make it simpler and easy to understand ? 😕

[@TestingOnly-q9y]

@@letcode no, your tutorial's very understandable. I just missed the item #3 above. I forgot earlier in the video you set script{} test in config.json. So I ran immediately thinking that word "test" in npm test is built-in word

[@letcode]

Glad. I appreciate your comment, I just asked for my self improvement so that I can deliver with more better clarity. Thanks 👍

[@TestingOnly-q9y]

@@letcode so when we setup and run in Jenkins, is it gonna look for the script{} commands under package.json file?

[@letcode]

@user-dy3pt9ej3m yes

[@shivanirokade7250]

I followed the exact same thing but im getting page.goto: url: expected string, got undefined

[@letcode]

Definitely you would have missed something or you might not be using the git bash terminal.

[@shivanirokade7250]

Yes , I was using default pwsl terminal. Thanks! With git bash terminal it works fine!

[@suriyanst9843]

Dynamic xpath tamil video podunga bro..ancestor, following,preceding,preceding-sibling,child,parent, dependant..oru clear video podunga pls

[@suriyanst9843]

Dynamic xpath tamil video podunga bro..ancestor, following,preceding,preceding-sibling,child,parent, dependant..oru clear video podunga pls

[@suriyanst9843]

Dynamic xpath tamil video podunga bro..ancestor, following,preceding,preceding-sibling,child,parent, dependant..oru clear video podunga pls

[@suriyanst9843]

Dynamic xpath tamil video podunga bro..ancestor, following,preceding,preceding-sibling,child,parent, dependant..oru clear video podunga pls