Playwright测试超时：卡号输入框无法检测可见性，前置元素正常

问题描述 #

访问https://app.pws.int.cruk.org/support-us/payment页面后，可正常定位并操作卡号输入框之前的元素，但通过getByRole('textbox', { name: 'credit-card-number' })定位卡号输入框并等待其可见时，触发超时错误，提示测试超时30000ms且页面已关闭。

测试代码 #

await expect(page).toHaveURL("https://app.pws.int.cruk.org/support-us/payment");
await page.waitForLoadState("domcontentloaded");
page.waitForTimeout(10000)

const card = page.getByText("Credit / Debit");
const cardholder = page.locator("#cardholderName");
const cardnumber = page.getByRole('textbox', { name: 'credit-card-number' });

const giftaid = page.getByText("Yes I would like Cancer Research UK to claim Gift Aid on my donation")

await card.waitFor({state: "visible"});
await card.click({force: true});
await cardholder.fill("Tester O'Doh-erty");
await cardnumber.waitFor({state: "visible"});

await giftaid.check();

错误日志 #

Test timeout of 30000ms exceeded.
Error: locator.waitFor: Page closed
=========================== logs ===========================
waiting for getByRole('textbox', { name: 'credit-card-number' }) to be visible
============================================================

  70 |   await cardholder.fill("Tester O'Doh-erty");
  71 |
> 72 |   await cardnumber.waitFor({state: "visible"});
     |                    ^
  73 |   
  74 |   await giftaid.check();
  75 |

解决思路与方案 #

1. 修复未等待的异步操作 #

代码中page.waitForTimeout(10000)未添加await，会导致后续逻辑提前执行，页面可能未完全就绪就开始操作元素。修改为：

await page.waitForTimeout(10000);

更推荐使用网络空闲状态替代固定超时，确保页面资源加载完成：

await page.waitForLoadState("networkidle");

2. 处理第三方支付iframe #

多数支付页面的卡号输入框会嵌套在第三方iframe（如Stripe、Adyen组件）中，Playwright默认无法直接定位iframe内元素。需要先定位iframe，再在iframe上下文内查找元素：

// 根据实际页面的iframe属性调整选择器，比如src特征、name或id
const paymentIframe = page.frameLocator('iframe[src*="payment"]');
// 在iframe内定位卡号输入框
const cardnumber = paymentIframe.getByRole('textbox', { name: 'credit-card-number' });

可通过浏览器开发者工具查看iframe的具体属性，确认选择器准确性。

3. 排查页面关闭原因 #

错误提示“Page closed”，需排查操作过程中是否存在页面跳转或意外关闭：

• 点击Credit / Debit后添加URL断言，确认是否发生跳转：

  await card.click({force: true});
  await expect(page).toHaveURL(/payment/); // 若URL变化需调整后续逻辑
  

• 添加页面关闭监听，定位触发关闭的场景：

  page.on('close', () => console.log('页面意外关闭'));
  

4. 优化等待策略 #

减少不必要的手动等待，利用Playwright自动等待机制：

• 移除card.waitFor({state: "visible"})，直接调用await card.click({force: true})，Playwright会自动等待元素可见。
• 针对动态加载元素，结合iframe使用waitFor：

  await paymentIframe.getByRole('textbox', { name: 'credit-card-number' }).waitFor({state: "visible"});
  

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