Cypress 12.8.1 not working with Stripe Elements iframe

Issue

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:

1. 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

2. Tried this plugin but it does not work anymore. https://stackoverflow.com/a/70024952/10222449 https://github.com/dbalatero/cypress-plugin-stripe-elements

3. 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')
})

4. 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

Solution

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.

Answered By - Fody