Work Around for drag and drop in playwright python

Viewed 861

I am trying to implement a drag and drop functionality(I was able to see there is an open issue regarding this) with the currently available mouse actions but so far not able to do that. so i am looking for a work around for that, is there anyway we can implement drag and drop in playwright python. below is the code that i am trying to use.

await page.mouse.move(472, 399)
await page.mouse.down()
await page.mouse.move(991, 313)
await page.mouse.up()

Thank you

1 Answers

I assume in your case the HTML5 drag and drop is not working.

Unfortunately at the time of writing this the current playwright python (1.10.x) won't trigger dragstart and drop events through the mouse.down, mouse.move and mouse.up API.

The following code however should work (using sync_api),

# This element should have the draggable attribute value as true
src_elem = page.query_selector('div.foo')
# This element should be the element as the drop target
dest_elem = page.query_selector('div.bar')
# Create a data transfer JSHandle instance
data_transfer = page.evaluate_handle('() => new DataTransfer()')
src_elem.dispatch_event('dragstart', { 'dataTransfer': data_transfer })
dest_elem.dispatch_event('drop', { 'dataTransfer': data_transfer })
# Now check whether the dropped effect is achieved
dest_elem.wait_for_selector('ENTER SELECTOR AFTER DROP EFFECT')
Related