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

Maybe you could ensure that the button is available this way:

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

If this does not work, you should try to click on the button parent container:

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

There is a bug in testcafe that the iframes sometimes doesn't load their stylesheets therefore you may want to check if the tag which needs to be clicked in the iframe has the proper width, height and position.