How do interact correctly with a range input (slider) in Cypress?

问题

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

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

I tried:

 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!

回答1:

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.

Notice those attributes on your 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;">

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

来源：https://stackoverflow.com/questions/55023428/how-do-interact-correctly-with-a-range-input-slider-in-cypress