Playwright测试中Local Storage未找到问题求助

你的Playwright测试无法读取LocalStorage中的JWT，核心问题集中在路径匹配、域名隔离和配置启用三个方面，逐一修复即可解决：

1. StorageState 文件路径不匹配 #

• playwright.config.ts中配置的storageState路径是.auth/token.json，但实际目录结构为auth/token.json（多了前置点），导致Playwright定位不到存储文件。
• global-setup.ts生成的存储文件是auth/storageState.json，和配置里的token.json文件名不一致，也会造成加载失败。

修复代码：
修改playwright.config.ts中的路径：

projects: [
  {
    name: 'chromium',
    use: {
      ...devices['Desktop Chrome'],
      storageState: "auth/token.json" // 移除前置点，与目录结构对齐
    },
  },

同时调整global-setup.ts的输出文件名：

await context.storageState({ path: "auth/token.json" }); // 改为token.json与配置匹配

2. Global Setup 中的域名不匹配 #

LocalStorage是域名隔离的，你的global-setup.ts在https://www.example.org域名下设置存储，但测试目标是http://localhost:4300，跨域名的存储无法被测试页面读取。

修复代码：
将global-setup.ts中的跳转地址改为测试服务域名：

await page.goto("http://localhost:4300"); // 替换example.org为本地服务地址
await page.waitForLoadState("domcontentloaded");

await page.evaluate((token) => {
  localStorage.setItem("auth_token", token);
}, jwt);

3. Playwright配置未启用Global Setup #

playwright.config.ts缺少globalSetup字段，导致global-setup.ts没有执行，无法自动生成正确的storageState文件。

修复代码：
在配置文件中添加globalSetup启用项：

export default defineConfig({
  ...nxE2EPreset(__filename, { testDir: './src' }),
  globalSetup: './global-setup.ts', // 新增该行启用全局前置脚本
  // 其他原有配置...
});

额外验证点 #

如果手动维护token.json，需确保origin字段与测试页面的域名完全一致（包含协议、主机、端口）：

{
    "cookies": [],
    "origins": [
      {
        "origin": "http://localhost:4300", // 必须与baseURL完全匹配
        "localStorage": [
          {
            "name": "auth_token",
            "value": "你的实际JWT内容"
          }
        ]
      }
    ]
}

完成以上修改后重新运行测试，即可正常读取LocalStorage中的JWT。

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