Playwright, Dotenv, and Env Variables

When you are developing test scripts there are times when input data needs to be secure. It is normal for a company to frown on test scripts that have secure or private data embedded. For example, your application user credentials, such as, ID and password should not be compromised by hardcoding them in a test script.

Having an external way to save private data is a better approach. One way to accomplish this is storing private data in system environment variables. Another way is to store the data in a file that is not easily located, or it is password protected. Then the solution should include a way to read the data via the test script. I would like to introduce two useful solutions.

The first solution for this is to use system environment variables. The variables are local to the test execution machine. The test script must have a means that can read and make the data available to an application under test.

Let’s set up the test environment to demonstrate the first solution using system environment variables. For my test environment I use PyCharm as an IDE. You may have a different IDE. I am not aware of an IDE that cannot read system environment variables. So, you should be fine. Here is a typescript test example (a JavaScript alternative) which is not directly accessing an application. It is designed only to read some environment variables and display them to the log to show you it works.

Before we run the script, let me show you my system environment variables that I am going to use in the test. Using the taskbar search in Windows I specify environment variables. Then I can display the user and system variables. There are two variables I created to use as an example. One is PASSID and the other is USERID. Notice the values. They represent data that I want to consider private data. When the test is executed, the data will be exposed to the log to prove the solution.

Now I am ready to run the test script. When it is completed, you will see the results in the terminal window. The two environment variable values are displayed. I show the variable names to clarify what value is being displayed. Looking back at the script you can see the syntax. The important part for your scripting is how to retrieve the variables and their values. You can specify process.env.variablename anywhere in your playwright script to reference the data. So, if you are desiring to input the data into other objects or screen locators, it is doable.

It should be obvious that this solution is not highly secure. However, it is a useful solution. You are storing the data in a simi-private area. You don’t normally display your environment variables, so it is somewhat secure from public eyes. The data is not portable. So, that means are not transporting a secure file with your scripts if they need to be located on another machine. However, you can set up the variables on another machine with its own private data.

What about a second solution? Playwright and some other test languages are supported by a library called DOTENV. The concept supports reading a file to obtain private data. This approach is another useful solution. There are many videos and articles written on the subject. I regret to say that some of the presentations I was not able to follow or did not work on my machine. It is my hope that you find what I share does work on your machine. Here is what I had to do to set up to use DOTENV in my Typescript scripts.

  1. From your IDE terminal or command prompt window, type NPM INSTALL DOTENV –SAVE. Type this in lowercase. When it is complete you are ready to create a “.ENV” file.
  2. Here is an example of one of my “.ENV” files.
    1. This is not a typo. The dot or period belongs before the ENV.
    2. USERID1=”user_WALLY”
  3. Modify your script to read the .ENV file.
    1. Add the following as the first statement in the script: import { test, expect } from ‘@playwright/test’;
    2. Before the TEST statement in the test script add the following statement: dotenv.config({
      path: ‘./root directory name/.env’
      1. The root directory name must be the Playwright root directory
      2. The “./” reference must reflect the number of levels the root is from the project directory
  • The .env must reference the exact name of the environment file
  1. If you desire to display the values of the environment variables in the log, here are some sample statements to add to your script before the test statement, but after the dotenv.config().
    1. log(process.env.USERID1);
    2. log(process.env.PASSID1);

There is one more thing I should tell you. Some of us may not like having to add the DOTENV code to each script. There is a variation to this solution. The same code I described that you add to the script can be added to the Playwright configuration file – “playwright.config.ts” in the root playwright directory. The CONSOLE.LOG reference is not required. Only the PROCESS.ENV references are required in the test scripts to access the private data values.

By default, there is a commented-out REQUIRE statement in the Playwright configuration file. It is only useful for JavaScript testing – not Typescript testing. So, I leave that statement commented out, but add the dotenv.config statement.

I truly hope you find use with these solutions. I certainly hope any confusion you encountered trying to get either solution working has been resolved. Happy testing and thank you for your time.