3

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

KAK
  • 905
  • 4
  • 14
  • 33
  • The page object gem currently does not have a method for dragging and dropping. There is a [feature request](https://github.com/cheezy/page-object/issues/184) on the project's issue list. For now, you will need to go down to the underlying Selenium (or Watir) element. – Justin Ko Jul 29 '14 at 12:58

4 Answers4

2

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

1

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

balintpekker
  • 1,804
  • 4
  • 28
  • 42
1

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
dumbledore
  • 51
  • 4
0

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.