Playwright监听popup弹出窗时如何获取其加载完成后的最终URL

• 方案1：等待popup完成非空白页导航
  不要硬编码等待时间，直接通过API等待popup跳转到非about:blank的有效地址即可，示例代码：

page.on('popup', async popup => {
  // 等待popup完成除了about:blank之外的导航，默认超时30秒可自定义timeout参数
  await popup.waitForNavigation({ 
    url: url => url !== 'about:blank' && url !== ''
  });
  // 客户端路由跳转场景可替换为下面的写法
  // await popup.waitForFunction(() => window.location.href !== 'about:blank');
  console.log('popup => ' + popup.url());
})

如果还是返回空，可补充等待DOM加载逻辑：await popup.waitForLoadState('domcontentloaded')后再读取URL。

• 方案2：绑定windowopen事件直接获取目标URL
  popup触发前会先触发页面的windowopen事件，该事件会直接返回即将打开的目标地址，不受后续主页面URL变更、popup延迟加载影响，可靠性更高，示例代码：

page.on('windowopen', (popup) => {
  // 事件触发时即可直接拿到要打开的原始URL
  console.log('popup target url =>', popup.url());
});

如果需要后续操作popup页面，依然可以搭配原来的popup监听器做后续交互。

• 方案3：点击动作和popup等待同步执行
  如果是点击固定按钮触发popup，推荐用waitForEvent和点击动作同步执行，避免监听器漏触发：

// 同时触发点击和等待popup事件
const [popup] = await Promise.all([
  page.waitForEvent('popup'),
  page.getByRole('button', { name: '打开弹窗的按钮' }).click()
]);
// 等待非空白导航
await popup.waitForNavigation({ url: url => url !== 'about:blank' });
console.log('popup url =>', popup.url());

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