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

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

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

There is range-type input "slider" in the DOM I'm testing:

<input id="sum_slider" 
  class="input-range js-inv-calc-input-sum-range js-input-range" 
  type="range" name="investmentsum" 
  min1="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;">

The 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 this:

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

I am choosing the percent values because the two last percent values are the only ones that change when using the slider manually.

Solution

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