Invoke value on range input

Question

I am trying to change a value on a native html5 range input with Cypress. Here is the code:

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

I get an error that says:

CypressError: Timed out retrying: cy.invoke() errored because the property: 'val' does not exist on your subject.

cy.invoke() waited for the specified property 'val' to exist, but it never did.

I have confirmed the input does exist in the assertion. I have also confirmed it is selecting the proper element (range input.)

Any ideas on what the issue is and why this doesn't work? Cypress documentation indicates this would work for me as shown in their examples.

Richard Matsen Richard Matsen · Accepted Answer · 2020-02-11T02:21:06

Try it in the console, there is no val() on this input type (don't know why), but the .value property is available for getting and setting, so

cy.get('input[type="range"]')
  .then($input => $input[0].value = 5);

Codepen for experimenting.

<input type="range" min="5" max="10" step="0.01">

//console.log(document.querySelector('input').val())

console.log(document.querySelector('input').value)   // "7.5"

document.querySelector('input').value = 9

console.log(document.querySelector('input').value)   // "9"

Invoke value on range input

1 Answers