How to drag and drop using cypress

Question

I have a slider from 0% to 100% that i want to write an e2e test for. I've test everything I can think of including the below. I get no error messages but nothing happens. The mousemove seem to trigger on the same spot as the mousedown no matter what value a put in the x coordinate. The mouseEvent moves a few pixels when I use right instead fo pageX or pageY but not the actual element.

 cy.get('[data-cy="slider"]').trigger('mousedown').trigger('mousemove', { which: 1, pageX: 800, pageY: 569 });

Answer 1

I have got a time slider and the following code works for me. Could you please try the following. Here We specify { which: 1 } because dragula will ignore a mousedown if it's not a left click ( comments from cypress samples) Also use {force:true} in commands,force events to happen.

cy.get('[data-cy="slider"]')
   .trigger('mousedown', { which: 1 }, { force: true })
   .trigger('mousemove', 800, 569, { force: true })
   .trigger('mouseup');