Testing drag and drop in implementation-independent way

[mvasin]

What would you like?

On the application-under-test side, drag and drop can be implemented using dragstart / dragover / drop / dragend events (but that won't work on mobile), or using mousedown / mousemove / mouseup events. Well, maybe someone would even implement drag and drop with a click event followed by mouseenter - a question of fantasy. That's why the internet is filled with questions on how to test drag and drop and all the solutions are implementation-specific.

Another example: imagine you start dragging with cy.get('foo').trigger('dragstart', {dataTransfer: new DataTransfer()}). Then the event handler within the app would hook up some data onto the dataTransfer object. And when we trigger dragend and drop events, we need to bake into the testing code what the app added to dataTransfer at the dragstart stage, something that is an implementation detail and a subject to change. That's fragile.

I'm curious, is there a way to make the browser trigger all the events it would trigger when a user physically clicks a mouse button instead of guessing which event handler to fire?

Why is this needed?

Testing code should not be intertangled with implementation. When testing drag and drop, we don't want to guess which handlers are used and have our test broken if implementation changes while keeping the same user-facing behavior.

Related issues: #6161, #16992, #16060, #3942, #3359, #1752, #1542, #386

[mvasin]

I discovered that the proposal duplicates the cy.mouse proposal from #857, so I'll close it.

The discussion is supposed to be continued in #845