Cypress: mouseover mousedown mousemove mouseup Not working

Question

So the issue is pretty simple:

• clicking on circle and moving the line

[

• Desired output

[

Now I'm trying to execute the exact thing with Cypress with the following code (will show all veriations):

cy.get("my element")
.tigger("mouseover")
.trigger("mousedown", { which: 1})
.trigger("mousemove", {pageX: 100,pageY: 100,which: 1})
.trigger("mouseup", { force: true });

And I tried so many variations of this code:
like adding movmentX, movmentY and clientX, clientY to the "mousemove" trigger
And also button: 0 and force: true to the "mousedown" trigger And nothing worked

It is a simple press with left key of the mouse moving it to the wanted position and losing the mouse press.
It is like drag and drop BUT not exactly because it stays in the same HTML element

What am I missing here?

Node version: 16.13.0 OS: macOS M1

Website : https://geoman.io/geojson-editor

From cypress chrome

Answer 1

I also had huge problems with mousemove

What helped for me was adding all possible coordinates (client, page and screen).

.trigger('mousemove', {clientX: 100, clientY: 100, screenX: 100, screenY: 100, pageX: 100, pageY: 100 })

Maybe try this:

cy.get("my element")
.trigger("mouseover")
.trigger("mousedown", { which: 1})
.trigger("mousemove", {clientX: 100, clientY: 100, screenX: 100, screenY: 100, pageX: 100, pageY: 100 })
.trigger("mouseup", { which: 1 })

(also you don't need to add "which" to mousemove as the left button is still pressed from the previous command)

Answer 2

This worked for me https://github.com/cypress-io/cypress/issues/1542#issuecomment-1040810295

Seems that mousemove is not going to work unless you call it again after changing the coordinates in a previous call.