Skip to content

Aditya Naik

How to easily test react stripe elements using cypress

React, Stripe, Cypress1 min read

How to use react-stripe-elements

I have already written about how to set up and use react-stripe-elements.

However, there is another easier way to test stripe implementation than mentioned in the article.

How to test react-stripe-elements

Just use following function to your cypress test

1function fillInStripeForm() {
2 const input = [
3 ['cardnumber', '4242424242424242'],
4 ['exp-date', '1220'],
5 ['cvc', '123'],
6 ]
7 cy.wait(1000)
8 cy.get('.__PrivateStripeElement > iframe').each(($element, index, list) => {
9 cy.get($element).then(($iframe) => {
10 const body = $iframe.contents().find('body')
11 cy.wrap(body)
12 .find(`input[name=${input[index][0]}]`)
13 .type(input[index][1], { delay: 10 })
14 })
15 })
16}

and call it when tripe form needs to be filled.

Of course, const input can be extracted out and passed in as args if you want to test various cards available for stripe testing.

© 2020 by Aditya Naik. All rights reserved.