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

Question

I'm attempting to automate a payment system, where the "Pay with PayPal" button is within an iFrame. I've searched through TestCafe's support pages, and can't seem to resolve the issue.

TestCafe believes it has clicked on the button, and so fails at the next step (enter email address).

What I'm using:

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

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

I tried to write a ClientFunction, but still relatively new to JS/Node and couldn't get anything to work.

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 中单击的标签是否具有正确的宽度、高度和位置。