如何使用 Cypress type() 处理自动斜杠(/)

Question

我目前正在对电子商务网站进行自动化测试，我正在设计一个 e2e 订单测试流程，在付款详细信息页面上我选择了签证付款选项，赛普拉斯已设法输入（）卡号（这不是问题）但是当我到达卡到期日期输入字段（MM/YY）时。当我们通常输入第一个数字（MM）时，会自动添加这个正斜杠（/），我已经找到了这个 inout 字段的许多好的定位器，但是当 Cypress 尝试输入这个数字时，我的测试失败了，并且 inout 的到期日期字段说日期无效，这里：剪掉我的代码（抱歉我不能分享太多，因为这是公司的）

/// cy.get('[class="braintree-credit-card-container"]').find('#braintree-hosted-field-expirationDate').click({force: true}).type ('5','2025')///

有人可以帮我解决这个问题吗？我只是找不到解决方法。谢谢！！

Answer 1

在 Cypress 测试中，

<iframe>

元素需要特殊处理，因为它们创建一个独立的文档来将页面其余部分的代码沙箱化。

最简单的方法是使用 cypress-iframe 包。

yarn add 'cypress-iframe'

通过导入激活包

cypress/support/e2e.js

import 'cypress-iframe`

在测试中，使用

cy.iframe()

代替

cy.get()

cy.iframe('#braintree-hosted-field-expirationDate')
  .find('input')
  .type('0525')

cy.iframe('#braintree-hosted-field-expirationDate')
  .find('input')
  .invoke('val')
  .should('eq', '05 / 25')