Testing Stripe payment integration using Cypress

Question

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.

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