0

We've recently implemented Stripe for customers to checkout. However, using Cypress to automate our regression tests was incredibly painful as the fields are inside an iframe (and, for some reason, automation tools seem to struggle with iframes).

This Medium article by Bartek Golota put us on the right path but wasn't the entire solution, as it could only ever find the first field and then would just error out.

So, whilst this may not be the most streamlined solution (below), it worked for us... and it might help others in future.

0

1 Answer 1

1
// Enter card details in to Stripe iframe fields
cy
  .get('iframe')
  .its('0.contentDocument.body').should('not.be.empty')
  .then(cy.wrap)
  .find('input[data-elements-stable-field-name="cardNumber"]')
  .type('4242424242424242')

cy
  .get('iframe')
  .its('1.contentDocument.body').should('not.be.empty')
  .then(cy.wrap)
  .find('input[data-elements-stable-field-name="cardExpiry"]')
  .type('1225')

cy
  .get('iframe')
  .its('2.contentDocument.body').should('not.be.empty')
  .then(cy.wrap)
  .find('input[data-elements-stable-field-name="cardCvc"]')
  .type('123')

// Click the button to submit the page
cy.get('.btn-primary').click()
1
  • This solution works, but when I tried to check it in, I got error: "error Avoid referencing unbound methods which may cause unintentional scoping of 'this'." Apr 5 at 18:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.