Question

我正在尝试使用赛普拉斯的3个输入字段来测试Stripe表单。我找到了一个示例，该示例可以测试包含所有付款信息（https://medium.com/@chipomapondera/hi-michael-98e432948028）的单个输入。

我的版本在输入CC时通过，但在下一次输入时失败。我的代码如下：

it('checks user can support the Creator', () => {
        cy.get('button[class="buttons__FollowButton-sc-10ti9z2-0 huoUmA"]').click()
        cy.wait(4000)
        cy.get('body')
          .should('contain', 'Join this community')
        cy.get('button[class="styledComponents__SubscribeButton-g42pit-3 kUgWbq"]').click()
        cy.getWithinIframe('[name="cardnumber"]').type('4242424242424242')
          .getWithinIframe('[name="exp-date"]').type('1232')
          .getWithinIframe('[name="cvc"]').type('987')
    })

输入卡号后，似乎不喜欢以下内容： cy.getWithinIframe（'[name =” exp-date“]'）。type（'1232'） cy.getWithinIframe（'[name =” cvc“]'）。type（'987'）

我收到的错误是： cypress error

Answer 1

我可以在类型字段中看到typo，在此测试行no ending上有.getWithinIframe('[name="exp-date"]').type('1232)个单引号。您可以尝试遵循.getWithinIframe('[name="exp-date"]').type('1232')还是可以尝试不加引号.getWithinIframe('[name="exp-date"]').type(1232)

Answer 2

我关注了您分享的中篇文章，遇到了与您相同的问题。造成此问题的原因当然是Stripe创建了多个iframe，而本文中创建的方法只是获取了第一个iframe。

因此，一个非常简单的解决方案是将包含iframe的div的ID传递给我们的getWithinIframe函数。该函数现在将如下所示：

Cypress.Commands.add('getWithinIframe', (iframeSelector, targetElement) =>
cy.get(`#${iframeSelector} iframe`).iframeLoaded().its('document').getInDocument(targetElement));

并这样称呼它：

cy.getWithinIframe('cardNumberElement','[name="cardnumber"]').type(1212123);

希望这可以帮助面临相同问题的任何人。

赛普拉斯测试通过了单一表单输入字段，但忽略了以下字段

2 个答案: