javascript - 带 Stripe 的柏树 : elements height not loaded

Question

一周以来我一直在使用 cypress，并且我成功地与条纹 iframe 进行了集成:我使用了以下代码:
在 cypress/support/command.js 中

Cypress.Commands.add('iframeLoaded', { prevSubject: 'element' }, $iframe => {
  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('getInDocument', { prevSubject: 'document' }, (document, selector) =>
  Cypress.$(selector, document),
)

在 cypress/integration/staging-web/web.test.js 中

    cy.get('iframe')
      .eq(1)
      .iframeLoaded()
      .its('document')
      .getInDocument('[name="cardnumber"]')
    
      .then($iframe => {
          if ($iframe.is(':visible')) {
              $iframe.type('4242424242424242')
          }
      })
    
  cy.get('iframe')
      .eq(1)
      .iframeLoaded()
      .its('document')
      .getInDocument('[name="exp-date"]')
    
      .then($iframe => {
          if ($iframe.is(':visible')) {
              $iframe.type('1225')
          }
      })
    
  cy.get('iframe')
      .eq(2)
      .iframeLoaded()
      .its('document')
      .getInDocument('[name="cvc"]')
    
          .then($iframe => {
              if ($iframe.is(':visible')) {
                  $iframe.type('123')
              }
          })
    
  cy.get('.mt1 > .relative > .input').type('utente')

我的问题是，在页面加载期间，cypress 不会等到 strip 字段完全加载，并且我收到一个错误，因为发生了这种情况(对不起，不是英语语言，但它是一个屏幕截图):

这些行是:

卡号

失效日期，密码

第 4 行是卡片所有者

我试过 .should('be.visibile') 但它什么也没做；加上我试过

cy.get('iframe')
    .eq(1)
    .iframeLoaded()
    .its('document')
    .getInDocument('[name="cardnumber"]')

    .then($iframe => {
        if ($iframe.is(':visible')) {
            $iframe.type('4242424242424242')
        }
    })

但没办法，它总是给我一个错误；在后一种情况下，它甚至不会给出错误，它只是在没有填写字段的情况下继续进行，然后它会停止，因为它无法继续进行测试。
如果我在 cy.wait(800) 中的代码之前添加 web.test.js 它工作正常，但我不想使用 wait ，因为它基本上是错误的(如果它在 5 秒后加载会发生什么？)。
有没有办法检查这些元素是否必须具有高度？
请记住，它们在 iframe 中(遗憾的是)。

Answer 1

如果我添加 cy.wait(800) ...它工作正常 。
这是因为您没有在 getInDocument() 中使用带有自动重试功能的 Cypress 命令。Cypress.$(selector) 是 jQuery，它只是尝试抓取元素，而不是重试异步加载，并且在未找到时不会测试失败。
应该在重试时使用正确的命令，例如

Cypress.Commands.add('getInDocument', { prevSubject: 'document' }, (document, selector) =>
  cy.wrap(document).find(selector)
)

或者您可能需要使用 body

Cypress.Commands.add('getInDocument', { prevSubject: 'document' }, (document, selector) =>
  cy.wrap(document).its('body')
    .find(selector)
    .should('be.visible')
)

如果没有测试系统，我不确定哪一个是正确的语法，但是您明白了。

此外，太多的自定义命令。你总是跟随 .iframeLoaded() 和 .its('document') ，所以只需将它全部包装在 iframeLoaded 自定义命令中。
事实上， resolve(contentWindow.document.body) 因为它是链接 .find(selector) 的更好点。

这是我对 Stripe 演示页面的测试，

Cypress.Commands.add('iframeLoaded', { prevSubject: 'element' }, $iframe => {
  const contentWindow = $iframe.prop('contentWindow')
  return new Promise(resolve => {
    if (contentWindow && contentWindow.document.readyState === 'complete') {
      resolve(contentWindow.document.body)
    } else {
      $iframe.on('load', () => {
        resolve(contentWindow.document.body)
      })
    }
  })
})

it('finds card number', () => {

  cy.viewport(1000, 1000)
  cy.visit('https://stripe-payments-demo.appspot.com/')
  cy.get('iframe')
    .should('have.length.gt', 1)  // sometimes 2nd iframe is slow to load
    .eq(1)
    .iframeLoaded()
    .find('input[name="cardnumber"]')
    .should('be.visible')
})