HTML5 backend is hard to test with Selenium / ChromeDriver / Capybara

I’m working on upgrading react-dnd in my app. I’ve found that the Capybara feature spec for a drag-and-drop feature is broken with react-dnd v7 and the html5 backend, while works as expected with react-dnd v3 and react-dnd-touch-backend.

In particular, the test uses Capybara’s drag_to method, like this:

  it 'allows dragging and dropping blocks' do
    visit "/courses/#{Course.last.slug}/timeline"
    click_button 'Arrange Timeline'

    first_block = find('.week-1 .week__block-list > li:nth-child(1)')
    expect(first_block).to have_content 'Block 1'
    later_block = find('.week-2 .week__block-list > li:nth-child(1)')

    first_block.drag_to(later_block)
    expect(find('.week-2 .week__block-list > li:nth-child(1)')).to have_content 'Block 1'
  end

I tried a few other ways to script the drag-and-drop interaction as well, such as this:

page.driver.browser.action.click_and_hold(first_block.native).move_to(later_block.native).release.perform

In screenshots, the dragged item shows up in the dragging styling, in its original position. Watching the test run when it’s not in headless mode, I see that it treats the drag location as the actual mouse location rather than the scripted drag target.

To Reproduce Steps to reproduce the behavior:

1. Write a Capybara browser test using ChromeDriver
2. Script a drag-and-drop interaction using Capybara’s drag_to helper
3. The dragged element will enter dragging state, but will not be dragged to the specified node.

Expected behavior Drag and drop actions should be scriptable through Selenium for the HTML5 backend in the same way that they are with react-dnd-touch-backend (or in some other well-documented and discoverable way for Selenium users).

Screenshots Capybara screenshot from failing test:

Screenshot of behavior during the behavior under test, as performed manually:

Desktop:

• OS: Debian Stretch
• Browser: Chrome 70.0.3538.110
• ChromeDriver 2.44.609551
• Selenium 3.141.0
• Capybara 3.12.0

Additional context I realize this may not be a react-dnd bug per se, but the given that the desired behavior is present with react-dnd-touch-backend but not (at least) the version 7 html5 backend, I thought this project might be the best look for help.

If there are other recommended ways to test react-dnd features with Selenium and ChromeDriver, I’ll be eager to find them.

Here’s the commit for my app that upgrades react-dnd and moves the HTML5 backend: https://github.com/WikiEducationFoundation/WikiEduDashboard/commit/b0705f1c4bfbe6b9dab63c7095ba349e63aff430

And the test failure it causes: https://travis-ci.org/WikiEducationFoundation/WikiEduDashboard/jobs/462004273#L5905

[Burkazoid]

We started using react-dnd-touch-backend but experienced the same issue with drag_to not working; however, after a bit of experimentation, the following did work:

def drag_from_to(draggable, droppable)
  action = page.driver.browser.action
  action.click_and_hold(draggable.native).perform
  action.move_to(droppable.native).perform
  action.move_by(0, 0).perform
  action.release.perform
end

The webdriver.action.move_by(0, 0).perform line was key to get it working, oddly.

We did try this with our previous implementation without the use of the touch backend, but it still didn’t work. Anyway, I thought this might help other people experiencing the same problems.

[glenpike]

For anyone else discovering this, I had to add 3 items to my list and drag the first item to the last in order to trigger drag and drop using SortableJS. It works fine with the Capybara code. Here is my (Rails) test for a table containing ‘supporters’)

      it 'I can change the order of the event supporters', js: true do
        third_supporter
        visit path

        expect(another_supporter.reload.event_supporters.first.order).to be(nil)
        expect(supporter.reload.event_supporters.first.order).to be(nil)

        within table do
          elements = page.all('.js-move')
          draggable = elements.first
          droppable = elements.last
          draggable.drag_to(droppable)
        end
        expect(another_supporter.reload.event_supporters.first.order).to eq(1)
        expect(supporter.reload.event_supporters.first.order).to eq(2)
      end
    end