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

Tee

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)

Reese

Just spotted a type in line 2 of the code there was an 'r' missing from .trigger("mouseover") but I doubt that this causes the error – Reese

I think it might did the job in a second thought! cheers!! – Tee

Nice, I remember spending quite some time on a similar problem a couple of weeks ago – Reese

Well it worked for another test i had but this specific test is still doing the same problem for some reason.(trying to figure out why) – Tee

I also have problem in mousemove event, I tried adding all possible co-ordinates as suggested {clientX: 100, clientY: 100, screenX: 100, screenY: 100, pageX: 100, pageY: 100 } yet this does not work unfortunately. Any other suggestions ? – Urn

Answer 2

Try using cypress-real-events:

cy.get('#element')
.realMouseDown({ position: "center" })
.realMouseMove(50, 0)
.realMouseUp()

Fotina

Answer 3

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.

Jetpropelled

Answer 4

The implementation details of performing a drag and drop in Cypress by triggering events may depend on the precise nature of the events being listened to in your code and/or 3rd party code from the libraries you are using.

It may be necessary to use devtools to debug what happens when you drag and drop in real life as well as the Cypress test window.

In devtools you can turn on breakpoints for event listeners for specific types of events and step through the relevant code (you may want to "ignore listing" for 3rd party code). You can then insert breakpoints in the same points in the Cypress window devtools and compare what happens.

For example, in my app we were successfully using this to perform a drag and drop to resize an in-house sidebar:

cy.get('#c-sidebar .resize-bar')
  .trigger('mousedown')
  .trigger('mousemove', { clientX: x, clientY: y})
  .trigger('mouseup', { force: true })

But this was not working for dragging and dropping tabs in a tabbed interface leveraging a 3rd party library (lumino). Through debugging I found out that it was listening for pointerdown instead of mousedown and needed the button option. I also found out it was testing the clientX and clientY of the drag to make sure they were a specific threshold away from the starting location. So in this case the solution was:

cy.get('.lm-TabBar-tabLabel')
  .last()
  .trigger('pointerdown', { button: 0 })
  .trigger('pointermove', { clientX: x, clientY: y, force: true })
  .trigger('pointerup', { button: 0, clientX: x, clientY: y, force: true })

(I don't know if force is really needed but is there for good measure)

Myceto