Playwright(TS)中POM实例无法复用全局配置的会话存储

我正在为一个全站需登录的网站开发测试，该网站采用Google Sign-In认证，且所有用于认证的Google账号均需双因素认证。这导致测试套件每次测试需重复登录，最终引发需人工介入的认证问题，甚至触发额外的安全验证步骤。

为解决此问题，我按照Playwright文档中「Reuse Signed-In State」的指引，实现了一次登录后保存状态并在测试间共享的逻辑，普通测试可以正常复用登录状态。但改用Page Object Model（POM）来管理页面元素以提升可维护性时，创建POM类实例的测试无法复用已保存状态，始终卡在登录页。

我已经通过global-setup.ts完成登录并生成storageState.json，也在playwright.config.ts中配置了storageState参数，但POM测试仍无法正确复用登录状态。请问如何让Playwright的POM实例正确读取并复用已保存的登录状态？

global-setup.ts #

async function globalSetup(config: FullConfig) {
  const browser = await chromium.launch({ headless: false });
  const page = await browser.newPage();
  await page.goto("http://localhost:8000/login");
  await page.getByRole("button", { name: "Connexion" }).click();
  await page.getByRole("button", { name: "Continue with Google" }).click();
  await page.getByRole("textbox", { name: "Adresse e-mail ou numéro de téléphone" }).fill(process.env.USERNAME);
  await page.getByRole("textbox", { name: "Adresse e-mail ou numéro de téléphone" }).press("Enter");
  await page.getByRole("textbox", { name: "Saisissez votre mot de passe" }).fill(process.env.PASSWORD);
  await page.locator("#passwordNext").click();
  await page.goto("http://localhost:8000");
  // Save signed-in state to 'storageState.json'.
  await page.context().storageState({ path: "storageState.json" });
  await browser.close();
}

playwright.config.ts #

const config: PlaywrightTestConfig = {
  globalSetup: require.resolve('./global-setup'),
  use: {
    storageState: 'storageState.json'
  }
};

POM测试示例 #

test("apply a filter", async ({ page }) => {
  const dashboardHome = new DashboardHome(page);
  await new LoginPage(page).login();
  await dashboardHome.bookingLink.waitFor();
  await dashboardHome.bookingLink.click();
  const reservationsPage = new ReservationsPage(page);
  await reservationsPage.orderNumberFilter.waitFor();
  reservationsPage.filter({ orderID: "22222" });
  await expect(page).toHaveURL("http://localhost:8000/booking/22222");
});

你的核心问题是测试代码中手动调用了LoginPage.login()，这会覆盖全局配置自动加载的登录状态。Playwright的storageState配置会在测试启动时自动为页面注入已保存的登录凭证，此时页面应该处于已登录状态，不需要再执行登录流程。

具体修复步骤：

1. 移除测试中手动调用的await new LoginPage(page).login();代码
2. 调整POM类的初始化逻辑，默认依赖已登录状态，无需重复触发登录流程
3. 直接等待目标页面（如仪表盘）的元素，验证登录状态是否生效

修改后的测试代码：

test("apply a filter", async ({ page }) => {
  const dashboardHome = new DashboardHome(page);
  // 直接等待仪表盘元素，确认全局登录状态已生效
  await dashboardHome.bookingLink.waitFor();
  await dashboardHome.bookingLink.click();
  const reservationsPage = new ReservationsPage(page);
  await reservationsPage.orderNumberFilter.waitFor();
  reservationsPage.filter({ orderID: "22222" });
  await expect(page).toHaveURL("http://localhost:8000/booking/22222");
});

额外验证点：

• 确认storageState.json在全局setup执行后正确生成，包含有效的cookies和localStorage数据
• 如果网站有路由守卫或登录状态校验逻辑，检查全局加载的状态是否能通过校验
• 若问题仍存在，可以在测试开头打印页面URL和cookies，确认状态是否正确加载：

  test("apply a filter", async ({ page }) => {
    console.log("当前页面URL:", await page.url());
    console.log("当前页面Cookies:", await page.context().cookies());
    // ... 后续测试代码
  });
  

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