Cypress 12.8.1 not working with Stripe Elements iframe
I have been stuck on this for ages and can't figure out how to get Cypress 12.8.1 to work with Stripe elements to enter credit card details and create a payment.
I have scoured the internet but none of the solutions seem to work.
Any help is greatly appreciated.
I have tried:
Using xpath https://www.browserstack.com/guide/frames-and-iframes-in-cypress this does nto work for me. See error: https://github.com/cypress-io/cypress/issues/24764#issuecomment-1489438851
Tried this plugin but it does not work anymore. https://stackoverflow.com/a/70024952/10222449 https://github.com/dbalatero/cypress-plugin-stripe-elements
Tried this but got the following error.
const $body = $element.contents().find('body')
let stripe = cy.wrap($body)
stripe.find('input[name="number"]').click().type('4242424242424242')
stripe = cy.wrap($body)
stripe.find('input[name="expiry"]').click().type('4242')
stripe = cy.wrap($body)
stripe.find('input[name="cvc"]').click().type('424')
})
- Tried a few versions of adding the custom Cypress command "iframeLoaded" but I can't figure out how to add these in the new Cypress 12 typescript format and just get errors. https://medium.com/@michabahr/testing-stripe-elements-with-cypress-5a2fc17ab27b https://bionicjulia.com/blog/cypress-testing-stripe-elements
My code in support/commands.ts
// ***********************************************
// This example namespace declaration will help
// with Intellisense and code completion in your
// IDE or Text Editor.
// ***********************************************
declare namespace Cypress {
interface Chainable<Subject = any> {
iframeLoaded($iframe: any): typeof iframeLoaded;
}
}
function iframeLoaded($iframe: any): Promise<any> {
const contentWindow = $iframe.prop('contentWindow')
return new Promise(resolve => {
if (contentWindow && contentWindow.document.readyState === 'complete') {
resolve(contentWindow)
} else {
$iframe.on('load', () => {
resolve(contentWindow)
})
}
})
}
Cypress.Commands.add('iframeLoaded', {prevSubject: 'element'}, iframeLoaded);
Update:
I think I have it using Fody's answer. I made 3 changes. I had to change it like so:
function getCardField(selector: any, attempts = 0) {
Cypress.log({displayName: 'getCardField', message: `${selector}: ${attempts}`})
if (attempts > 50) throw new Error('too many attempts')
return cy.get('iframe', {timeout:10_000, log:false})
// CHANGE: .eq(1 to .eq(0
.eq(0, {log:false})
.its('0.contentDocument', {log:false})
.find('body', {log:false})
.then(body => {
const cardField = body.find(selector)
if (!cardField.length) {
return cy.wait(300, {log:false})
.then(() => {
getCardField(selector, ++attempts)
})
} else {
return cy.wrap(cardField)
}
})
}
// CHANGE: "div.CardField" to "div.CardNumberField input"
getCardField('div.CardNumberField input')
.type('4242424242424242')
// CHANGE: "div.CardField" to "div.CardNumberField-input-wrapper"
getCardField('div.CardNumberField-input-wrapper')
.find('input').eq(0)
.should('have.value', '4242 4242 4242 4242') // passes
The short answer is, the Stripe iframes take time to load and display the fields you need to access, so you need to add a retry.
Usually you use .should() assertions to retry until something you want is present in the DOM.
Unfortunately, with an <iframe> inside the page, you can't use .should() because it doesn't retry all the steps in the chain back to contentDocument.
So you need roll-your-own retry with a recursive function.
Here's a working example using a sample Stripe page:
cy.intercept({ resourceType: /xhr|fetch/ }, { log: false }) // suppress fetch logs
cy.viewport(1500, 1000)
cy.visit('https://stripe-payments-demo.appspot.com');
function getCardField(selector, attempts = 0) {
Cypress.log({displayName: 'getCardField', message: `${selector}: ${attempts}`})
if (attempts > 50) throw new Error('too many attempts')
return cy.get('iframe', {timeout:10_000, log:false})
.eq(1, {log:false})
.its('0.contentDocument', {log:false})
.find('body', {log:false})
.then(body => {
const cardField = body.find(selector)
if (!cardField.length) {
return cy.wait(300, {log:false})
.then(() => {
getCardField(selector, ++attempts)
})
} else {
return cy.wrap(cardField)
}
})
}
getCardField('div.CardField')
.type('4242424242424242')
getCardField('div.CardField')
.find('input').eq(0)
.should('have.value', '4242 4242 4242 4242') // ✅ passes
A more general recursive function
function getStripeField({iframeSelector, fieldSelector}, attempts = 0) {
Cypress.log({displayName: 'getCardField', message: `${fieldSelector}: ${attempts}`})
if (attempts > 50) throw new Error('too many attempts')
return cy.get(iframeSelector, {timeout:10_000, log:false})
.eq(0, {log:false})
.its('0.contentDocument', {log:false})
.find('body', {log:false})
.then(body => {
const stripeField = body.find(fieldSelector)
if (!stripeField.length) {
return cy.wait(300, {log:false})
.then(() => {
getStripeField({iframeSelector, fieldSelector}, ++attempts)
})
} else {
return cy.wrap(stripeField)
}
})
}
cy.visit('https://hivepass.app/temp-stripe-example.html')
getStripeField({
iframeSelector: 'iframe[title="Secure card number input frame"]',
fieldSelector: 'div.CardNumberField-input-wrapper'
})
.type('4242424242424242')
getStripeField({
iframeSelector: 'iframe[title="Secure card number input frame"]',
fieldSelector: 'div.CardNumberField-input-wrapper input'
})
.should('have.value', '4242 4242 4242 4242')
getStripeField({
iframeSelector: '[title="Secure expiration date input frame"]',
fieldSelector: '[name="exp-date"]'
})
.type('0323')
getStripeField({
iframeSelector: '[title="Secure expiration date input frame"]',
fieldSelector: '[name="exp-date"]'
})
.should('have.value', '03 / 23')
Note, it seems to be important to re-query the stripe field after updating, when confirming it's new value.