CODEWITHSUNDEEP
ruby-on-railsseleniumcapybarasortablejs
tegandbiscuits
tegandbiscuits

Reputation: 81

Capybara drag_to dragging to mouse location instead of target

I'm trying to write a test that involves dragging and dropping (via SortableJS) to order some things on a table.

Here's basically what's in my test currently:

handle = find("[data-item-id='#{itemA.id}'] [data-js-sortable-handle]")
targetRow = find("[data-item-id='#{itemB.id}']")

handle.drag_to(targetRow)

This sort of works, except that rather than dragging to targetRow it drags to where my mouse actually is. So my test only passes if I put my mouse in the right location, and if I don't run them headless.

I'm unsure if this is more of a problem with Capybara, Selenium, or just because of the library I'm using.

Upvotes: 2

Views: 1154

Answers (1)

Thomas Walpole
Thomas Walpole

Reputation: 49890

Depending on exactly which type of drag and drop (JS emulated vs HTML5) the sortablejs library is using Capybara has to do different things. I don't really see how either of the methods it uses could drag to the wrong element (where the drop/mouse_up event occurs) but it's definitely possible the positions reported in the events may be off if your app depends on those positions. There are tests for both types of dragging in the Capybara test suite which do pass in headless and headed modes, so it definitely should work in at least basic cases. If you can provide a simple example that shows your issue, please file an issue at the Capybara project with the example and I'll take a look.

UPDATE: I took a look at the SortableJS code and found at least one reason why Capybaras HTML5 DND emulation isn't compatible with it. SortableJS handles the dragstart event by running some setup code via setTimeout. Since Capybaras code was all in one script the SortableJS dragstart setup code wouldn't get executed until after the drop event occurred which prevented elements from getting moved. I've made some changes to Capybara and released 3.23.0 which should play nicer with SortableJS.

Upvotes: 3

Related Questions