[Feature] More granular drag and drop API

[talldan]

The existing dragAndDrop api is useful, but there are a few use cases that it doesn't fulfil:

• Dragging to a position, and before dropping, asserting that a drop zone or drop indicator is visible in the UI
• Handling transfer data (not 100% sure, but I think this is why dragAndDrop doesn't work for my use-case) along with dragEnter, dragOver and drop events
• Dragging and dropping files (also #13364, #10667, #9823)

For some prior art, puppeteer has a slightly more granular API:

// Requires `page.setDragInterception( true )` in test setup
const dragData = await page.mouse.drag( sourceElementHandle, target );
await page.mouse.dragEnter( target, dragData );
await page.mouse.dragOver( target, dragData );
expect( dropZone ).toBeVisible(); // this line is pseudocode, I don't think puppeteer supports `toBeVisible`.
await page.mouse.drop( target, dragData );

Another idea is an API like:

const { dragTo, drop } = await drag( locator );

or

const { dragTo, drop } = await dragFile( file );

Where the transferData is encapsulated using a closure and doesn't need to be passed to each function.

(credit to @kevin940726 for the latter idea in https://github.com/WordPress/gutenberg/pull/42722)

[rwoll]

Added collecting feedback label. Thanks for the request!

Is this something you'd be interested in working on a PR for? If so, we can iterate on the API to ensure it's something Playwright would accept before starting the implemention.

Thanks!

[talldan]

Is this something you'd be interested in working on a PR for?

Yep, that's a possibility. It'd be a first code contribution, so it would probably need a lot of iteration 😄

[delijah]

Any progress on this?