Testing drag and drop not working rspec/capybara/selenium/jquery

Question

I am using:

• rspec
• capybara
• selenium
• jquery ui-sortable
• ruby
• rails

This code:

expect(find_by_id("note0").text).to eq(note_placeholder.to_s + "0")
expect(find_by_id("note1").text).to eq(note_placeholder.to_s + "1")
expect(find_by_id("note2").text).to eq(note_placeholder.to_s + "2")
source=find_by_id("combo0")
target=find_by_id("combo1")
source.drag_to(target)    
expect(find_by_id("note0").text).to eq(note_placeholder.to_s + "1")
expect(find_by_id("note1").text).to eq(note_placeholder.to_s + "0")
expect(find_by_id("note2").text).to eq(note_placeholder.to_s + "2")

... throws no error, but

expect(find_by_id("note0").text).to eq(note_placeholder.to_s + "1")

... fails

 Failure/Error: expect(find_by_id("note0").text).to eq(note_placeholder.to_s + "1")

   expected: "imaging_step_note1"
        got: "imaging_step_note0"

It seems drag_to is not working. Is there a good way to confirm that is in fact the trouble? Is there a good workaround?

Drag and drop and subsequent sorting work fine outside rspec. What sort of spec will test this in rspec?

EDIT: This seems to offer some promise, but I am not sure I understand it well:
https://github.com/mattheworiordan/jquery.simulate.drag-sortable.js/blob/master/README.md

Is it a good option? Seems there must be a better way, no? Isn't this common functionality to test? What am I missing?

EDIT2:
Another option dated 2011:
https://ynot408.wordpress.com/2011/09/22/drag-and-drop-using-selenium-webdriver/ ... although the single long line of javascript is beyond me at the moment.

EDIT3: Based on this:
http://www.seleniumhq.org/docs/03_webdriver.jsp#setting-up-webdriver-project

... I tried this code:

source = page.driver.browser.find_element(:id, 'combo0')
target = page.driver.browser.find_element(:id, 'combo1')
page.driver.browser.action.drag_and_drop(source, target).perform
sleep 5

... but I still get:

Failure/Error: expect(find_by_id("note0").text).to eq(note_placeholder.to_s + "1")

   expected: "imaging_step_note1"
        got: "imaging_step_note0"

EDIT4:
Just updated to selenium-webdriver (2.45.0) from 2.42.0 Same result. Only difference now is spec seems to run much slower. Reverted back to 2.42.0.

EDIT5: If I add:

sleep 15

... and manually perform the drag-and-drop, the rspec test passes. Everything seems to be pointing to a failure of whatever should be happening after the left-mouse button release event.

Answer 1

Your problem here is that you're using find(...).text in your expectation. The find of the element and then the extraction of its text is occurring before the drop has time to take effect. What you want to be using is

expect(page).to have_css('#note0', text: note_placeholder.to_s + "1")

This will cause Capybara to wait up to its max default wait time for the element #note0 with the text content specified to appear on the page