如何与 Cypress 中的范围输入（滑块）正确交互？

Question

我正在写关于 javascript 的 e2e 测试的学士论文，尽管我不熟悉测试或 javascript。

所以我有来自 src 的范围输入“滑块”

<input id="sum_slider" class="input-range js-inv-calc-input-sum-range js-input-range" type="range" name="investmentsum" min="20000" max="150000" value="20000" step="1000" title="Investitionsbetrag" style="background: -webkit-linear-gradient(left, rgb(255, 196, 0) 0%, rgb(255, 196, 0) 0%, rgb(119, 119, 119) 0%) no-repeat;">

赛普拉斯文档建议这样做

cy.get('input[type=range]').as('range')
  .invoke('val', 25)
  .trigger('change')

cy.get('@range').siblings('p').should('have.text', '25')

我试过：

 cy.get('#sum_slider[type=range]').as('range')
.invoke('val', 0%)
.trigger('change')

我选择百分比值是因为最后两个百分比值是唯一的一个，可以通过手动使用滑块来更改。有人和那个滑块有同样的问题吗？感谢您的帮助！

Answer 1

您必须将该值设置为非number百分比。您应该查看该元素并查看哪些值是有效的。通常元素上有一个minand属性。max

注意元素上的这些属性

<input id="sum_slider" class="input-range js-inv-calc-input-sum-range js-input-range" type="range" name="investmentsum" min="20000" max="150000" value="20000" step="1000" title="Investitionsbetrag" style="background: -webkit-linear-gradient(left, rgb(255, 196, 0) 0%, rgb(255, 196, 0) 0%, rgb(119, 119, 119) 0%) no-repeat;">

因此，对于您的元素，您设置的值必须在20000和之间150000。以下应该有效：

cy.get('input[type=range]')
  .invoke('val', 20001)
  .trigger('change')