CODEWITHSUNDEEP
electrondrag-and-dropcypress
Ben Koren Kruiger
Ben Koren Kruiger

Reputation: 141

Cypress: mouseover mousedown mousemove mouseup Not working

So the issue is pretty simple:

[enter image description here

[enter image description here

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

enter image description here

enter image description here

Upvotes: 7

Views: 9911

Answers (4)

binaryfunt
binaryfunt

Reputation: 7127

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)

Upvotes: 0

Broshi
Broshi

Reputation: 3592

Try using cypress-real-events:

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

Upvotes: 4

Pablo Ezequiel Leone
Pablo Ezequiel Leone

Reputation: 1387

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.

Upvotes: 2

cypher_null
cypher_null

Reputation: 672

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)

Upvotes: 3

Related Questions