Simulate Drag and Drop Between Elements

[elixir-wallaby]

Simulate Drag and Drop Between Elements

[michallepicki]

Update: @jangromko is working on adding some touch support to Wallaby, we're basing the API on what's available in Selenium WebDriver Wire Protocol and what works in Chrome (doesn't work in Firefox for some reason). Expect a PR with tests + new commands in a few weeks (similar to #453 )

[keathley]

What sort of api were you thinking about for this? I'd be interested to see a sample implementation. Otherwise if this is an issue you're facing right now you can always use execute_script/2 and just do drag and drop directly with JS.

[zolrath]

I would think it would be nice to separate the drag and drop actions to allow partial application for reuse.

session
|> drag("#garbage")
|> drop("#trash")

This way you could save off everything before the drop into a function and call it with a new drop target easily for multiple tests.

[keathley]

I think the way we'd have to do this is with the perform actions endpoint: https://www.w3.org/TR/webdriver/#dfn-perform-actions.

We'd have to construct the list of actions internally and then execute them. I'm not sure what the level of effort would be to construct the actions since I'm not exactly sure what format the actions have to be in or if they would work with our existing functionality.

[michallepicki]

Selenium JSON Wire Protocol has some touch-related commands (see Selenium Wiki) and I am currently using touch_scroll like this:

  def touch_scroll(session, element, x_offset, y_offset) do
    {:ok, _} =
      request(:post, "#{session.url}/touch/scroll", %{
        element: element.id,
        xoffset: x_offset,
        yoffset: y_offset
      })

    session
  end

  def touch_scroll(session, x_offset, y_offset) do
    {:ok, _} =
      request(:post, "#{session.url}/touch/scroll", %{xoffset: x_offset, yoffset: y_offset})

    session
  end

We could look into whether this is also supported on chromedriver and add these commands to Wallaby

[keathley]

That sounds good to me. I believe that chromedriver had something similar so we can probably take advantage of that.

[oliverswitzer]

@michallepicki just checking -- was any progress made on this?

[michallepicki]

There is a stale PR by @jangromko , needs to be updated: #480 - @oliverswitzer is this something you'd want to pick up?

edit: Looks like @jangromko updated the PR and there are no conflicts now.
edit2: This was released in Wallaby 0.28 :)

[michallepicki]

@mhanberg I think this can be closed?

[mhanberg]

@michallepicki @jangromko were you ever able to get drag and drop working with the touch commands?

[michallepicki]

@mhanberg I think there are different use cases, for some you want the touch commands (naming from Wallaby.WebdriverClient) like touch_down + touch_move + touch_up, but for just drag and drop the first PR linked in this issue added regular mouse events support. So there are button_down + move_mouse_to + button_up that can be used for drag and drop. Should be still working since integration tests were added?

[mhanberg]

We are trying to do it at work currently, and it is not working, but I was wondering if it has something to do with the JS api we are using to accomplish it.

I also noticed that Capybara still uses some JS to do drag and drop, so I was wondering if it actually worked without the JS haha.

Thanks for the response, I'll take a closer look at our tests.