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

Question

我正在尝试自动化支付系统，其中 "Pay with 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 来说还是比较新的，并且无法正常工作。

Answer 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();

Answer 2

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

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

TestCafe .click doesn't trigger onClick event within an iFrame

iframe

automated-tests

clicking

e2e-testing

testcafe