Cypress: click and drag an image? mousedown & mousemove not working

Question

I'm trying to test a gallery for the first time with Cypress but I'm having trouble trying to get the mouse events to work:

  cy.get("img#front").should("be.visible");

  cy.get("img#front")
    .trigger("mousedown", { which: 1, pageX: 600, pageY: 100 })
    .trigger("mousemove", { which: 1, pageX: -600, pageY: 100 })
    .trigger("mouseup");
});

The image is visible on the page but when I do mouse down and mouse move on it nothing is happening. What I'm trying to do is press the mouse down and drag it left so the image changes to the next one in the gallery.

Answer 1

Using XY coordinates, This is a simple example with the Cypress custom command, which I tried and it works for me,

 * This reusable method is used to handle React drag and drop within cypress test.
 */
Cypress.Commands.add("dragAndDrop", (subject, target, dragIndex, dropIndex) => {
    cy.get(subject).should("be.visible", { timeout: 2000 });
    Cypress.log({
        name: "DRAGNDROP",
        message: `Dragging element ${subject} to ${target}`,
        consoleProps: () => {
            return {
                subject: subject,
                target: target
            };
        }
    });
    const BUTTON_INDEX = 0;
    const SLOPPY_CLICK_THRESHOLD = 10;
    cy.get(target).eq(dropIndex).then($target => {
        let coordsDrop = $target[0].getBoundingClientRect();
        cy.get(subject).eq(dragIndex).then(subject => {
            const coordsDrag = subject[0].getBoundingClientRect();
            cy.wrap(subject)
            .trigger("mousedown", {
                button: BUTTON_INDEX,
                force: true
            })
            .trigger("mousemove", {
                button: BUTTON_INDEX,
                clientX: coordsDrag.x,
                clientY: coordsDrag.y,
                force: true
            })
            .wait(1000);
           cy.get('body')
            .trigger("mousemove", {
                button: BUTTON_INDEX,
                clientX: coordsDrop.x + SLOPPY_CLICK_THRESHOLD,
                clientY: coordsDrop.y,
                force: true
            });
           cy.get('body')
            .trigger("mousemove", {
                button: BUTTON_INDEX,
                clientX: coordsDrop.x,
                clientY: coordsDrop.y + SLOPPY_CLICK_THRESHOLD,
                force: true
            })
            .wait(1000);  
            cy.get(target)
            .trigger("mouseup");
        });
    });
});

in your cypress spec cy.dragAndDrop(dragloc, droploc, 0, 0); You can also try with a few changes

extracted from https://github.com/cypress-io/cypress/issues/3942

Answer 2

Click and drag within an image or canvas element has been the bane of my work-existence for a while. To be honest, I stumbled onto this post explicitly because I'm looking for something that will work in my current situation.

Do not be deterred, friend. I have a few examples that have worked for me in the past, hopefully this helps:

    cy.get(".canvas-wrap > canvas")
      .trigger("mousedown", 715, 155, {
        button: 0,
        force: true,
        eventConstructor: "MouseEvent"
      })
      .trigger("mousemove", 100, 100, {
        button: 0,
        force: true,
        eventConstructor: "MouseEvent"
      })
      .trigger("mouseup", 100, 100, {
        button: 0,
        force: true,
        eventConstructor: "MouseEvent"
      });

or

    cy.get(".canvas-wrap")
      .trigger("mousedown", 200, 200, { button: 0 })
      .trigger("mousemove", { clientX: -250, clientY: -200 })
      .trigger("mouseup", { force: true });

Anyway, I'd recommend experimenting with passing in button or event options, or just trying force: true and seeing if that gets you anywhere. All the best