Playwright中支付网关重定向后如何获取新URL并定位元素

场景说明：在表单页面完成测试并填写数据后，点击支付按钮会重定向到带一次性令牌的PayU支付网关页面（URL每次不同）。执行代码时，Playwright未识别页面跳转，仍在旧页面查找Payment_option_1按钮，导致操作失败。

可行解决方案： #

1. 点击支付按钮时等待页面导航完成

点击Pay按钮后页面会触发重定向，需等待导航完成再执行后续操作。可以用Promise.all同时触发点击和等待导航，确保页面加载完成后再查找元素：

await Promise.all([
  page.getByRole('button', { name: 'Pay', exact: true }).click(),
  page.waitForNavigation({ waitUntil: 'networkidle' }) // 等待网络空闲，保证页面加载完成
]);

// 此时已在新页面，直接操作元素
await page.getByTitle('Payment_option_1').click();

也可直接在click方法中设置waitUntil选项简化代码：

await page.getByRole('button', { name: 'Pay', exact: true }).click({
  waitUntil: 'networkidle'
});
await page.getByTitle('Payment_option_1').click();

2. 直接等待目标元素出现

无需显式等待导航，直接等待目标元素在页面中可见，Playwright会自动监听页面变化，直到元素出现：

await page.getByRole('button', { name: 'Pay', exact: true }).click();
// 等待元素可见后再点击
await page.getByTitle('Payment_option_1').click({ waitFor: 'visible' });

或拆分步骤先等待元素加载：

await page.getByRole('button', { name: 'Pay', exact: true }).click();
await page.getByTitle('Payment_option_1').waitFor({ state: 'visible' });
await page.getByTitle('Payment_option_1').click();

问题原因 #

之前的代码中，点击Pay按钮后立即执行查找元素的操作，此时页面还未完成重定向，Playwright仍处于旧页面的上下文环境中，自然找不到新页面的元素。通过等待导航完成或元素出现，就能让Playwright切换到新页面的上下文进行操作。

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