赛普拉斯：信用卡付款自动测试

Question

我正在通过信用卡进行自动测试。不幸的是，该测试在“到期日期”项中未能通过我

我的代码：

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

出现以下错误：

测试结束的地方

Answer 1

因此对于iframe，我们必须寻找解决方法，因为赛普拉斯没有为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。。我看到测试有时会随机失败，因此如果我们使用retry option from 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')

Answer 2

使用相同的方法（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 3

对其他人：我遇到了与@Gianmarco Gagliardi 完全相同的错误

然后我按照@Alapan Das 执行了三个步骤，但仍然出现相同的错误。

对我有用的是首先使用@alapan Das 解决方案的修改版本单击 iframe，添加 force: true 以单击不管焦点：

// yes, i have to type the whole cardnumber after click
cy.getIframe('iframe').click({ force: true }).type('4242424242424242')
cy.getWithinIframe('[name="cardnumber"]').type('4242424242424242');

我希望这会对其他人有所帮助。