Playwright中如何与弹出的安全浏览器窗口交互？

针对你遇到的PayPal独立窗口无法捕获的问题，可以尝试以下几种解决方案：

方案1：通过Context页面列表筛选新窗口 #

有时候直接等待page事件可能因窗口加载特性未触发，可通过对比点击前后的页面列表定位新窗口：

// 记录点击前的所有页面
const initialPages = context.pages();

// 触发PayPal按钮点击
await page.locator('.mt-4 > div:nth-child(2) > div:nth-child(2) > div').click();

// 等待新页面创建完成
await context.waitForEvent('page');

// 从所有页面中筛选出新增的窗口
const allPages = context.pages();
const paypalPage = allPages.find(page => !initialPages.includes(page));

// 等待页面完全加载（推荐用networkidle确保资源加载完成）
await paypalPage.waitForLoadState('networkidle');

// 验证并交互目标元素
await paypalPage.getByRole('heading', { name: 'Pay with PayPal' }).waitFor();
// 后续输入凭据等操作示例
await paypalPage.getByLabel('邮箱或手机号码').fill('your-paypal-account');

方案2：通过Browser Target监听新窗口 #

如果PayPal窗口创建了独立的Target（而非同一Context下的Page），可以通过Browser层面监听目标：

// 监听包含PayPal域名的新Target
const newTargetPromise = browser.waitForEvent('target', target => 
  target.url().includes('paypal.com')
);

// 触发PayPal按钮点击
await page.locator('.mt-4 > div:nth-child(2) > div:nth-child(2) > div').click();

// 获取目标Target并转为Page
const paypalTarget = await newTargetPromise;
const paypalPage = await paypalTarget.page();

// 等待页面加载完成
await paypalPage.waitForLoadState();

// 执行交互操作
await paypalPage.getByRole('heading', { name: 'Pay with PayPal' }).waitFor();

排查要点 #

• 你的原有代码中最后一行isEnabled()未添加await，会导致代码不等待验证完成就继续执行，需修正为await newPage.getByRole(...).isEnabled();
• 确保Playwright上下文未启用弹窗拦截，可在创建Context时显式配置：

  const context = await browser.newContext({
    acceptDownloads: true,
    permissions: ['notifications']
  });
  

• 若仍无法捕获，可打印所有页面的URL排查：

  allPages.forEach(page => console.log(page.url()));
  

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