Cypress: can't trigger 'onChange' for an input type='range' rendered by React

[rluncasu]

Current behavior:

...
return (
...
<div className="search-bar__form-range">
  <input type="range" min={10} max={900} step={10} value={500} onChange={(event)=>alert(`slider changed
  to:${event.target.value}`)}
  />
...

cy.get('.search-bar__form-range > input[type=range]').as('range').invoke('val', 700)
  .trigger('change');

Changes the slider value.
Doesn't trigger the onChange handler.

Desired behavior:

should trigger the onChange handler

Steps to reproduce:

Set up a React app with an input type='range' and an onChange handler
Try to trigger the onChange event from cypress.

Versions

"cypress": "^2.1.0"
"react": "^15.4.2"

[jennifer-shehane]

Can confirm, onChange is not triggered in the example above within a react project - not sure if it is specifically a React issue though.

[rluncasu]

ok, so I've found sort of a workaround.
it looks like the onInput event can be triggered just fine. In the case of input type='range' the "input" event is triggered in the same situation as the "change" is so I was able to switch it.

Workaround would be: use onInput with .trigger('input') instead of onChange

[excitement-engineer]

I am also running into the same issue.

[annezhou920]

I'm encountering the same issue. Using .trigger('input') instead of the change event also didn't affect anything.

I've been playing around with a number of combinations using click, mousedown, mousemove, mousemove to trigger an interaction on an input type='range', but nothing seems to work.

So far, I have this piece of code that sets and changes the value of the input in the DOM, and it moves the range slider (the circle knob), but the input still doesn't recognize that there's an interaction:

cy.get('input[type=range]').eq(0)
  .then(($el) => {
    cy.wrap($el)
      .click(200, 15)
      .invoke('val', 2)
      .trigger('change', { force: true })
      .invoke('attr', 'value', 2)
  });

I've tried .click(), .click('left'), and .click(200, 15) -- positional clicking within the input, but Cypress doesn't click on the input.

Does anyone know a good way of triggering an onChange event? Is this an actual bug?

[sbasinger]

Same issue here. Holler if anyone knows any workarounds.

Code:

handleSlider = event => {
  this.setState({
    value: event.target.value,
  });
};

<StyledSliderValue>
  <SliderValue data-test="weeds-slider-value">{this.state.value} per acre</SliderValue>
</StyledSliderValue>
<SliderInput
  onChange={this.handleSlider}
  type="range"
  min="0"
  max="1000"
  step="100"
  value={this.state.value}
  data-test="weeds-slider"
/>

Cypress test:

it('updates value on slider', ()=> {
  cy.get('[data-test="weeds-slider"]')
    .invoke('val', 500)
    .trigger('input')
    .click()

  cy.get('[data-test="weeds-slider-value"]')
    .should('have.text', '500 per acre')
})

In Cypress, I can see the slider knob move to the center, but the value does not change. In my app, everything works fine. I've tried .trigger('change') and .trigger('input') and several different .click(), but no luck.

[davemyersworld]

I have put together a workaround for this issue that does not require switching to the input event.

There are two parts:

1. Set the value of the underlying DOM node (avoiding React's override)
2. Fire a change event on it such that React picks up the change.

That works like this:

// React overrides the DOM node's setter, so get the original, as per the linked Stack Overflow
const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set;
describe('Range', () => {
  it('Updates the value and UI when changing a range input', () => {
    cy.get('input[type="range"]').then(($range) => {
      // get the DOM node
      const range = $range[0];
      // set the value manually
      nativeInputValueSetter.call(range, 15);
      // now dispatch the event
      range.dispatchEvent(new Event('change', { value: 15, bubbles: true }));
    });
  });
});

I'm fairly new to the cypress ecosystem, so perhaps someone can do this in a more cypress-y way, but this solves the problem.

[annezhou920]

thank you @davemyersworld! that fixed the issue for me!!

[Elshaikh]

@jennifer-shehane @annezhou920 @davemyersworld
Need your help as now i can interact with price slider , but price filtration not impacted
HTML

<div class="horizontal-slider" style="position: relative;">
    <div class="bar bar-0" style="position: absolute; left: 0px; right: 225px; will-change: left, right;"></div>
    <div class="bar bar-1" style="position: absolute; left: 0px; right: 0.0139758px; will-change: left, right;"></div>
    <div class="bar bar-2" style="position: absolute; left: 224.986px; right: 0px; will-change: left, right;"></div>
    <div class="handle handle-0 " tabindex="0" role="slider" aria-valuenow="162.08" aria-valuemin="162.08"
         aria-valuemax="9177.64" style="position: absolute; z-index: 1; left: 0px;"></div>
    <div class="handle handle-1 " tabindex="0" role="slider" aria-valuenow="9177.08" aria-valuemin="162.08"
         aria-valuemax="9177.64" style="position: absolute; z-index: 2; left: 224.986px;"></div>
</div>

cypress step

cy.get('#content-section div.horizontal-slider')
  .find('div.handle.handle-1')
  .invoke('attr', 'style', "position: absolute; z-index: 1; left: 150.025px; will-change: left;")
  .trigger('change')
cy.get('#content-section div.horizontal-slider')
  .find('div.handle.handle-0')
  .invoke('attr', 'style', "position: absolute; z-index: 1; left: 56.025px; will-change: left;")
  .click()

[beausmith]

✋ Also effected by this same issue:

The input[type='range'] html element updates visually in the Cypress testing window, however .trigger('change') does not trigger the onChange callback function for the range input.

HTML

<label for="font-size">Font Size</label>
<input type="range" id="font-size" min="0" max="3" step="1" value="1">

Cypress

cy.get('#font-size')
  .invoke('val', 0)
  .trigger('change')

Workaround 🎉

I have implemented @davemyersworld's workaround, and can confirm it works! 👍

I've taken his example a wee further and abstracted a higher order function to perform the input value change. Here is the Cypress test to change and test the input range value from 0 to 1 to 2 to 3:

// TODO: Remove `.then()` workaround and replace with commented steps when
// issue is resolved: https://github.com/cypress-io/cypress/issues/1570
const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
  window.HTMLInputElement.prototype,
  'value'
).set
const changeRangeInputValue = $range => value => {
  nativeInputValueSetter.call($range[0], value)
  $range[0].dispatchEvent(new Event('change', { value, bubbles: true }))
}
describe('Font Settings', () => {
  it('User can adjust font settings', () => {
    cy.visit('/settings')
    cy.contains('Sample text.')
      .should('have.css', 'font-size')
      .should('eq', '24px')
    cy.get('#font-size')
      // .invoke('val', 0)
      // .trigger('change')
      .then(input => changeRangeInputValue(input)(0))
    cy.contains('Sample text.')
      .should('have.css', 'font-size')
      .should('eq', '18px')
    cy.get('#font-size')
      // .invoke('val', 1)
      // .trigger('change')
      .then(input => changeRangeInputValue(input)(1))
    cy.contains('Sample text.')
      .should('have.css', 'font-size')
      .should('eq', '24px')
    cy.get('#font-size')
      //   .invoke('val', 2)
      //   .trigger('change')
      .then(input => changeRangeInputValue(input)(2))
    cy.contains('Sample text.')
      .should('have.css', 'font-size')
      .should('eq', '44px')
    cy.get('#font-size')
      //   .invoke('val', 3)
      //   .trigger('change')
      .then(input => changeRangeInputValue(input)(3))
    cy.contains('Sample text.')
      .should('have.css', 'font-size')
      .should('eq', '50px')
  }
}

Looking forward to replacing workaround when a fix is available.

Thanks for triaging @jennifer-shehane

[moshie]

This might help anyone coming here looking for answers but this helped us:

cy.get('[type="range"]')
  .first()
  .invoke('val', 25)
  .trigger('change', { data: '25' })

[aquacalc]

Same issue. I was put on track to solving it with the short article "Simulate React On-Change On Controlled Components":

https://hustle.bizongo.in/simulate-react-on-change-on-controlled-components-baa336920e04

(Which I since see is the same sol'n as in the SO reference cited above.)

[ryanfiller]

It looks like this issue has been solved, but I wanted to put this here in case anyone comes across this in google like I did today -

I was able to register a custom command in in the cypress/support/commands.js file:

Cypress.Commands.add("controlledInputChange", (input, value) => {
  const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
    window.HTMLInputElement.prototype,
    'value'
  ).set

  const changeInputValue = inputToChange => newValue => {
    nativeInputValueSetter.call(inputToChange[0], newValue)
    inputToChange[0].dispatchEvent(new Event('change', { newValue, bubbles: true }))
  }

  return cy.get(input).then(input => changeInputValue(input)(value))
})

This is used in the test as:

 cy.get('input[type="range"]').eq(0).then(input => {
   value = 10.toString() // or whatever number, but it needs to be a passed in as a string
   cy.controlledInputChange(input, value)
})

[Totti10as]

Need some help with the material-ui slider: I didn't manage to move the slider with some value of offset (sideways like)

Current Cypress

  it('Slider test', () => {
   cy.visit('https://material-ui.com/components/slider/')
    cy.get(
      '.jss407 > .MuiGrid-container > .MuiGrid-grid-xs-true > .MuiSlider-root > .MuiSlider-thumb',
    )
      .focus()
      .trigger('mousedown')
      .trigger('mousemove', 0, 20, { which: 1 })
      .trigger('mouseup')

  })
})

Versions:

• Win10, Chrome 80
• Cypress 4.2.0

Perhaps someone can help?

[Totti10as]

Need some help with the material-ui slider: I didn't manage to move the slider with some value of offset (sideways like)

Current Cypress
it('Slider test', () => {
cy.visit('https://material-ui.com/components/slider/')
cy.get(
'.jss407 > .MuiGrid-container > .MuiGrid-grid-xs-true > .MuiSlider-root > .MuiSlider-thumb',
)
.focus()
.trigger('mousedown')
.trigger('mousemove', 0, 20, { which: 1 })
.trigger('mouseup')

})
})

Versions:

• Win10, Chrome 80
• Cypress 4.2.0

Perhaps someone can help?

* The issue is resolved by the code below: - Thx to Vinod [email protected]_gitlab **

it.only('Slider test', () => {
    cy.viewport(1900, 1000);
    cy.visit('https://material-ui.com/components/slider/')
    cy.get('[aria-labelledby="discrete-slider"]').first()
      .trigger('mousedown', { which: 1 }, { force: true })
      .trigger('mousemove', 881, 288, { force: true })
      .trigger('mouseup')

[cjoecker]

Has anyone managed to program the workaround with Typescript?

I'm getting always a _Type Error - Illegal invocation_ for this:

const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
  window.HTMLInputElement.prototype,
  'value'
)?.set

const changeRangeInputValue = ($range: JQuery<HTMLElement>) => (value: number) => {
  nativeInputValueSetter?.call($range[0], value)

  $range[0].dispatchEvent(new Event('change', { value, bubbles: true }))
}

[YuanGaoo]

I'm still not able to trigger the slider. Can someone give help?

cy.get('@field') .eq(index) .find("[role='slider']") .trigger('mousedown', { which: 1 }, { force: true }) .trigger('mousemove', 32, 22, { force: true }) .trigger('mouseup')

[YuanGaoo]

I'm still now able to trigger the slider. Can someone give help?

cy.get('@field') .eq(index) .find("[role='slider']") .trigger('mousedown', { which: 1 }, { force: true }) .trigger('mousemove', 32, 22, { force: true }) .trigger('mouseup')

It not moving the slider

[neilsud]

Hi @Elshaikh are you available to solve the slider? i have similar slider type with you and cant make the slider move

<div data-testid="range-slider-handle" class="crang-slider-handle" tabindex="0" aria-valuemax="12345" aria-valuemin="0" aria-valuenow="0" draggable="false" role="slider" style="position: absolute; z-index: 0; cursor: grab; user-select: none; touch-action: none; transform: translate(-8px, -6px);">
  <span data-label="12" class="crang-slider-handle-label is-default" style="padding: 0px 15px;">$0</span>
</div>

[eFFeeMMe]

I was also running into this issue and had to use beausmith's workaround (adapted from Dave Myers').

I had to make a couple further adjustments, so I'll share them here, hoping they can save other people some time.

const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
  window.HTMLInputElement.prototype,
  "value"
).set;

const changeRangeInputValue = ($range) => (value) => {
  return new Promise((resolve) => {
    nativeInputValueSetter.call($range[0], value);
    $range[0].dispatchEvent(new Event("input", { value, bubbles: true }));
    $range[0].dispatchEvent(new Event("change", { value, bubbles: true }));
    resolve();
  });
};

What changed:

1. I needed to dispatch both input and change events. Our slider implementation uses both, maybe that's the case for you as well.
2. I needed to check the contents of another element right after changing the value of the slider. So, I have to wrap changeRangeInputValue's body within a promise, otherwise Cypress will happily move on to the next command in queue, and check the contents of slider-dependent elements _before_ they actually change (see the docs for cy.then for more info on this).

Hopefully I didn't misunderstand any Cypress or DOM details - but the above solution, adapted from @beausmith 's, worked well for me, letting me test sliders on my project.

[rub]

Thanks @eFFeeMMe, that works great!