Drag and drop to object within a scrolling block

Posted: October 5th, 2009 | Author: Dave | Filed under: Examples | Tags: , | 3 Comments »

The dragAndDropToObject command works really well in Selenium, however it does have some limitations. One such limitation I came across recently while writing tests for an ExtJS web application: when your destination object is in a scrolling box (and not in view) the command fails.

It appears that Selenium works out how far from the top of the screen the destination object is, and attempts to drag the source object to this destination even if it’s way below the visible elements of the page. This probably works fine for scrolling on a page wide scale, but for a block element with overflow:scroll or auto it just doesn’t work.

The following is a solution I put together in Java that works out all of the dimensions, scrolls the parent block element so that the destination object is in view, and then corrects the drag movement coordinates before issuing the dragAndDrop command.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

//start coordinates
int startX = new Integer(selenium.getEval("this.getElementPositionLeft('id=sourceObject')"));
int startY = new Integer(selenium.getEval("this.getElementPositionTop('id=sourceObject')"));
 
//destination coordinates
int destinationX = new Integer(selenium.getEval("this.getElementPositionLeft('id=destinationObject')"));
int destinationY = new Integer(selenium.getEval("this.getElementPositionTop('id=destinationObject')"));
 
//destination dimensions
int destinationWidth = new Integer(selenium.getEval("this.getElementWidth('id=destinationObject')"));
int destinationHeight = new Integer(selenium.getEval("this.getElementHeight('id=destinationObject')"));
 
//scroll to destination
int destinationOffsetTop = new Integer(selenium.getEval("this.browserbot.findElement('id=destinationObjectContainer').offsetTop"));
selenium.getEval("this.browserbot.findElement('id=destinationObjectContainer').scrollTop = " + destinationOffsetTop);
 
//work out destination coordinates
destinationY = destinationY - destinationOffsetTop;
int endX = Math.round(destinationX + (destinationWidth / 2));
int endY = Math.round(destinationY + (destinationHeight / 2));
int deltaX = endX - startX;
int deltaY = endY - startY;
String movementsString = "" + deltaX + "," + deltaY;
 
selenium.dragAndDrop("id=sourceObject", movementsString);

There are likely to be limitations to this solution. A few I can think of:

  • What if the source object isn’t in view due to a scrollbar on it’s parent element?
  • What if the source or destination object has multiple ancestors with need to scroll them into view first?
  • What if the destination object’s parent can’t scroll to the top of the destination object – possible if it’s the last child element?

Any suggestions of better ways to solve this problem?

3 Comments on “Drag and drop to object within a scrolling block”

  1. 1 sss said at 8:46 am on November 12th, 2010:

    how to get a drop down box in selenium

  2. 2 Rohan said at 4:33 pm on February 11th, 2011:

    Hi Dave
    I found this post really helpful. I was struggling to get the drag and drop to work in selenium for last 2 days and finally your post has proved out to be helpful.

    Thanks
    Rohan

  3. 3 Kaustubh said at 8:12 am on July 14th, 2011:

    Hi, how to use drag drop object to empty space as how locate element locators in empty space .?? also as destination points can be mentioned in pixels??waiting rply

Leave a Reply