如何对 div (Cypress) 的输入进行 e2e 测试？答案

【问题标题】：How to do a e2e test on an input that is a div (Cypress)?如何对 div (Cypress) 的输入进行 e2e 测试？
【发布时间】：2019-10-15 18:58:24
【问题描述】：

我有一个表格，其中包含客户的信用卡号（第 3 方 API）

我想测试一下，但是当它不是输入时，我不知道如何输入一个假值？

这是我收到的错误：

CypressError: cy.type() 失败，因为它需要有效的可类型元素。

<div class="creditCard">
         <label class="label">CC Number</label>
         <div id="card-number" data-cy="cyCredit" class="medium-8 medium-centered columns"></div>
</div>

it("test credit card", function() {
    cy.get('#card-number').type('23923293923293293')
}

【问题讨论】：

为什么不是输入？
因为它来自进行验证等的第三方支付 API。

标签： angular integration cypress

【解决方案1】：

如果contenteditable="true"，赛普拉斯将允许输入。在您的问题中，您可以尝试以下方法；

cy.get('#card-number').find('[contenteditable]').type('1100120011401111');

或者您可以尝试以下方法：

cy.get('#card-number').then($div => {
      $div.text('1100120011401111');
});

如果上述方法不起作用，请尝试以下方法：

cy.get('#card-number').invoke('val', text).trigger('1100120011401111');

【讨论】：

是的，我试过了，但我收到：CypressError: Timed out retrying: Expected to find element: '[contenteditable]', but never found it
我已经更新了几个案例，看看是否有帮助！

【解决方案2】：

您可以尝试以下操作，这里的目的是通常 contenteditable 对 DOM 是隐藏的，除非您单击/聚焦指定的元素，因此应该出现并且您可以在其上键入。 “触发器”保持点击，直到您触发取消事件，在此期间 contenteditable 存在于 DOM 中，因此您可以在其上键入。最后一个模糊事件可以替换为“更改”或其他任何适合您的情况。

请记住，cypress 在较新版本中也使用 contenteditable，因此您可以为您的元素使用更具体的选择器 (#mySpecificSelector[contenteditable])

cy.get(`'#card-number'`)
.trigger("click")
.get(`[contenteditable]`)
.type("TEST")
.blur();

【讨论】：