Cypress - Drag & drop - Angular CDK

Question

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.

Agra

For clarification: Was this Cypress 13 or already Cypress 14? – Hygro

Answer 1

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();

Agra

Note using realMouseDown limits your test to chromium based browsers (excludes Firefox). – Recreant

Im aware of this. Still is the only solution I found that works with the cdk drag and drop. If you know a better solution that works in all browsers. Please feel free to add it as an answer to this issue – Agra

Sadly, you've not given a reproducible example. Can you improve your question by adding some code? Better, a repo? – Recreant

Cannot provide the drag & drop code. It belongs to my company. Still, as I mentioned in the question / answer. Any drag and drop with the CDK latest and a "drag handler" should have the same issue @Recreant – Agra

I have tested the plugin and it works pretty well with complex dnd-handler, multiple horizontal and vertical lists, and inside an Iframe... lovely! – External

Answer 2

The solution provided by mmonteirocl above worked perfectly for me as well. I implemented it as a custom command in our commands.js:

Cypress.Commands.add('dragAndDrop', (subjectSelector, targetSelector) => {
    cy.get(subjectSelector)
        .realMouseDown({ button: 'left', position: 'center' })
        .realMouseMove(0, 10, { position: 'center' });
    cy.get(targetSelector).realMouseMove(0, 0, { position: 'center' }).realMouseUp();
});

Then called it the test like:

cy.dragAndDrop(subjectSelector, targetSelector);

Jeremiah

You just copy / pasted my solution and provided it as "your solution" .... :( Its identical – Agra

Hi sorry this was not my intention at all. But I couldn't comment on your solution because of the minimum contributor score. Just wanted to clarify the exact implementation as I've used it, all Kudo's go to you. – Jeremiah

It's also "noisy" - why assign the parameters to new constants? – Recreant

Thanks it took me a while to understand the 'noisy-ness', I'm new to coding and Javascipt especially. I adjusted it. – Jeremiah

Answer 3

I got it working when using drag placeholder without any additional library. I'm not clear on why I have to write this way but it seems to work.

cy.get(dragLocator)
  .trigger('mousedown', { button: 0, bubbles: true})
  .trigger('mousemove', { pageX: sourceX, pageY: sourceY })

cy.get('body')
  .trigger('mousemove', { pageX: sourceX, pageY: targetY })
  .trigger('mouseup', { button: 0, bubbles: true });

Thaddeusthaddus

Answer 4

this worker for Angular material cdk drag and drop

cy.get('.board-draggable-card') // draggable
            .trigger('mousedown', { button: 0, bubbles: true })
            .trigger('mousemove', { pageX: 10, pageY: 0 });

        cy.get('.board-cards-box') // droppable
        
            .trigger('mousemove', { position: 'center' })
            .trigger('mouseup', { button: 0, bubbles: true });

Concussion

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Secularism