AuthPage.js

const credentials = {
  username: process.env.USERNAME ?? '',
  password: process.env.PASSWORD ?? '',
};

export class AuthPage {
  constructor(page, baseUrl = '') {
    this.page = page;
    this.baseUrl = baseUrl;
  }

  async _submitLoginForm() {
    await this.page.click('input[type="email"]');
    await this.page.fill('input[type="email"]', credentials.username);
    await this.page.click('input[type="password"]');
    await this.page.fill('input[type="password"]', credentials.password);
    await this.page.click('text="Sign In"');
  }

  async login() {
    await Promise.all([
      this.page.goto(this.baseUrl + '/login'), 
      this.page.waitForNavigation(),
    ]);

    await this._submitLoginForm();
    
    // if there's a redirect back to main page
    await this.page.waitForURL((url) => url.origin === this.baseUrl, { waitUntil: 'networkidle' });
  }
}

global-setup-improved.js

import { chromium } from '@playwright/test';
import { AuthPage } from './AuthPage';
import { promises } from 'fs';

async function isFileExists(path) {
  try {
    await promises.access(path);
    return true;
  } catch {
    return false;
  }
}

async function globalSetup(config) {
  const [project] = config.projects;
  const { storageState, baseURL } = project.use;
  const result = await isFileExists(storageState);

  if (result) {
    return;
  }

  const browser = await chromium.launch();
  const page = await browser.newPage();

  const auth = new AuthPage(page, baseURL);
  await auth.login();
  
  await page.context().storageState({
    path: storageState,
  });

  await browser.close();
}

export default globalSetup;

global-setup.js

import { chromium } from '@playwright/test';
import { AuthPage } from './AuthPage';

async function globalSetup(config) {
  const [project] = config.projects;
  const { storageState, baseURL } = project.use;

  const browser = await chromium.launch();
  const page = await browser.newPage();

  const auth = new AuthPage(page, baseURL);
  await auth.login();
  
  await page.context().storageState({
    path: storageState,
  });

  await browser.close();
}

export default globalSetup;

playwright-config-improved.js

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

const STORAGE_STATE_FILE_PREFIX = 'state';
const STORAGE_STATE_PATH = './e2e';
const EXPIRES_IN_MINUTES = 60;

const getStorageStateFileName = () => {
  const lastFile = fs.readdirSync(STORAGE_STATE_PATH)
    .filter(name => name.startsWith(STORAGE_STATE_FILE_PREFIX))
    .pop();
  const currentTime = Date.now();

  if (lastFile) {
    const [,lastTimestamp] = lastFile.split('.');  
    const dateDiffInMinutes = Math.floor((currentTime - parseInt(lastTimestamp)) / 1000 / 60);
   
    return dateDiffInMinutes > EXPIRES_IN_MINUTES 
      ? currentTime 
      : lastTimestamp;
  }

  return currentTime;
};

const config = {
  globalSetup: './e2e/globalSetup',
  use: {
    baseURL: process.env.BASE_URL,
    // generates new filename concatenated with timestamp or returns old one (for example, state.1645720991712.json)
    storageState: `${STORAGE_STATE_PATH}/state.${getStorageStateFileName()}.json`,
  },
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
  ],
  testDir: './src',
  testMatch: '**/*.spec.js'
};

export default config;

playwright-config.js

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

const config = {
  globalSetup: './e2e/globalSetup',
  use: {
    baseURL: process.env.BASE_URL,
    storageState: `./e2e/state.json`,
  },
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
  ],
  testDir: './src',
  testMatch: '**/*.spec.js'
};

export default config;