How to get stripe element in cypress [duplicate]

Question

I want to write end-to-end tests for web-application on Ionic with stripe-payments and have problem to type card number in stripe iframe field.

I checked Testing Stripe Elements with Cypress to understand how to do this stuff, but it doesn't work.

I have this structure of my HTML:

Screenshot of my structure:

Can you have any idea how to do this?

Trembly

See answer by Fody here https://mcmap.net/q/585198/-cypress-12-8-1-not-working-with-stripe-elements-iframe. This is a working solution in 2023. – Lucilius

I used this fillStripeElement command: https://mcmap.net/q/591180/-how-to-add-data-into-stripe-during-the-testing-my-site-in-cypress – Wintergreen

Answer 1

The cypress-plugin-stripe-elements plugin should work:

This plugin provides a fillElementsInput that makes it easy to fill out Stripe Elements inputs without cy.wait() hacks or anything else.

cy.fillElementsInput('cardNumber', '4242424242424242');

Ordinand

That library din't work for me, but it's outdated – Unknow

Looks like Stripe has changed the form and the data-elements-stable-field-name attribute is no longer present. If you modify to look for id instead it works. const getSelectorForField = (name) => 'input[id="' + name + '"]' – Inspan

Not working for me even with the change using Cypress 12.8.1. I get the error cy.fillElementsInput is not a function – Lucilius

Answer 2

for an card number we could use cy.fillElementsInput('cardNumber', cardNum);

for an example if we want to use within a page object 
   getIBANNumberText(cardNum){
      return cy.get('.StripeElement').within(() => {
         cy.fillElementsInput('cardNumber', cardNum);
      });
   }

in this example cardNum is the parameter to get the input into the Stripe Element.

Canaille

Answer 3

You can also try this code it is helpful for me to deal with stripe in Cypress

 it('Stripe testing practice with cypress', function () {
cy.get('.__PrivateStripeElement > iframe').click() // in cy.get() insert stripe iframe id
cy.wait(6000)
cy.get('iframe').then($iframe => {
  const doc = $iframe.contents()
  let input = doc.find('input')[0]
  cy
    .wrap(input)
    .type('4242')
    .type('4242')
    .type('4242')
    .type('4242')
  input = doc.find('input')[1]
  cy
    .wrap(input)
    .clear()
    .type('12')
    .type('29')
  input = doc.find('input')[2]
  cy
    .wrap(input)
    .type('123')
    // .type('{enter}')
})

});

Culley