Playwright+TypeScript框架：串行测试如何复用已登录页面

问题根源 #

Playwright默认会为每个test单独创建全新的浏览器上下文（Context）和页面（Page），哪怕用test.describe.serial，也只是保证测试执行顺序，不会自动共享上下文/页面。要实现复用，得通过自定义fixture并指定作用域来实现。

解决方案步骤 #

1. 修改Fixture，创建共享的上下文与页面 #

在fixture.ts中，扩展出作用域为test.describe的context和page，让整个串行测试套件复用同一组上下文和页面：

import { test as baseTest } from '@playwright/test';
import { LoginPage } from './loginPage';

type pages = {
  loginPage: LoginPage;
};

// 定义共享的context和page，作用域覆盖整个describe套件
const mainPages = baseTest.extend<pages>({
  context: async ({ browser }, use) => {
    // 创建上下文，可按需配置（如保留登录状态）
    const context = await browser.newContext();
    await use(context);
    // 整个测试套件结束后再关闭上下文
    await context.close();
  },
  page: async ({ context }, use) => {
    const page = await context.newPage();
    await use(page);
    // 测试套件结束后关闭页面
    await page.close();
  },
  loginPage: async ({ page }, use) => {
    await use(new LoginPage(page));
  }
});

export const test = mainPages;
export { expect } from '@playwright/test';

2. 修正测试用例代码 #

你的login.test.ts存在语法错误（如{loginPage缺少闭合}），且login2为未定义变量，统一改为复用同一个loginPage：

import { test } from './fixture';
import userCredentials from './path-to-your-credentials';
import data from './path-to-your-data';

test.describe.serial('General test', () => {
  test('login', async ({ loginPage }) => {
    await loginPage.userLogin(userCredentials.url, userCredentials.mail, userCredentials.password);
  });

  test('do anything else', async ({ loginPage }) => {
    await loginPage.clickHere(data.Btn1);
  });
});

3. 关键说明 #

• 作用域控制：通过将context和page的fixture作用域设为test.describe，让它们在整个串行测试套件内复用，而非每个test重建。
• 资源时机：上下文和页面会在整个测试套件执行完毕后才关闭，确保所有测试共用同一页面环境。
• 状态保留：复用同一上下文时，登录后的Cookie、LocalStorage等状态会自动保留，无需重复登录。

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