Как правильно взаимодействовать с вводом диапазона (ползунком) в Cypress?

Question

Я пишу свою дипломную работу о тестировании e2e в javascript, хотя я не знаком с тестированием или 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;">

Документация Cypress предлагает это

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, а не в процентах.Вы должны взглянуть на элемент и посмотреть, какие значения являются действительными.Обычно в элементе есть атрибут min и 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')