Cypress 12.8.1 не работает с iframe Stripe Elements

Короткий ответ: iframes Stripe требуют времени для загрузки и отображения полей, к которым вам нужно получить доступ, поэтому вам нужно добавить повторную попытку.

Обычно вы используете .should() утверждения, чтобы повторять попытки, пока что-то, что вы хотите, не появится в DOM.

К сожалению, с <iframe> внутри страницы вы не можете использовать .should(), потому что он не повторяет все шаги в цепочке обратно к contentDocument.

Поэтому вам нужно повторить попытку с помощью рекурсивной функции.

Вот рабочий пример с использованием образца страницы Stripe:

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

Более общая рекурсивная функция

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')

Обратите внимание, что важно повторно запросить поле полосы после обновления при подтверждении его нового значения.