Environment Variables | Bondar Academy
Course: Playwright UI Testing with TypeScript
Module: Advanced Tricks and Techniques
Instructor: Artem Bondar
Lesson Summary
Environment Variables Overview In this lesson, we discussed environment variables , which are variables that hold values specific to different environments (e.g., development, QA, staging). Each environment may have unique values for parameters such as base URLs and credentials. Configuring Environment Variables in Playwright To configure environment variables in Playwright: Use the predefined environment variable base URL located under the use block in the configuration file. Replace hardcoded URLs in tests with / to reference the base URL . Switching Between Environments To dynamically switch between environments: Create projects for each environment (e.g., dev , staging ) in the projects section. Define the base URL for each project, allowing Playwright to select the appropriate URL based on the project name. Defining Custom Environment Variables For additional environment variables: Create a testoptions.ts file to define custom variables. Import and extend the test type from Playwright to include these variables. Use process.env to access these variables in your tests. Using .env Files Environment variables can also be stored in a .env file: Install the dotenv library to read from the .env file. Define sensitive information (e.g., usernames, passwords) in the .env file and ensure it is included in .gitignore . Command Line Environment Variables Environment variables can be passed via the command line when running tests: URL=your_url npm test In summary, this lesson covered how to manage environment variables in Playwright, including defining base URLs, switching environments, and handling sensitive information securely.
Video Transcript
In this lesson, we will talk about environment variables. So environment variables are variables that hold values related or specific to a particular environment. For example, you have a dev environment, QA environment, staging environment, and so on. And each of those environments may have different values, for example, value for the base URL or values for credentials, username and password, or other values specific for that environment. And when you run the test, your framework should be able to switch between environments. Depending on which environment you run the test, the right value should be used. So in this lesson, I will show you how to configure those environment variables in the Playwright. Let's get into it. So first of all, let's begin with the base URL. Playwright has a predefined environment variable called a base URL. It's located under the use block, and you can put your base URL right here. So instead of having the base URL that we use right here inside of the test, you can simply put it right here, replace it, and then inside of the test, replace the URL itself to just forward slash. That's it. And Playwright will understand that it needs to look to this environment variable value inside of the config file. All right, now we can go and simply replace all other page await that we use our base URL local host here and here. So we removed a certain duplications in the code. Now environment variable with our base URL is in single place inside of the file. So if I run the test right now, it will work exactly how it worked before. So I'm running the test. You can see we can successfully open the application. All right, how to be if we need to change this URL for different environments? How to handle that? For example, this base URL is, let's say, our production environment. But if we want to run in dev environment or staging environment, how we can dynamically switch between the environments? Well, basically, you can use the projects section over here. So projects is not necessary Chromium or Firefox. This is just an example. You can create your own projects and give it a different name. For example, we can create a project, let me copy this, as dev environment, and create another project as staging environment. And now I can use this base URL inside of the use section of the project level. So right here, and add another option, base URL and same thing over here. All right, and now we can change, for example, 401, and another port, 402. Of course, this URL will not work because it is not valid. But I just want to demonstrate that Playwright will be able to call a different base URL based on the project name. So let me open package.json, and I will call this script, but with a different project. So instead of Chromium, let's say I want to run dev test project, which is dev. Let's see what's going to happen. And of course, the test is failed. So scrolling a little bit up, and we can see that application was trying to call the local host 4201, and this is exactly what we defined as environment variable here inside of the dev project. So this is how you can handle a different base URL for your application based on projects. All right, but how about this? So we have, for example, test drag and drop that has own URL like this, which is different from the base one, and auto-weighting URL. So how to define the environment variables for those? Unfortunately, you cannot just create your own environment variables inside of this file. It will not be recognized. So we need to create a little bit modifications in order to enable this feature. So the first step would be we need to create a test options file, new file, and I call it testoptions.ts. Then inside of the test file, we need to import test as base from playwright test. Then we need to export a type test options. Export type test options equals to, and create a variable name that we want to have. So going back to drag and drop, for example, we want to call it globals-qa-url. Going back, globals-qa-url. And the type of this value will be a string. Then we need to export the constant. Export const test equals to base.extend. Then we want to extend the type test options. Here we need to put the name of this globals-qa-url that we created, and the value will be array. Inside of the array, we need to put the default value and object option true. The value you can provide either empty string or you can put a default value. I would prefer to keep this as an empty string as a placeholder, and we will override this value later on inside of the configuration file. Okay, this template is ready. Now let's import it inside of the config file. Here we need to make an import. Import type test options from test options. Type script found this automatically. And then inside of the defined config, we need to add this type over here. Test options. All right, this is done. And now we can create this environment variable inside of the test. So we give it a name, globals-qa.url. I put it right here. And now I can provide value to this globals-qa-url. Going to my test, copying this value, and pasting it right here. Now, how to call this globals-qa-url inside of the test right here? We need to make a couple of modifications over here. So instead of importing tests from the Playwright library directly, we will create this import test from test options right now. Because inside of the test options, I remind you, we made the import of the test from the Playwright test library. Then we made some modifications, and then importing this back inside of the test from the test options. So this test method right now is extended with some of additional features that we provided inside of the test options. And right now, we can add a second fixture inside of the declaration. And the name will be our globals-qa-url. Globals-qa-url, and then we can put this globals-qa-url over here. All right, I think we're ready, and we can run this test. Yeah, you can see it works perfectly fine. Our URL was recognized, and page was open. And now, if you want to go back, then you can use this URL same way like we did with base URL over here. So you can put one URL inside of the dev environment, another URL inside of the staging environment. The test options file will become the placeholder just for the environment variables name. You declare it over here and create the list of all needed environment variables that you need inside of the framework. All right, what other options do you have? We have another test, auto-weighting.spec.ts. And this test also has own URL. And let me show you another example for environment variables. So we can use a process environment variable to save this variable. So let's create a new file inside of the root and call it newfile.env. Inside of the file, we can keep all process environment variables. And we can give any name, for example, just a URL and provide the value. So I'm copying this value from here and paste inside of the env file. And keep in mind that I am not using single quotes or double quotes. So I'm keeping the URL equals and then value particularly. And then inside of the test, what I'm doing is calling process.env.url. Now, to enable the feature of reading from env file, we need to download the library.env. So going to the browser.env.npm. The very first URL, click on that and copy this link. Going back to application, terminal, npm install.env-save-dev-force. All right, quick installation is done. Going back to playwright-config.ts, scrolling up. And we need uncomment this code, require.env.config. That way, we're gonna enable reading the env file from file system. And that's pretty much it. Now, we can try how does it work. Okay, we can see that URL was successfully opened and test is executing. Also, you can pass the values from the process environment variables, not only from env file, but using the command line as well. Let me show you that. So taking this example, Terminal. Pasting it right here. So want to run the test, which is autowaiting.spec.ts. autowaiting.spec.ts. And then inside of the same command, I just passed the name of the process environment variable, which is URL equals, and then pass the value. Pasting into the terminal, put the space, and command is ready. And just to demonstrate that it's gonna work, I comment out this particular one and execute the command. All right, I didn't run the browser, but looks like it is working successfully. Because the test is running and not throwing any errors. Yeah, one test passed. Now the second test is working and the third test will work as well. And now you can save this URL under the different script inside of the package.json. For example, you can create script like autowait dev, for example. And you can save it right here, and your URL will be this one. Then you can create autowait, for example, staging, paste the script, and replace this URL. This kind of approach also may work in case you want to use different NPM scripts and overriding environment variables. And the last thing I guess I wanna show you is using just JavaScript, how you can manage the environment based on the ternary operators. This base URL is defined like this. But how can you use a different environment variable, can manage the base URL without using the projects? That's the way how you can do it. So I comment this out, and then type base URL. And then let's say, if my process environment variable dev equals to 1, then I expect that my URL will be this one. Else, which represent the column, if my process environment staging equals to 1, then my environment variable will be what? This one. Otherwise, I want to run against this default URL, something like that. And then depending on what value for the process environment variable will you pass inside of the command line, the value of the actual URL will be assigned accordingly. So let me demonstrate you that. So for example, we take this existing script, I'm passing it over here. And then I pass a different environment variable in the beginning. And I say dev equals to 1. So I want to run usePageObjects.spec.ts. I say dev equals to 1. If dev equals to 1, I expect that this base URL will be used to run this test. Let's see. Nope, it doesn't work. Okay, I forgot to put comma here at the end. All right, sounds good. Let's try it one more time. And tests looks like it's running successfully. Test number one, test number two. All right, two tests pass successfully. So this environment variable works. And what else? For example, you have a test credentials that you want to use inside of the test. And here inside of usePageObjects, we have those credentials. You can replace them as well. Let's go to env file and create credentials such as username Equals at test.com and password equals to welcome1. Okay, and then inside of the test, we replace this process.env.userName. And here, process.env.password. And since we're using username and password that are saved inside of the env file, it's considered a normal practice when .env added into the gitignore. So I added .env. So this file will not be committed into the repository and will be used only on my local computer where I execute a certain test. So the sensitive information will not go to the code base. But when the code will be executed, it will work just fine on my local machine. And also, it's normal to use the .env.password. And also, it's normal when environment variables is saved per machine or per CI server. So this is when you use .env file. And if I run this test right now, this should work as well. All right, that worked successfully. All right, guys, that's it. This lesson was pretty big. I showed you different options about environment variables. And let me quickly summarize what we did in this lesson. So when you need to handle base URL, you have the option of base URL available in Playwright. Also, you can manage your base URL slicing by the projects. The base URL defined inside of the project will override the default value. Then executing the different projects, you will be able to switch between environment variables. If you want to add more environment variables inside of playwright-config.ts, you will need to create a test-options.ts, define those variables, and make some modifications right here. Importing those test-options types and extending this type inside of the define-config. Then inside of the test, you will need to import this test object from the test-options and pass the newly created environment variable as argument to the test declaration. Also, you can use a process environment variables. You can use them different way. Another way is to declare process environment variables inside of .env file. Don't forget to include it into the gitignore with the sensitive information. And then you can globally call those environments variables either inside of the playwright-config.ts or assign values to those variables as part of the command line in the script. And you can also save them inside of the script section of the package.json. All right. That's it, guys, and see you in the next lesson.