How to perform drag and drop using page-object? - ruby

Question

I need to perform drag and drop action for a scenario, How can I able to achieve this using Page-Object.
I need to click an element (like button from options) and drop it in a text area. I have search for a solution but I can't able to find. Please help to resolve this issue. Thanks

Answer 1

There are more easy cases for Watir:
drag_and_drop_by - Drag and drop this element by the given offsets.
browser.div(:id => "draggable").drag_and_drop_by 100, -200
drag_and_drop_on - Drag and drop this element on to another element instance.
a = browser.div(:id => "draggable")
b = browser.div(:id => "droppable")
a.drag_and_drop_on b
Source: http://rubydoc.info/gems/watir-webdriver/Watir/Element#drag_and_drop_by-instance_method

Answer 2

Using Selenium WebDriver:
WebElement element = driver.findElement(By.name("source"));
WebElement target = driver.findElement(By.name("target"));
(new Actions(driver)).dragAndDrop(element, target).perform();
Using watir-webdriver (only works in FF(?)):
browser.div(:text=>"from_div").wd.drag_and_drop_on(browser.div(:text=>"to_div").wd)
Using HTML5 Drag and Drop Selenium WebDriver for Ruby
1) drag_and_drop_helper.js(https://gist.github.com/2362544) to your test/helpers directory
2) Create a new method:
def drag_and_drop(source,target)
js_filepath=File.dirname(__FILE__)+"/drag_and_drop_helper.js"
js_file= File.new(js_filepath,"r")
java_script=""
while (line=js_file.gets)
java_script+=line
end
js_file.close
#driver.execute_script(java_script+"$('#{source}').simulateDragDrop({ dropTarget: '#{target}'});")
rescue Exception => e
puts "ERROR :" + e.to_s
end
Hope that helps

Answer 3

PageObject drag and drop for Ruby
The following is a sample of 'drag and drop' using PageObject with Cucumber, Ruby, PageObject Selenium WebDriver framework, using jqueryui.com/droppable/ page:
#
# Feature file with Gherkin scenario
#
Feature: Drag and Drop test
Scenario: Perform drag-and-drop test
Given I am on drag and drop test page
When I switch to frame with demo-frame class
And I drag left element and drop it on right element
#
# Step definitions file
#
Given("I am on drag and drop test page") do
visit(HomePage)
end
When("I switch to frame with demo-frame class") do
on(HomePage) do |page|
# call switch_to.frame only in one step definition,
# as it will give an error when try to call it in the next step definition
page.browser.switch_to.frame page.browser.find_element(:class, 'demo-frame')
end
end
And("I drag left element and drop it on right element") do
on(HomePage) do |page|
from_el = page.get_from_element
to_el = page.get_to_element
# elements has to be assigned directly from Selenium WebDriver,
# if assigned from the PageObject next line will give an error
page.browser.action.click_and_hold(from_el).perform
page.browser.action.move_to(to_el).perform
page.browser.action.release.perform
sleep 10 # just to see the drag and drop result
end
end
#
# Page file
#
class HomePage
include PageObject
page_url "https://jqueryui.com/droppable/"
def get_from_element
self.browser.find_element(:id, "draggable")
end
def get_to_element
self.browser.find_element(:id, "droppable")
end
end

Answer 4

Starting with the comment that Justin made that this is not implemented yet, then you can monkey patch the Page-object gem in the:
module PageObject
module Elements
class Element
def drag_and_drop_on(other)
element.drag_and_drop_on other.element
end
end
end
end
This will at least perform the drag_and_drop_on method in watir-webdriver gem without a deprecation warning.