如何与赛普拉斯中的范围输入（滑块）正确交互？ [英] How do interact correctly with a range input (slider) in Cypress?

问题描述

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

I'm writing my bachelor thesis about e2e testing in javascript althought I'm not familiar with testing or javascript.

所以我有这个范围输入滑块来自src

So I have this the range input "slider" from the 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;">

赛普拉斯文档建议这样做

Cypress Documentation suggests this

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

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

I choose the percent values because the two last percent values are the only one, which changes by using the slider manually. Has someone same problems with that slider shit out there? thank you for your help!

推荐答案

您必须将值设置为 number 不是一个百分比。您应该看一下元素，看看哪些值是有效的。通常，元素上有 min 和 max 属性。

You must set the value to a number not a percent. You should take a look at the element and see what values are valid. Usually there is a min and max attribute on the element.

注意元素上的那些属性

<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 。以下应该可以工作：

So with your element, the value you set must be between 20000 and 150000. The following should work:

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

这篇关于如何与赛普拉斯中的范围输入（滑块）正确交互？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！