[BUG] Change in storageState/use behavior in Playwright 1.21 and 1.22

Context:

• Playwright Version: 1.22.2
• Operating System: Windows
• Node.js version: 16.15.1
• Browser: All

Code Snippet

The full reproduction of this issue can be found in this repo.

const { test, expect } = require('@playwright/test');
const path = require('path')
const fs = require('fs')
const { v4 } = require('uuid')

const generateStorageStateFile = (filename) => {
  const currentPathSegments = filename.split(path.sep)
  const storageStatePath = `storage-states/state-${currentPathSegments[currentPathSegments.length - 1]
    }-${v4()}.json`
  if (fs.existsSync(storageStatePath)) {
    fs.unlinkSync(storageStatePath)
  }
  return storageStatePath
}

const deleteStorageStateFile = (filePath) => {
  if (fs.existsSync(filePath)) {
    fs.unlinkSync(filePath)
  }
}

const storageStatePath = generateStorageStateFile(__filename)

test.beforeAll(async ({ browser }) => {
  const page = await browser.newPage()
  await page.goto('https://demo.playwright.dev/todomvc');
  console.log(`Setting storage state to ${storageStatePath}`)
  await page.context().storageState({ path: storageStatePath })
  await page.close()
})

test.describe('New Todo', () => {
  console.log(`test.use called with storageState ${storageStatePath}`)
  test.use({ storageState: storageStatePath })

  test('should allow me to add todo items', async () => { console.log('In test') })
})

Describe the bug

The above scenario worked for us through Playwright 1.20.2 . When I tried to upgrade to Playwright 1.21 or 1.22, I receive an error about the state file not existing similar to this:

Error: ENOENT: no such file or directory, open 'C:\Users\dwall\repos\playwright-storage-state-use-reproduction\storage-states\state-repro.test.js-755875be-fbda-41d9-a2d9-9ae5edeba758.json'

I’ve waited a bit to file this issue because it’s difficult to say if what we had been doing before should have been valid. Our scenario is challenging because we cannot create a state file in a global fixture. A new entity is created for each test file, which each has its own admin user. This ordering of things works in Playwright 1.20.2, but not in any newer versions. My best guess is that some validation was added when setting the storage state path, but it also seems like the order of beforeAll may have also changed. We’re trying to come up with a workaround, but I was interested to know if this was an expected change in behavior.

[pavelfeldman]

… or if you prefer beforeAll:

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

let storageStatePath: string;

test.beforeAll(async ({ browser }, workerInfo) => {
  const page = await browser.newPage();
  await page.goto('https://playwright.dev');
  storageStatePath = path.join(workerInfo.project.outputDir, 'storage-' + workerInfo.workerIndex);
  await page.context().storageState({ path: storageStatePath });
  await page.close();
})

test.describe('Given an some conditions', () => {
  // Making this lazy is important, that way we retrieve this value after beforeAll ran.
  test.use({ storageState: ({}, use) => use(storageStatePath) });

  test('hello', ({ page }) => {
  });
})

[pavelfeldman]

While we are figuring it out, you could use following patern:

import { test } from '@playwright/test';
import path from 'path';
import fs from 'fs';

test.use({
  storageState: async ({ browser }, use, testInfo) => {
    const fileName = path.join(testInfo.project.outputDir, 'storage-' + testInfo.workerIndex);
    if (!fs.existsSync(fileName)) {
      const page = await browser.newPage()
      await page.goto('https://playwright.dev');
      await page.context().storageState({ path: fileName });
      await page.close();
    }
    await use(fileName);
  }
});

test('hello', ({ page }) => {
});