Not able to drag element using mouse.down and mouse.move

[amittendulkar]

I am trying to drag drop from element1 to element2. This had worked for me with another site. However, I am not able to work it out for the current web application (so my playwright installation or the way of writing script might not be the issue here).

I am using playwright 1.10.0 and using chromium browser.

Here is my sample code,

    page.query_selector(':nth-match(:text("id"), 2)').scroll_into_view_if_needed()
    src_box = page.query_selector('ul.drag-item >> xpath=li[2]').bounding_box()
    tgt_box = page.query_selector('text=ADD VARIABLE').bounding_box()
    mouse: Mouse = page.mouse
    mouse.move(src_box['x']+src_box['width']/2, src_box['y']+src_box['height']/2)
    print('Mouse move')
    mouse.down()
    print('Mouse down')
    mouse.move(tgt_box['x']+tgt_box['width']/2, tgt_box['y']+tgt_box['height']/2, steps=10)
    print('Mouse move with down')
    mouse.up()
    print('Mouse up')
    page.wait_for_selector(':nth-match(:text("id"), 4)')

I can see the mouse pointer changing to draggable mouse pointer. So the source element bounding box coordinates are correct. There is no visible change in the browser indicating the element was dragged.

The script fails on the last line waiting for the 4th match of the 'id' text.

What might be happening here? Any tips?

[amittendulkar]

I think HTML5 drag and drop are not triggered by mouse events.

One suggested solution is to use dispatch events,
puppeteer/puppeteer#1366 (comment)

How can I use this in the playwright-python context?
I can use the element_handle.dispatch_event(). However, the documentation is not very clear on how to use each event (especially pass properties).

[mxschmitt]

Regarding the dispatch_event(), these tests should give you some more understanding of how you can use it.

The overall feature, "drag'n drop" is currently an upstream feature which is already in progress: microsoft/playwright#1094

Maybe @JoelEinbinder knows more regarding your specific case and why its not working.

[amittendulkar]

Thanks the above solution worked for me (I tried in Chromium). In short the following strategy works for HTML5 drag-drop,

from playwright.sync_api import sync_playwright, Page, ElementHandle

def drag_and_drop(page: Page, src_elem: ElementHandle, dest_elem: ElementHandle, wait_selector: str):
    # src_elem should be the element containing attribute draggable="true"
    # dest_elem should be the element that is supposed to be a drop target
    # The wait_selector should be the child element selector under the dest_elem (that appear after the drop action)
    dataTransfer = page.evaluate_handle("() => new DataTransfer()")
    src_elem.dispatch_event('dragstart', {"dataTransfer": dataTransfer})
    dest_elem.dispatch_event('drop', {"dataTransfer": dataTransfer})
    dest_elem.wait_for_selector(wait_selector)

Feel free to close this issue unless you think it should remain open till mouse.down , mouse.move, and mouse.up events trigger dragstart and eventually drop events.

[mxschmitt]

Thanks for confirming. I created a PR to fix the type for the dispatch_event in the docs, so I will close it.
.microsoft/playwright.dev#175