使用Playwright storageState复用Firebase认证失败问题排查

先确认storageState保存的正确性 #

• 检查生成的STORAGE_STATE文件内容，确认是否包含Firebase相关的Cookie和localStorage项：
  Firebase认证通常会在localStorage里存类似firebase:authUser:<API_KEY>:<AUDIENCE>的键值对，同时Cookie里可能有__session或自定义认证Cookie。如果文件里没有这些内容，说明保存时机不对，或是登录流程里的异步操作没等完。
• 调整登录后的等待逻辑：
  你当前的代码用了domcontentloaded，但Firebase的认证令牌写入可能有延迟，建议改成：

  await expect(page).toHaveURL('/home', { timeout: 10000 }); // 延长超时时间，确保页面跳转完成
  await page.waitForLoadState('networkidle'); // 等待所有网络请求结束，保证认证数据写入完成
  await page.context().storageState({ path: STORAGE_STATE });
  

检查storageState的加载配置 #

• 全局配置路径要准确：
  在playwright.config.ts里的配置要使用绝对路径，避免相对路径导致文件找不到：

  import { defineConfig } from '@playwright/test';
  import path from 'path';
  
  export default defineConfig({
    use: {
      storageState: path.resolve(__dirname, './storageState.json'),
      // 其他配置项
    },
  });
  

• 避免配置冲突：
  如果test.use()里也配置了storageState，确保路径和全局配置一致，或者直接依赖全局配置，不要重复定义。

Firebase认证的特殊坑点处理 #

Firebase的认证逻辑有几个容易忽略的点：

• 令牌过期问题：如果生成storageState后间隔太久才测试，令牌可能已过期，需要重新生成认证状态文件。
• 内存令牌的情况：部分应用会用getIdToken()获取内存中的令牌，但Playwright的storageState只会保存localStorage、sessionStorage和Cookie，所以要确保你的应用把令牌存在这三个位置之一。
• 有效性校验：有些Firebase应用会在页面加载时主动校验令牌有效性，若无效直接跳回登录页。可以在保存storageState前，等待令牌完全写入并确认其有效性（比如打印localStorage里的Firebase相关项）。

调试辅助步骤 #

• 在测试用例里打印加载后的状态，确认是否正确读取：

  test('验证首页访问', async ({ page, context }) => {
    const loadedState = await context.storageState();
    console.log('已加载的状态内容:', loadedState); // 检查是否包含Firebase相关的Cookie和localStorage
    await page.goto('/home');
    console.log('当前页面URL:', page.url());
    await expect(page).toHaveURL('/home');
  });
  

• 用Playwright Inspector手动导入storageState文件，模拟测试场景，确认在浏览器里能否正常访问/home，排除代码逻辑外的问题。

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