我正在进行信用卡付款的自动测试。很遗憾，测试在到期日期项中失败我的代码：
cy.getWithinIframe('[name="cardnumber"]').type('4242424242424242'); cy.getWithinIframe('[name="exp-date"]').type('122024'); cy.getWithinIframe('[name="cvc"]').type('987');
给出以下错误：
测试在哪里结束
k4ymrczo1#
所以对于iframe，我们必须寻找解决方法，因为cypress不提供对iframe的开箱即用支持。
**1.**我们将创建一个自定义命令，它将帮助我们遍历iframe，也有助于代码的可重用性。在cypress/support/command.js下写入：
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并写入：
cypress.json
"retries": 2此选项仅适用于cypress v5.0及更高版本。
"retries": 2
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')
gwbalxhn2#
我也遇到了同样的问题，使用了同样的方法（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');
1bqhqjot3#
对其他人来说：我得到了和@Gianmarco Gagliardi完全一样的错误然后我按照@Alapan Das三个步骤，但仍然得到同样的错误。对我有效的方法是先用修改后的@alapan Das解决方案点击iframe，添加强制力：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');
我希望这对其他人有帮助。
2izufjch4#
上面提供的技术答案非常好，但是，首先，我想退一步说。为什么还要在Cypress中测试呢？从质量保证的Angular 来说，我们不应该在e2 e中测试集成;相反，集成测试应该在较低的级别-集成级别上执行。在这里，我们可以模拟提供商的响应，然后继续讨论我们的应用将如何响应它。
4条答案
按热度按时间k4ymrczo1#
所以对于iframe，我们必须寻找解决方法，因为cypress不提供对iframe的开箱即用支持。
**1.**我们将创建一个自定义命令，它将帮助我们遍历iframe，也有助于代码的可重用性。在
cypress/support/command.js下写入：**2.**我看到测试有时会随机失败，所以如果我们使用retry option from cypress会更好。为此，请转到
cypress.json并写入："retries": 2此选项仅适用于cypress v5.0及更高版本。
3.在您的测试文件中，输入卡号用途：
输入失效日期时用途：
输入CVC编号时用途：
gwbalxhn2#
我也遇到了同样的问题，使用了同样的方法（https://medium.com/@michabahr/testing-stripe-elements-with-cypress-5a2fc17ab27b）。
问题是过期日期和cvv输入在不同的iframe中，可能是由于个性化的原因，所以你必须指定你的iframe在哪个iframe中：
1bqhqjot3#
对其他人来说：我得到了和@Gianmarco Gagliardi完全一样的错误
然后我按照@Alapan Das三个步骤，但仍然得到同样的错误。
对我有效的方法是先用修改后的@alapan Das解决方案点击iframe，添加强制力：true表示不考虑焦点而单击：
我希望这对其他人有帮助。
2izufjch4#
上面提供的技术答案非常好，但是，首先，我想退一步说。
为什么还要在Cypress中测试呢？从质量保证的Angular 来说，我们不应该在e2 e中测试集成;相反，集成测试应该在较低的级别-集成级别上执行。在这里，我们可以模拟提供商的响应，然后继续讨论我们的应用将如何响应它。