Playwright执行测试时Azure AD OAuth2.0认证问题求助

你的Playwright脚本在本地运行正常，但在Azure DevOps流水线执行时，访问目标站点后未自动跳转到Azure AD登录页，导致找不到邮箱输入框，报错locator.fill: Target closed: waiting for getByPlaceholder('Email, phone, or Skype')。以下是针对性的排查方向和解决方法：

可能的原因及解决方案 #

1. 流水线环境的浏览器上下文/缓存残留 #

本地测试时浏览器可能保留会话状态，但流水线中是全新的无头浏览器实例，缺少触发重定向的必要条件。

• 解决：强制清理上下文，并等待重定向完成

  // 测试开始前清理缓存和权限
  await page.context().clearCookies();
  await page.context().clearPermissions();
  
  // 访问站点时等待网络空闲，并显式等待登录页URL
  await page.goto('https://prod-site.com/', { waitUntil: 'networkidle' });
  await page.waitForURL(/login.microsoftonline.com/, { timeout: 15000 });
  

2. 流水线代理/网络限制 #

流水线运行的代理环境可能无法正常访问Azure AD登录端点，或存在防火墙规则阻止重定向请求。

• 解决：
  • 在流水线前置步骤添加连通性测试，确认域名可访问：

    curl -I https://prod-site.com/
    curl -I https://login.microsoftonline.com/
    

  • 如果使用代理，在Playwright中配置代理参数：

    const context = await browser.newContext({
      proxy: {
        server: 'http://your-proxy-server:port',
        username: 'proxy-user', // 如有需要
        password: 'proxy-pass' // 如有需要
      }
    });
    const page = await context.newPage();
    

3. 无头浏览器行为差异 #

流水线默认使用无头浏览器，部分站点会对无头模式做检测，导致重定向逻辑不触发。

• 解决：模拟真实浏览器环境，或临时切换为有头模式测试

  // 在playwright.config.js中修改配置
  use: {
    headless: true, // 可临时改为false验证问题
    userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36',
    viewport: { width: 1920, height: 1080 }
  }
  

4. 页面重定向的异步处理不充分 #

流水线网络较慢时，脚本执行过快，未等重定向完成就开始查找元素。

• 解决：对每个关键元素添加显式等待

  // 等待邮箱输入框加载完成后再操作
  await page.waitForSelector('[placeholder="Email, phone, or Skype"]', { timeout: 10000 });
  await page.getByPlaceholder('Email, phone, or Skype').fill('user@prod-site.com');
  

5. Azure AD登录策略限制 #

目标站点的Azure AD可能配置了IP范围限制，流水线IP不在允许列表中，导致重定向被拦截。

• 解决：检查Azure AD的条件访问策略，确认流水线运行的IP范围是否被允许访问，或是否有安全策略阻止了流水线环境的登录请求。

修改后的示例脚本 #

整合上述处理逻辑，优化后的脚本如下：

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

test('Azure AD MFA Login Test', async ({ page }) => {
  test.setTimeout(60000);
  
  // 清理上下文，确保全新会话
  await page.context().clearCookies();
  await page.context().clearPermissions();

  // 访问站点并等待重定向到登录页
  await page.goto('https://prod-site.com/', { waitUntil: 'networkidle' });
  await page.waitForURL(/login.microsoftonline.com/, { timeout: 15000 });

  // 等待登录元素加载完成后再操作
  await page.waitForSelector('[placeholder="Email, phone, or Skype"]', { timeout: 10000 });
  await page.getByPlaceholder('Email, phone, or Skype').fill('user@prod-site.com');
  
  await page.getByRole('button', { name: 'Next' }).click();
  
  await page.waitForSelector('#i0118', { timeout: 10000 });
  await page.locator('#i0118').fill('password');
  
  await page.getByRole('button', { name: 'Sign in' }).click();
  
  await page.waitForSelector('[placeholder="Code"]', { timeout: 10000 });
  await page.getByPlaceholder('Code').fill(generateToken('code'));
  
  await page.getByRole('button', { name: 'Verify' }).click();
  
  await page.getByRole('button', { name: 'Yes' }).click();
  
  await page.waitForRole('heading', { name: 'Welcome to prod-site' }, { timeout: 15000 });
});

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