How to test Ant Design slider with Cypress?

Question

I have a slider from Ant Design (3.23.6) which generates html:

  <div className="ant-slider-rail"></div>
  <div className="ant-slider-track ant-slider-track-1" style="left: 45%; right: auto; width: 55%;"></div>
  <div className="ant-slider-step">
    <span className="ant-slider-dot" style="left: 0%;"></span>
    <span className="ant-slider-dot ant-slider-dot-active" style="left: 50%;"></span>
    <span className="ant-slider-dot ant-slider-dot-active" style="left: 100%;"></span>
  </div>
  <div tabIndex="0" className="ant-slider-handle ant-slider-handle-1" role="slider" aria-valuemin="0"
       aria-valuemax="200000" aria-valuenow="90000" aria-disabled="false"
       style="left: 45%; right: auto; transform: translateX(-50%);"></div>
  <div tabIndex="0" className="ant-slider-handle ant-slider-handle-2" role="slider" aria-valuemin="0"
       aria-valuemax="200000" aria-valuenow="200000" aria-disabled="false"
       style="left: 100%; right: auto; transform: translateX(-50%);"></div>
  <div className="ant-slider-mark">
    <span className="ant-slider-mark-text" style="transform: translateX(-50%); left: 0%;">0</span>
    <span className="ant-slider-mark-text ant-slider-mark-text-active" style="transform: translateX(-50%); left: 50%;">
      100k
    </span>
    <span 
      className="ant-slider-mark-text ant-slider-mark-text-active"
      style="transform: translateX(-50%); left: 100%;"
    >
      200k
    </span>
  </div>
</div> 

I am trying to move left handle to the right using Cypress 4.5.0:

cy.get('[data-cy=salarySlider]').find('.ant-slider-handle-1')
    .trigger('mousedown', { which: 1 })
    .trigger('mousemove', 40, 0)
    .trigger('mouseup')

handle seems to be selected but there is no movement. No errors too.

Any idea?

Answer 1

Late answer, and for Ant Design v4 slider with marks (.ant-slider-dots) but it could help. So here is how we do it (TypeScript version) :

// helper to grab slider handles by index
const slider = (sliderDot: number): string => ` .ant-slider-dot:eq(${sliderDot})`;

it('tests Ant Design v4 slider', () => {
  cy.get(slider(2)).click();
  cy.get(slider(3)).click();
  // now slider is set on 2-3 range
});

This could be more tricky without marks.

https://ant.design/components/slider/