Cypress - Drag & drop - Angular CDK

Issue

Having a simple implementation of the Angular CDK drag & drop, with cypress. Having latest versions of all packages, all the questions & solutions around wont work.

Basically, the drag & drop wont eve fire.

Tried with

• https://www.npmjs.com/package/@4tw/cypress-drag-drop
• https://docs.cypress.io/api/commands/trigger
• Even with the answers to this "solved" question on stackoverflow How to implement drag and drop in cypress test?

But nothing would work.

Solution

When we found the problem, we manage to find the solution.

In a nutshell, the problem is that angular material - cdk, in latest versions, they are blocking the "drag and drop" from screen readers, for accessibility purposes. Which is ok, the problem is that the library / solutions posted, they were considered as "screen readers" as the "buttons" was 0 in the event.

In some of the cases, just by providing the "buttons = 1" would be enough, but that wasnt our case.

Because our case was a complex Drag & Drop where, you could only drag from the "handle" and you would be limited in the area of the list (so only move in Y axis) these solutions would not work.

The only & best solution that worked for US so far has been the following one: Using the cypress plugin cypress-real-events

const selectorForDraggingElementOrHanlde = 'whatever css selector u need'
const selectorWhereToDropTheElement = 'whatever other css selector u need'

cy.get(selectorForDraggingElementOrHanlde)
        .realMouseDown({ button: 'left', position: 'center' })
        .realMouseMove(0, 10, { position: 'center' });
cy.wait(200) // In our case, we wait 200ms cause we have animations which we are sure that take this amount of time
cy.get(selectorWhereToDropTheElement ).realMouseMove(0, 0, { position: 'center' }).realMouseUp();

Answered By - mmonteirocl