Question

我有一张使用客户信用卡号（第三方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')
}

Answer 1

如果contenteditable="true"，则Cypress将允许输入。在您的问题中，您可以尝试以下操作；

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');

Answer 2

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

请记住，赛普拉斯在新版本中还使用contenteditable，因此您可以为元素使用更具体的选择器（#mySpecificSelector [contenteditable]）

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

如何在div（赛普拉斯）输入上进行e2e测试？

2 个答案: