TestCafe .click 不会触发 iFrame 中的 onClick 事件

Posted 2023-02-25

【中文标题】TestCafe .click 不会触发 iFrame 中的 onClick 事件

【英文标题】：TestCafe .click doesn't trigger onClick event within an iFrame

【发布时间】：2019-03-22 17:14:06

【问题描述】：

我正在尝试自动化支付系统，其中“使用 PayPal 支付”按钮位于 iFrame 中。我搜索了 TestCafe 的支持页面，但似乎无法解决问题。

TestCafe 认为它已单击按钮，因此在下一步失败（输入电子邮件地址）。

我正在使用什么：

const payPalFrame = Selector('#paypal-button iframe');
const payPalButton = Selector('[name="paypal"]')

async payWithPaypal () 
    await t
        .switchToIframe(payPalFrame)
        .click(payPalButton)
        .switchToMainWindow();

我尝试编写一个 ClientFunction，但对于 JS/Node 来说还是比较新的，并且什么都不能工作。

【问题讨论】：

这是我的第一个问题，所以我很高兴收到有关如何改进它的反馈

【参考方案1】：

也许您可以通过这种方式确保按钮可用：

await t
  .switchToIframe(payPalFrame)
  .expect(payPalButton.with(visibilityCheck: true).exists)
  .ok(timeout: 30000)
  .hover(payPalButton)
  .click(payPalButton)
  .switchToMainWindow();

如果这不起作用，你应该尝试点击按钮父容器：

const payPalButton = Selector('[name="paypal"]').parent();
await t
  .switchToIframe(payPalFrame)
  .expect(payPalButton.with(visibilityCheck: true).exists)
  .ok(timeout: 30000)
  .hover(payPalButton)
  .click(payPalButton)
  .switchToMainWindow();

【讨论】：

可悲的是，这些都没有帮助......在调试模式下我也无法手动单击按钮......所以我不确定这是否真的是一个“错误”。 ..

@RobC，在这种情况下，我建议你设置一个公共 repo 来展示这个问题，然后在 TestCafe 上打开一个问题

经过进一步调查，看起来页面在尝试单击按钮之前没有正确完成渲染。因此，尽管您的解决方案没有解决我的问题，但它确实引导我找到了原因所在。我会接受你的回答。

【参考方案2】：

testcafe 中存在一个错误，即 iframe 有时无法加载其样式表，因此您可能需要检查 iframe 中需要单击的标签是否具有正确的宽度、高度和位置。