Hold Shift + Left Mouse button in Cypress

I want to simulate the following test:

On a canvas on the page, from point "A" start holding Shift button first and then holding the left mouse button while still holding the Shift button. then move the mouse to point "B" while still holding both buttons and release left mouse button at point "B". how can you do that in cypress?

Answer

“Hey! Great question. I’ve run into this before…

To simulate holding the Shift key and dragging the mouse from point A to point B in Cypress, you’ll need to trigger a combination of mouse and keyboard events manually, since Cypress doesn’t have native drag-and drop with modifier keys like Shift.

Here’s how you can approach it:

---

✅ Step-by-step Cypress approach:

Assuming canvas is your target element:

cy.get('canvas')
  .trigger('mousedown', {
    button: 0, // left click
    clientX: startX,
    clientY: startY,
    shiftKey: true
  })
  .trigger('mousemove', {
    clientX: endX,
    clientY: endY,
    shiftKey: true
  })
  .trigger('mouseup', {
    button: 0,
    clientX: endX,
    clientY: endY,
    shiftKey: true
  });

---

🔁 Full Example (with coordinates):

const startX = 100;
const startY = 100;
const endX = 300;
const endY = 300;

cy.get('canvas')
  .trigger('mousedown', {
    button: 0,
    clientX: startX,
    clientY: startY,
    shiftKey: true
  })
  .trigger('mousemove', {
    clientX: endX,
    clientY: endY,
    shiftKey: true
  })
  .trigger('mouseup', {
    button: 0,
    clientX: endX,
    clientY: endY,
    shiftKey: true
  });

---

🧠 Notes:

• You must specify shiftKey: true in all events to simulate holding Shift.

• clientX and clientY simulate the coordinates of the mouse.

• Replace canvas with the actual selector of your canvas element.

• If you're drawing on canvas, make sure the app listens to these DOM events accordingly.