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.

For clarification: Was this Cypress 13 or already Cypress 14? — Marcus, Oct 25 '22 at 12:02

score 6 · Accepted Answer · edited May 21 '22 at 13:07

6

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

edited May 21 '22 at 13:07

marc_s

732,580
175
1,330
1,459

answered Apr 22 '22 at 11:43

mmonteirocl

382
2
16

1

Note using `realMouseDown` limits your test to chromium based browsers (excludes Firefox). – Yolandi Sep 15 '22 at 20:33
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 – mmonteirocl Sep 21 '22 at 10:54
2

Sadly, you've not given a reproducible example. Can you improve your question by adding some code? Better, a repo? – Yolandi Sep 30 '22 at 05:41
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 @Yolandi – mmonteirocl Oct 03 '22 at 06:48
I have tested the plugin and it works pretty well with complex dnd-handler, multiple horizontal and vertical lists, and inside an Iframe... lovely! – Alte Schule Jul 16 '23 at 15:27

SSH · Answer 2 · 2022-10-05T08:24:23.500

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

edited Oct 05 '22 at 08:24

answered Sep 13 '22 at 12:09

SSH

29
2

2

You just copy / pasted my solution and provided it as "your solution" .... :( Its identical – mmonteirocl Sep 14 '22 at 08:11
1

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. – SSH Sep 15 '22 at 13:30
It's also "noisy" - why assign the parameters to new constants? – Yolandi Sep 15 '22 at 20:32
2

Thanks it took me a while to understand the 'noisy-ness', I'm new to coding and Javascipt especially. I adjusted it. – SSH Oct 05 '22 at 08:25

score 0 · Answer 3 · answered Jul 16 '23 at 06:33

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

Cypress - Drag & drop - Angular CDK

3 Answers3

Linked