Trying to read value from .env file throws undefined error in playwright

Question

I am unable to get the url value from the .env file in my playwright test, while running the test, it is throwing error baseURL of undefined,could someone please advise on the issue ? TypeError: Cannot read property 'baseURL' of undefined

  10 | test('Access the Playwright Page', async ({ page }) => {
  11 |   const playwrightDev = new PlaywrightDevPage(page);
> 12 |   await playwrightDev.goto(Config.baseURL);
     |                                   ^

Following is my .env file.

URL=https://playwright.dev/

Below is my playwright.config.js file and settings

const { devices } = require('@playwright/test');

/** @type {import('@playwright/test').PlaywrightTestConfig} */

const config = {
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  use: {
    trace: 'on-first-retry',
    baseURL: process.env.URL,
  },
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
  ],
};

module.exports = config;

Below is my example.spec.js file

const { test, expect } = require('@playwright/test');
const { PlaywrightDevPage } = require('./playwright-dev-page');
const { Config } = require('../playwright.config');

test('Access the Playwright Page', async ({ page }) => {
  const playwrightDev = new PlaywrightDevPage(page);
  await playwrightDev.goto(Config.baseURl);
 
});

Answer 1

You need to load dotenv inside your config via: require('dotenv').config()

Then you can inside your tests use the env vars of your "dotenv files" via e.g.: process.env.FOOBAR

See here for dotenv usage: https://www.npmjs.com/package/dotenv