Skip to content

[Feature] More granular drag and drop API #16437

@talldan

Description

@talldan

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

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 WordPress/gutenberg#42722)

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions