I have been trying to test a stripe checkout form using cypress.io
If anyone has managed to get this to work please let me know. I found a thread on the matter here https://github.com/cypress-io/cypress/issues/136 and based on this I came up with:
cy.get('iframe.stripe_checkout_app')
.wait(10000)
.then($iframe => {
const iframe = $iframe.contents()
const myInput0 = iframe.find('input:eq(0)')
const myInput1 = iframe.find('input:eq(1)')
const myInput2 = iframe.find('input:eq(2)')
const myButton = iframe.find('button')
cy
.wrap(myInput0)
.invoke('val', 4000056655665556)
.trigger('change')
cy
.wrap(myInput1)
.invoke('val', 112019)
.trigger('change')
cy
.wrap(myInput2)
.invoke('val', 424)
.trigger('change')
cy.wrap(myButton).click({ force: true })
})
But the problem is that the stripe form still does not register the input values. Here is a little gif of what happens http://www.giphy.com/gifs/xT0xeEZ8CmCTVMwOU8. Basically, the form does not register the change input trigger.
Does anyone know how to enter data into a form in an iframe using cypress?
Users of Cypress need to access elements in an <iframe> and additionally access an API to “switch into” and switch back out of different iframes. Currently the Test Runner thinks the element has been detached from the DOM (because its parent document is not the expected one).
Browser Automation with Cypress and Gherkin 2022 For the frame implementation in Cypress, we have to add the statement import 'cypressiframe'in the code. A tagname called frame/iframe is used to represent frames in the html code. Cypress command frameload is used to move the focus from the main page to the frame.
The solution is to create an iframe command that returns a promise upon iframe loading completion. These commands, aliased as iframe() , can be chained together to deal with nested iframes.
The following snippet should work for you. I copied/pasted it from @izaacdb's post in this thread.
cy.wait(5000)
cy.get('.__PrivateStripeElement > iframe').then($element => {
const $body = $element.contents().find('body')
let stripe = cy.wrap($body)
stripe.find('.Input .InputElement').eq(0).click().type('4242424242424242')
stripe = cy.wrap($body)
stripe.find('.Input .InputElement').eq(1).click().type('4242')
stripe = cy.wrap($body)
stripe.find('.Input .InputElement').eq(2).click().type('424')
})
However, in order for the above to work, you need to do the following (copied/pasted from @nerdmax's post from the same thread linked above):
Big Thanks to @Vedelopment @brian-mann !
I tested with react-stripe-checkout component and it works.
Just add some solution details so it may save others some time.
chromeWebSecurity disable
:// cypress.json { "chromeWebSecurity": false }
--disable-site-isolation-trials
:Check: https://docs.cypress.io/api/plugins/browser-launch-api.html# AND #1951
// /plugins/index.js module.exports = (on, config) => { on("before:browser:launch", (browser = {}, args) => { if (browser.name === "chrome") { args.push("--disable-site-isolation-trials"); return args; } }); };
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With