Playwright global-setup缓存登录 DEBUG=0时选择器等待超时

这个问题是三个典型的配置偏差叠加导致的，全出在globalSetup的浏览器环境配置上，和OAuth跨域场景的环境一致性强相关：

• 你在global-setup.ts中手动启动的Chromium默认使用旧版无头模式，该模式的User-Agent会携带HeadlessChrome标识，浏览器指纹和真实Chrome存在明显差异，会被OAuth站点的WAF安全策略直接拦截，返回空白页面。PWDEBUG=1时Playwright强制启动有头模式，指纹和真实浏览器一致，所以不会被拦截，运行完全正常。
• 手动调用chromium.launch()创建浏览器、newPage()创建上下文时，你没有复用playwright.config.ts中配置的Desktop Chrome设备参数（包括视口大小、User-Agent、默认启动参数等），和测试用例实际运行的浏览器环境不一致，跨域场景下很容易触发加载异常。
• 代码中写的单次page.waitForNavigation()只能捕获一次导航事件，OAuth跨域登录流程通常包含多轮302重定向，单次等待无法覆盖完整跳转链路，会出现页面还没加载完成就开始查找元素的问题，触发超时。
• 补充：把逻辑写到beforeEach里能正常运行，是因为beforeEach运行在Playwright测试框架自动创建的标准浏览器上下文中，环境配置是正确的，不存在上述问题。

按以下步骤调整配置即可，不需要改动核心测试逻辑：

1. 启动浏览器时使用Playwright新版无头模式（配置headless: "new"），该模式指纹和真实Chrome完全一致，不会被OAuth安全策略拦截，性能也比有头模式更好。如果需要调试可以临时把headless设为false启动有头模式。
2. 从globalSetup入参的FullConfig中读取你配置的chromium项目的预设参数，创建浏览器上下文时直接复用这些参数，保证登录流程的浏览器环境和后续测试运行的环境完全一致。
3. 去掉手动绑定的waitForNavigation逻辑，点击邮箱登录按钮后，直接等待目标邮箱输入框出现即可，Playwright的自动等待机制会自动处理中间的多轮重定向、页面资源加载逻辑，比手动监听导航事件稳定性高很多。
4. 创建上下文时开启第三方Cookie支持，避免部分OAuth提供商因跨域Cookie限制无法正常加载表单。

调整后的 global-setup.ts #

import { chromium, FullConfig } from '@playwright/test';

async function globalSetup(config: FullConfig) {
  // 读取配置中chromium项目的预设参数
  const { use: projectUse } = config.projects.find(p => p.name === 'chromium')!;
  
  const browser = await chromium.launch({
    // 使用新版无头模式，避免被OAuth的WAF识别拦截
    headless: 'new',
  });

  // 复用项目配置的设备参数，保证环境一致
  const context = await browser.newContext({
    ...projectUse,
    // 开启第三方Cookie支持，适配跨域OAuth场景
    ignoreHTTPSErrors: true,
  });
  const page = await context.newPage();
  
  await page.goto('https://website.myapp.fi/app/');

  // 点击邮箱登录按钮，不需要手动绑定等待导航
  await page.locator('div[role="button"]:has-text("email")').click();

  // 直接等待目标元素出现，自动覆盖多轮重定向的等待逻辑
  const emailInput = page.locator('[placeholder="Email Address"]');
  await emailInput.waitFor();
  await emailInput.fill('your-test-email@example.com');

  const passwordInput = page.locator('[placeholder="Password"]');
  await passwordInput.fill('your-test-password');

  await page.click('button:has-text("Sign in")');

  // 选择企业
  await page.locator('.b-number-cell').click();
  await page.waitForLoadState('networkidle');
  
  // 保存登录态
  await context.storageState({ path: 'storageState.json' });
  await browser.close();
}

export default globalSetup;

调整后你可以分别在调试模式、非调试模式下运行测试：

• 非调试模式下新版无头模式不会被OAuth站点拦截，页面可以正常加载
• 登录流程的浏览器环境和测试用例运行环境完全一致，不会出现环境差异导致的偶发失败
• 自动等待逻辑可以适配OAuth的多轮重定向，不会出现提前查找元素的超时问题
• 最终存储的storageState.json可以被所有测试用例正常复用，符合官方推荐的认证缓存最佳实践

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