Unable to perform image cropping in cypress

[Parth909]

Current behavior

Instead of Dragging and drawing the rectangular box (which represents the cropped image) it is simply perform the action like mousedown, mousemove, dragstart, dragend but the desired behaviour of forming a rectange cannot be seen

Desired behavior

Cypress should form a rectange on the image when dragstart & dragend events are triggered

Test code to reproduce

Using default viewport

    cy.get("[data-test=image-to-crop]")
      .find("img")
      .should("be.visible")
      .trigger("click", 70, 71, {
        button: 1,
        force: true,
      })
      .trigger("mousedown", 70, 71, {
        button: 1,
        force: true,
      })
      .trigger("mousemove", 292, 197, {
        button: 1,
        force: true,
      })
      // .trigger("dragstart", 50, 50, {
      //   button: 1,
      //   force: true,
      // })
      // .trigger("dragend", 262, 197, {
      //   button: 1,
      //   force: true,
      // })
      .trigger("mouseup", { force: true })
      .wait(2000);

===> Working screenshot when manually tested

===> Non-working cypress screenshot

Cypress Version

10.0.2

Other

I think cypress is useful for performing normal tests but when doing something different like this it doesn't work

[marktnoonan]

Hi @Parth909, while I'd love something simpler that worked out of the box, I have generally been able to get this type of testing to work. Here, for example, is a test that we use to drag our columns around in the Cypress repo:

cypress/packages/app/src/runner/ResizablePanels.cy.tsx

Lines 18 to 20 in 27fafde

	cy.get(`[data-cy="${panel}ResizeHandle"]`).trigger('mousedown', { eventConstructor: 'MouseEvent' })
	.trigger('mousemove', { clientX: x })
	.trigger('mouseup', { eventConstructor: 'MouseEvent' })

- I don't have enough information to know for sure, but this may help you get your own test dialed in.

What often seems to be the case is that different implementations of drag and drop have subtle differences in what they are listening to. If you can provide a repo that shows the problem we can confirm whether there's a bug in Cypress.

[tomdelahaba]

Same problem on my side. I tried "all" possible solutions they advice everywhere, nothing worked. Tried multiple codes, nothing...

My particular problem (seems similar to yours) is that I have canvas in which I am rendering something and turning it all around based on mousemove actions. But the cypress mousemove is triggering just once so even if you set the locations by 12378123987px far away, its always just moved the mouse once (and even this is not working properly). I am working with canvas as you do I suppose.

Another problem for me is that options {clientX: coords.x, clientY: coords.y} are transcripted into clientx, clienty based on cypress gui. And in that case the pointer seems to be always in the middle of the screen no matter what coordinates I provide in there.

[lmiller1990]

Hi, just saw this issue. I worked on a drawing app using canvas and was able to test it using Cypress a long time ago and had some similar problems (in that it wasn't as simple as automating a regular website with Cypress).

I don't know if I still have access to the source, but I remember this was a bit painful to set up. I tried both Playwright and Nightwatch, and couldn't get either to work, had better luck with Cypress I recall having to do something specific to get this to work.

Can definitely make some basic click-drag-drop recipes but I'm not sure that's going to be as ideal as actually trying to write the exact test you are trying to write. Can you provide a minimal reproduction by any chance?

The way I usually work through this is do whatever I want with regular JS (usually hacking something in the console) then create a custom command to wrap it. Since Cypress is just using the same JS/events you'd have access to anyway, if it's possible to do, Cypress can certainly do it. It's like just a matter of figuring out exactly what DOM events are triggered/dispatched when you click + drag, and then making Cypress do the same.

But the cypress mousemove is triggering just once

I have a feeling when you drag in a browser, it's going to constantly trigger mousemove - so perhaps the above snippet is incorrectly mimicking what a browser really does. Will need to get my hands on your code to actually experiment more, though.

Let me know how you'd like to proceed! I'm pretty curious how how we can implement this as well.

[tomdelahaba]

@lmiller1990 thanks a lot. Unfortunately I found out that this problem will be more "canvas related" than cypress related (probably). I have found out, that when I try to hack it in console, the mousemove action is being dispatched without any problem, but somehow it does not cause rerender of the canvas itself.

Unfortunately I do not have any code that I should share at this moment, but creating some simple canvas with mousemoveeventhandler rerendering the canvas image should be enough... Than, calling from the console:

var el = document.querySelector('#testcanvas');
el.dispatchEvent(new MouseEvent('mousedown', {bubbles: true, force: true}))
el.dispatchEvent(new MouseEvent('mousemove', {clientX: 300, clientY: 600, bubbles: true, force: true}))
el.dispatchEvent(new MouseEvent('mouseup', {bubbles: true, force: true}))

Should rerender the canvas as well, unfortunately it does not. I have to mention, I tried multiple solutions I found over the internet (mostly stackoverflow and github), I tried using multiple "delta" moves interpolated with cypress promise map approach, I tried several different definitions of the mouseevent, I tried triggering by clientX & Y in the options, defining the locations inside the trigger method, forcing, which-ing, bubbling, etc etc... Nothing worked... I am already on this one for couple of hours and nothing worked...

[lmiller1990]

So the goal here is to click and drag on a canvas? I did something like this once in a VERY old branch in Cypress

Component: https://github.com/cypress-io/cypress/blob/cy-draw/my-project/src/Canvas/Canvas.tsx
Test: https://github.com/cypress-io/cypress/blob/cy-draw/my-project/cypress/component/Canvas.spec.tsx

No idea if this is useful and I am not sure how to even run this project. If the goal is simply to click + drag + let go of the mouse, this might be useful. The app in question was a "drawing" app like Paint, and the test was to click a shape, drag and drop to draw it.