Playwright中serial mode的替代方案：关联端到端测试如何处理？

Playwright 不推荐用 serial mode，核心是怕测试耦合带来的不稳定——一个测试崩了，后面所有测试都跟着遭殃，而且串行跑会拖慢整体测试速度。所以替代方案的核心思路都是：既保持每个测试独立可运行，又能复用前置操作的结果。

具体替代方案 #

1. 把公共前置逻辑抽成钩子函数 #

把多个测试都需要的操作（比如登录、访问初始URL、创建基础测试数据），放到 test.beforeEach 或 test.beforeAll 钩子中，让每个测试自动执行这些前置步骤：

// 测试文件内的全局钩子
test.beforeEach(async ({ page }) => {
  // 公共前置：完成登录流程
  await page.goto('https://your-app.com/login');
  await page.locator('#username').fill('test-user');
  await page.locator('#password').fill('test-pass');
  await page.locator('#login-btn').click();
  // 确保跳转到目标页面
  await page.waitForURL('https://your-app.com/dashboard');
});

// 独立测试：完全不依赖其他测试
test('验证仪表盘数据展示', async ({ page }) => {
  await expect(page.locator('#dashboard-stats')).toBeVisible();
});

test('测试创建新任务', async ({ page }) => {
  await page.locator('#create-task-btn').click();
  await page.locator('#task-name').fill('新测试任务');
  await page.locator('#submit').click();
  await expect(page.locator('#task-list')).toContainText('新测试任务');
});

这样每个测试都是独立的，还能并行运行，速度快很多。

2. 用API预生成测试数据 #

如果后续测试依赖前一个测试生成的数据结果（比如任务ID、订单号），别用UI操作生成，直接通过API提前造好数据，然后存下来供所有测试使用：

let testTaskId: string;

test.beforeAll(async ({ request }) => {
  // 调用API直接创建测试任务，比UI操作快且可靠
  const res = await request.post('https://your-app.com/api/tasks', {
    data: { name: '预生成测试任务' }
  });
  const taskData = await res.json();
  testTaskId = taskData.id;
});

test('查看预生成任务详情', async ({ page }) => {
  await page.goto(`https://your-app.com/tasks/${testTaskId}`);
  await expect(page.locator('#task-name')).toHaveText('预生成测试任务');
});

test('编辑预生成任务', async ({ page }) => {
  await page.goto(`https://your-app.com/tasks/${testTaskId}/edit`);
  await page.locator('#task-name').fill('修改后的任务名');
  await page.locator('#save').click();
  await expect(page.locator('#task-name')).toHaveText('修改后的任务名');
});

这种方式完全避免了UI操作的耦合，测试之间只共享预生成的数据，依然保持独立。

3. 把依赖流程合并成单个测试 #

如果某些操作逻辑上就是一个完整的业务流程（比如“登录→创建订单→支付订单”），没必要硬拆成多个测试，直接写成一个独立的测试用例更合理：

test('完整订单流程验证', async ({ page }) => {
  // 步骤1：登录
  await page.goto('https://your-app.com/login');
  await page.locator('#username').fill('test-user');
  await page.locator('#password').fill('test-pass');
  await page.locator('#login-btn').click();
  await page.waitForURL('https://your-app.com/dashboard');

  // 步骤2：创建订单
  await page.locator('#create-order-btn').click();
  await page.locator('#product').selectOption('product-001');
  await page.locator('#confirm-order').click();
  const orderNum = await page.locator('#order-number').textContent();

  // 步骤3：支付订单
  await page.locator('#pay-btn').click();
  await page.locator('#payment-method').selectOption('credit-card');
  await page.locator('#submit-payment').click();
  await expect(page.locator('#payment-status')).toHaveText('支付成功');
  await expect(page.locator('#order-list')).toContainText(orderNum);
});

单个测试覆盖完整流程，既保证了逻辑连贯性，又不会和其他测试耦合。

4. 复用已登录的上下文状态 #

如果需要共享浏览器的登录状态（比如Cookie、localStorage），可以提前生成一个已登录的上下文状态文件，然后在测试中复用：

// 提前生成已登录的状态文件（可以单独写个脚本，或者在测试前执行）
const browser = await chromium.launch();
const context = await browser.newContext();
const page = await context.newPage();
await page.goto('https://your-app.com/login');
// 执行登录操作...
await context.storageState({ path: 'logged-in-state.json' });
await browser.close();

// 在测试中复用这个状态
test.use({ storageState: 'logged-in-state.json' });

test('测试已登录状态下的个人中心', async ({ page }) => {
  await page.goto('https://your-app.com/profile');
  // 直接操作已登录后的页面，无需重复登录
  await expect(page.locator('#user-name')).toHaveText('test-user');
});

这样每个测试都会使用已登录的上下文，既保持独立，又省去了重复登录的时间。

为什么不建议用 serial mode？ #

• 稳定性差：只要有一个测试失败，后续所有测试都会被中断，排查问题更麻烦
• 速度慢：串行运行无法利用Playwright的并行能力，测试套件越大，耗时越长
• 维护难：测试之间的耦合会导致修改一个测试可能影响其他测试，增加维护成本

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