使用POM模式时Playwright无法复用认证状态求助

核心问题分析 #

你的代码存在几个关键问题，导致认证状态复用失败：

1. 登录未完成就保存storageState #

logInPageAction.ts的validLogin方法中，你注释了登录成功的URL断言，代码在登录流程未完全结束（页面未跳转、认证Cookie未生成）时就保存了状态文件，导致文件中没有有效认证信息。

2. 全局保留浏览器实例引发资源泄漏 #

global-setup.ts将browser、context、page挂载到global对象上，这会阻止Playwright正常销毁实例，且测试用例会创建新上下文，这些全局实例完全无用，反而可能干扰状态复用逻辑。

3. 相对路径潜在解析问题 #

storageState.json的生成路径与配置中读取路径可能因执行环境差异出现解析不一致，导致测试无法读取到有效状态。

具体修复步骤 #

修复1：确保登录完成后再保存状态 #

修改logInPageAction.ts的validLogin方法，恢复登录成功的断言，等待页面跳转完成后再结束登录流程：

async validLogin(username:string , password:string){
    await this.page.click(LoginPageLocator.aggreeToAllBnt);
    await this.page.click(LoginPageLocator.logInNowBnt);
    await this.page.fill(LoginPageLocator.idpUsernameInput,username);
    await this.page.click(LoginPageLocator.idpNextBnt);
    await this.page.fill(LoginPageLocator.passwordInput,password);
    await this.page.click(LoginPageLocator.signInBnt);

    // 等待登录成功跳转，确保认证Cookie已生成
    await expect(this.page).toHaveURL('/myproducts/');
}

修复2：移除全局实例挂载并关闭浏览器 #

修改global-setup.ts，删除全局挂载代码，保存状态后直接关闭浏览器：

import { chromium, FullConfig } from '@playwright/test';
import { logInPageAction } from '../PageAction/logInPageAction';
import { creatdential } from '../config/config';

async function globalSetup(config: FullConfig) { 
  const browser = await chromium.launch();
  const context = await browser.newContext()
  const page = await context.newPage()

  const newLoginPage = new logInPageAction(page)
  const creaden = new creatdential()
  const baseURL =  await creaden.getBaseUrl()
  await newLoginPage.goToPage(`${baseURL}/app`)
  await newLoginPage.validLogin(await creaden.getUserName(),await creaden.getPassword())

  // 登录完成后保存状态
  await page.context().storageState({ path: './storageState.json' });

  // 关闭浏览器，释放资源
  await browser.close();
}
export default globalSetup; 

修复3：使用绝对路径确保状态文件读取一致 #

修改playwright.config.ts，用绝对路径指定storageState，避免相对路径解析歧义：

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

const config: PlaywrightTestConfig = {
  testDir: './tests',
  timeout: 240 * 1000,
  expect: {
    timeout: 45000
  },
  reporter: 'html',
  globalSetup: require.resolve('./support/global-setup'),

  use: {
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
    trace: 'on-first-retry',
    // 使用绝对路径指向状态文件
    storageState: path.resolve(__dirname, './storageState.json'),
  },
  projects: [
    {
      name: 'chromium',
      use: {
        ...devices['Desktop Chrome'],
        viewport: { width: 1920, height: 1080 },
        headless: false
      },
    },
  ],
};
export default config;

修复4：检查测试用例跳转逻辑 #

确保BasePageAction.gotoMainPage方法仅负责页面跳转，没有自动触发登录的逻辑，避免覆盖已复用的认证状态。

验证方法 #

1. 删除旧的storageState.json文件
2. 运行测试，确认生成的新状态文件包含cookies和origins字段
3. 执行测试用例，观察页面是否直接进入已登录状态，无需重复登录

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