Unable to perform image cropping in cypress

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

[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.

[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.