playwright: [BUG] Authentication only works for the first tests

System info

• Playwright Version: [v1.33]
• Operating System: [Windows 10 Enterprise]
• Browser: [Chromium]
• Other info: using https://www.pingidentity.com/ for auth

Auth.setup.ts

import { expect, test as setup } from '@playwright/test';
import envConfig from './config';
const ENV: string = process.env.ENV;
const password: string = process.env.PASSWORD;
let username: string;

 


const authFile = 'tests/utils/playwright/.auth/user.json';

 

setup('authenticate', async ({ page }) => {
  await page.goto(`url`);
  //login
  await page.locator('id=username').fill(username);
  await page.locator('id=password').fill(password);
  await page.locator('button', { hasText: 'Sign On' }).click();

 

  await Promise.all([
    page.waitForResponse(
      (res) =>
        res.status() === 200 &&
        res.url() === 'url'
    )
  ]);
  // End of authentication steps.

 

  await page.context().storageState({ path: authFile  as string  });

 

});

Config file

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

 


export default defineConfig({
  reporter: [
    ['line'],
    ['junit', { outputFile: 'tests/test-results/playwright-test-results.xml' }]
  ],
  outputDir: 'tests/test-results/',
  workers: 1,
  timeout: 60 * 1000,
  expect: {
    timeout: 15000
  },
  use: {
    actionTimeout: 0,
    trace: 'on-first-retry',
    video: 'on-first-retry',
    screenshot: 'only-on-failure',

 

  },
  projects: [
    { name: 'setup', testMatch: /.*\.setup\.ts/ },
    {
      name: 'chromium',
      use: {
        ...devices['Desktop Chrome'],
        viewport: { width: 1920, height: 1080 },
        storageState: 'tests/utils/playwright/.auth/user.json'
      },
      dependencies: ['setup']
    }
  ],
});

Test file

import { expect, test } from '@playwright/test';
const globalTimeout = 60000;

 


test.beforeEach(async ({ page }) => {
  test.setTimeout(120000);
  await page.goto(`URL`);
});

 

test('test 1', async ({ page }) => {
  test.setTimeout(globalTimeout);

 

  //navigating to Analytics ->page 1 and wait for APIs to return 200
  await page.locator('text=Analytics').first().click();
  await Promise.all([
    page.waitForResponse(resp => resp.url().includes('API PATH') && resp.status() === 200),
    await page.locator('text=Hospital Compare >> nth=0').click()
  ]);

 

  await expect(page.locator('[data-test-id="global-filters-system"]')).toHaveText('test 2 ');

 

});

 

test('test 2', async ({ page }) => {
  test.setTimeout(globalTimeout);

 

  //navigating to Analytics -> page 2
  await page.locator('text=Analytics').first().click();
  await Promise.all([
    page.waitForResponse(resp => resp.url().includes('API PATH') && resp.status() === 200),
    await page.locator('text=equalizerKey Indicators').click()
  ]);

 

  //Verify the global filters
  await expect(page.locator('[data-test-id="global-filters-system"]')).toHaveText('test 2 ');
});

Steps

• [Run the test]

Expected  I expect that all tests will use the storage state and bypass the authentication after the auth.setup.ts runs successfully.

Actual The first test that is run after the auth.setup correctly bypasses the auth, but the next tests will no longer use the stored auth. I will see my login page on every test after the first test successfully uses the auth.setup