如何编写可靠的Playwright多重定向登录流程测试？

针对多节点跳转导致的导航不稳定问题，核心解决思路是结合网络请求监听与页面加载状态等待，替代串行URL等待或硬超时，以下是具体实现方案：

核心实现步骤 #

• 提前配置网络请求拦截，捕获流程中核心请求的状态，避免依赖页面URL变化的时序
• 表单提交后，并行等待多个关键事件（请求完成、页面加载完成），确保所有跳转节点处理完成
• 最后验证目标页面的指定字段

代码示例（TypeScript） #

import { test, expect } from '@playwright/test';

test('验证多跳转登录流程', async ({ page }) => {
  // 导航到Server2的登录页面
  await page.goto('https://server2-login-domain.com');

  // 预监听所有关键请求，提前设置断言条件
  const loginPostReq = page.waitForRequest('https://server2-domain.com/login', req => req.method() === 'POST');
  const samlRedirectRes = page.waitForResponse('https://server1-domain.com/signin-saml', res => res.status() === 302);
  const callbackPageReady = page.waitForLoadState('networkidle'); // 等待页面资源加载完成

  // 填写表单并提交
  await page.fill('#username', 'test-account');
  await page.fill('#password', 'test-password');
  await page.click('text=Sign In');

  // 并行等待所有关键事件完成，避免时序问题导致的超时
  await Promise.all([
    loginPostReq,
    samlRedirectRes,
    callbackPageReady
  ]);

  // 验证最终回调页面的状态和内容
  await expect(page).toHaveURL(/\/Account\/ExternalLoginCallback$/);
  await expect(page.locator('text=目标指定字段')).toBeVisible();
  await expect(page.locator('#target-element-id')).toBeEnabled();
});

方案优势说明 #

• 并行等待关键事件：避免串行waitForUrl因跳转速度快导致的超时，确保所有节点完成后再执行断言
• 网络请求直接验证：直接捕获/login的POST请求和/signin-saml的302响应，跳过页面URL变化的中间状态依赖
• 页面加载状态确认：用networkidle确保页面所有资源加载完成，避免JavaScript自动跳转未触发的问题

若个别场景仍不稳定，可额外添加对最终回调页面请求的响应监听：

const callbackRes = page.waitForResponse('https://server1-domain.com/Account/ExternalLoginCallback', res => res.status() === 200);
// 将callbackRes加入Promise.all的等待数组即可

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