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