Using Environment Variables in Playwright Tests

Using environment variables in Playwright tests is a best practice for managing sensitive data (like credentials, URLs, or tokens) and configuring different environments (dev, staging, production). Here’s a practical guide on how to do it.

✅ Why Use Environment Variables in Playwright?

Keep credentials and secrets out of your test code

Easily switch between different environments

Follow CI/CD and DevOps best practices

📦 1. Setting Environment Variables

🖥️ In the Terminal

You can pass environment variables directly when running your tests:

bash

Copy

Edit

BASE_URL=https://staging.example.com npx playwright test

Or on Windows (PowerShell):

powershell

Copy

Edit

$env:BASE_URL="https://staging.example.com"; npx playwright test

📄 2. Accessing Environment Variables in Playwright

Use process.env in your Playwright config or test files.

🔧 In playwright.config.ts:

ts

Copy

Edit

import { defineConfig } from '@playwright/test';

export default defineConfig({

  use: {

    baseURL: process.env.BASE_URL || 'http://localhost:3000',

  },

});

🧪 In a test file:

ts

Copy

Edit

test('Login test', async ({ page }) => {

  const username = process.env.USERNAME;

  const password = process.env.PASSWORD;

  await page.goto(process.env.BASE_URL!);

  await page.fill('#username', username!);

  await page.fill('#password', password!);

  await page.click('button[type="submit"]');

});

📁 3. Using .env Files (with dotenv)

For easier local management, you can use a .env file.

✅ Step 1: Install dotenv

bash

Copy

Edit

npm install dotenv

✅ Step 2: Create a .env file

env

Copy

Edit

BASE_URL=https://staging.example.com

USERNAME=testuser

PASSWORD=secret123

✅ Step 3: Load .env in your config

ts

Copy

Edit

// playwright.config.ts

import { defineConfig } from '@playwright/test';

import dotenv from 'dotenv';

dotenv.config();

export default defineConfig({

  use: {

    baseURL: process.env.BASE_URL,

  },

});

🛡️ 4. Security Tip

Never commit your .env file to version control.

Add it to .gitignore:

gitignore

Copy

Edit

.env

🚀 5. Use Cases

Environment Variable Use Case

BASE_URL Set base URL for different environments

USERNAME / PASSWORD Manage login credentials securely

API_KEY Use API tokens for integrations

HEADLESS Control headless mode (e.g. in CI/CD)

📦 6. Running Tests with Different Environments

bash

Copy

Edit

ENV=staging BASE_URL=https://staging.example.com npx playwright test

You can also define a script in package.json:

json

Copy

Edit

"scripts": {

  "test:staging": "ENV=staging BASE_URL=https://staging.example.com npx playwright test"

}

✅ Summary

Use process.env to access environment variables

Load them via .env using dotenv

Keep secrets secure by avoiding hardcoding

Ideal for managing different test environments

Would you like a working example or sample GitHub repo structure using .env and Playwright?

Learn Playwright Training Course in Hyderabad

Read More

Cross-Browser Testing with Playwright

Debugging Playwright Tests: Best Practices

Visit Our IHUB Talent Training Institute in Hyderabad

Get Directions