Controlling a Stripe payent popup with Cypress.io

some_test.js

// for this to work you need to set `"chromeWebSecurity": false` in cypress.json

describe('Make Stripe Payment', function() {
  before(function() {
    cy.visit('http://localhost:3000/en/stripe/checkout/')
    Cypress.Cookies.preserveOnce('sessionid')
  })

  it('should enter credit card details and finalise payment', function() {
    cy.get('[data-test="button-FormStripeCart-PayWithCreditCard"]').click()
    // there are better ways to get the iFrame in a promise, I think, and there is
    // a new API coming up soon to deal with iFrames, but I was lazy and just put a
    // wait here - 6secs is usually enough to let the Stripe popup load fully
    cy.wait(6000)
    cy.get('iframe').then($iframe => {
      const doc = $iframe.contents()
      let input = doc.find('input')[0]
      // super weird stuff here, if you just input '4242424242424242', the value
      // that you end up seing in the input element is jumbled up a little,
      // probably because of the way how Stripe inserts spaces while you are
      // typing. By luck I found out that this issue can get worked around if
      // you just chain-call type()
      cy
        .wrap(input)
        .type('4242')
        .type('4242')
        .type('4242')
        .type('4242')
      input = doc.find('input')[1]
      cy
        .wrap(input)
        .clear()
        .type('12')
        .type('20')
      input = doc.find('input')[2]
      cy
        .wrap(input)
        .type('123')
        .type('{enter}')
    })
    cy.url({ timeout: 20000 }).should('contain', '/en/profile/my-orders/')
    Cypress.Cookies.preserveOnce('sessionid')
  })
})

I've created a more stable way to test Stripe Elements and released it as an npm package.

The API is fairly simple to use and abstracts away waiting for any <iframe>s. It also does not add time to your tests with cy.wait.

    cy.get('#card-element').within(() => {
      cy.fillElementsInput('cardNumber', '4242424242424242');
      cy.fillElementsInput('cardExpiry', '1025'); // MMYY
      cy.fillElementsInput('cardCvc', '123');
      cy.fillElementsInput('postalCode', '90210');
    });

Nice @dbalatero, thanks for sharing!

Thanks @dbalatero, exactly what i needed

If anyone is interested in testing stripe 3dsecure flows server side, I wrote this gist a few months back. I thought it was worth sharing here since everyone here is in the market for help testing stripe!

I found another method for handling Stripe's SCA/3DS popup. Inspired both by the comments here and recently implementing puppeteer to handle an azure login (big props to this blog post ) I realised if you have the URL source of the frame, you can just browse to it.

I've created a gist here.

My Stripe form after clicking the 'Submit' button results in Cypress showing 'Whoops, There are no Tests to Run'.

Does anyone has any idea why?

Thanks @dbalatero, very helpful. It worked on my end.

cy.get("#braint-hosted-number")
.its("0.contentDocument.body")
.then(cy.wrap)
.invoke("val", "4005519200000004")
.click()
.type("4005519200000004");

For the 3D secure I cleaned it up a bit and made it into a utility, so I can both confirm and deny it. Hope it helps someone Note the __privateStripeFrame does not have the number, it could fail on you randomly otherwise :)

function confirm3DSecureDialog (confirm = true) {
    cy.wait(5000)
    cy.get('iframe[name^=__privateStripeFrame]')
      .then(($firstIFrame) => {
        cy.wrap($firstIFrame.contents().find('iframe#challengeFrame'))
          .then(($secondIFrame) => {
            // authorise
            const target = confirm ? '#test-source-authorize-3ds' : '#test-source-fail-3ds'
            cy.wrap($secondIFrame.contents().find(target)).click()
          })
      })
  }

About testing 3DS, has anybody had an issue that after confirming 3ds modal your next code not running?