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
But nothing would work.
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();