Playwright全局设置中LocalStorage无法设置值的问题求助

我尝试在Playwright Test的global.setup.js中加载LocalStorage，代码运行无异常，但LocalStorage始终为空。如果把相同逻辑放到beforeEach块里就能正常工作，我希望保留在全局设置中实现，请问原因是什么？

相关代码 #

global.setup.js #

const { chromium } = require('@playwright/test');
  
const createOktaInjection = async(page) => {
  const idToken = 'foobar';
  const accessToken = 'foobar';

  const mockToken = {
    idToken: {
      idToken,
    },
    accessToken: {
      accessToken,
    },
  }

  const pagePromise = page.addInitScript(params => {
    window.localStorage.setItem(params.name, params.value);
  },
  {
    name: 'okta-token-storage',
    value: JSON.stringify(mockToken),
  });

  return pagePromise;
};

module.exports = async() => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  return createOktaInjection(page);
};

playwright.config.js #

export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  /* Fail the build on CI if you accidentally left test.only in the source code. */
  forbidOnly: !!process.env.CI,
  /* Opt out of parallel tests on CI. */
  workers: process.env.CI ? 1 : undefined,
  reporter: 'html',
  use: {
    baseURL: 'http://127.0.0.1:8080',
    //trace: 'retain-on-failure',
    launchOptions: {
      slowMo: slowMoTime || 900,
      devtools: true,
    },
  },

  projects: [
    {
      name: 'setup',
      testMatch: /global\.setup\.js/,
    },
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
      dependencies: ['setup'],
    },
  ],
});

原因分析 #

核心问题是全局setup里创建的浏览器实例、页面，和测试用例实际使用的浏览器实例完全独立。你在global.setup中启动了一个单独的chromium进程，创建页面并添加初始化脚本，但这个页面的LocalStorage只属于这个临时的浏览器上下文，后续测试用例中Playwright会重新启动浏览器/创建新上下文，自然无法继承之前设置的内容。

解决方案 #

要让全局设置的LocalStorage被所有测试页面继承，需要利用Playwright的**上下文存储状态（storageState）**机制，步骤如下：

1. 修改global.setup.js，导出上下文存储状态 #

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

module.exports = async() => {
  const browser = await chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();

  // 设置LocalStorage
  const idToken = 'foobar';
  const accessToken = 'foobar';
  const mockToken = {
    idToken: { idToken },
    accessToken: { accessToken },
  };

  await page.addInitScript(params => {
    window.localStorage.setItem(params.name, params.value);
  }, {
    name: 'okta-token-storage',
    value: JSON.stringify(mockToken),
  });

  // 确保LocalStorage设置完成后，保存上下文的存储状态
  await page.waitForTimeout(100);
  const storageState = await context.storageState();
  await browser.close();

  // 将存储状态传递给测试项目
  return { storageState };
};

2. 在playwright.config.js中让测试项目继承存储状态 #

export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  workers: process.env.CI ? 1 : undefined,
  reporter: 'html',
  use: {
    baseURL: 'http://127.0.0.1:8080',
    launchOptions: {
      slowMo: slowMoTime || 900,
      devtools: true,
    },
  },

  projects: [
    {
      name: 'setup',
      testMatch: /global\.setup\.js/,
    },
    {
      name: 'chromium',
      use: { 
        ...devices['Desktop Chrome'],
        // 从setup项目中获取存储状态，自动应用到测试上下文
        storageState: ({ storageState }) => storageState,
      },
      dependencies: ['setup'],
    },
  ],
});

原理说明 #

• 全局setup中创建的浏览器上下文会保存包含LocalStorage的完整存储状态，测试项目通过dependencies依赖setup后，可以获取到这个状态。
• Playwright在启动测试用例的浏览器上下文时，会自动加载该存储状态，所有测试页面都会继承预先设置的LocalStorage。

内容的提问来源于stack exchange，提问作者dman