5

So the issue is pretty simple:

  • clicking on circle and moving the line

[enter image description here

  • Desired output

[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

3 Answers 3

2

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)

5
  • 2
    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 Nov 10, 2021 at 11:13
  • I think it might did the job in a second thought! cheers!! Nov 10, 2021 at 13:12
  • Nice, I remember spending quite some time on a similar problem a couple of weeks ago Nov 10, 2021 at 13:40
  • 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) Nov 10, 2021 at 13:51
  • 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 ? Dec 13, 2021 at 21:58
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.

1

Try using cypress-real-events:

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.