How to test Ant Design slider with Cypress? - reactjs

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/