Cypress：信用卡支付的自动测试

Question

我正在做信用卡付款的自动测试。不幸的是，测试在“到期日期”项中失败了

我的代码：

    cy.getWithinIframe('[name="cardnumber"]').type('4242424242424242');
    cy.getWithinIframe('[name="exp-date"]').type('122024');
    cy.getWithinIframe('[name="cvc"]').type('987');

给出以下错误：

测试结束的地方

Answer 1

我也遇到了同样的问题，使用相同的方法（https://medium.com/@michabahr/testing-stripe-elements-with-cypress-5a2fc17ab27b）。

问题在于，过期日期和 cvv 输入位于单独的 iframe 中，这可能是由于个性化所致。所以你必须指定你的 iframe 位于哪个 iframe 中：

cy.getWithinIframe('[name="cardnumber"]').type("4242424242424242");
cy.get('iframe')
    .eq(1)
    .iframeLoaded()
    .its('document')
    .getInDocument('[name="exp-date"]')
    .type('1225');

cy.get('iframe')
    .eq(2)
    .iframeLoaded()
    .its('document')
    .getInDocument('[name="cvc"]')
    .type('123');

Answer 2

因此，对于 iframe，我们必须寻找解决方法，因为 cypress 不提供对 iframe 的开箱即用支持。

1.我们将创建一个自定义命令，它将帮助我们遍历 iframe，并有助于代码的可重用性。下cypress/support/command.js写：

Cypress.Commands.add('getIframe', (iframe) => {
    return cy.get(iframe)
        .its('0.contentDocument.body')
        .should('be.visible')
        .then(cy.wrap);
})

2.我发现测试有时会随机失败，所以如果我们使用cypress 的重试选项会很好。为此，请转到cypress.json并编写：

"retries": 2

此选项仅适用于 cypress v5.0 及更高版本。

3.在您的测试文件中，输入卡号时使用：

cy.getIframe('#stripe-card-element > .__PrivateStripeElement > iframe').click().type('4242 4242 4242 4242')

要输入到期日期，请使用：

cy.getIframe('#stripe-exp-element > .__PrivateStripeElement > iframe').click().type('0921')

输入CVC 号码时使用：

cy.getIframe('#stripe-cvc-element > .__PrivateStripeElement > iframe').click().type('123')