Drag And Drop within frames

Drag and drop within frames

Selenium offer easy to use drag and drop functionality:

WebElement element = driver.findElement(By.name("source"));
WebElement target = driver.findElement(By.name("target"));
(new Actions(driver)).dragAndDrop(element, target).perform();

However this solution does not work in every case - for example when trying to drag and drop some element between frames. The preferred way to do this in Bobcat is to use of Draggable and Droppable.

Once you acquire Draggable element you can either move and drop it by offset or drop to Droppable element. You can get Draggable object by using DragAndDropFactory:

@PageObject
@Frame('some-frame')
public class ComponentWithDraggableArea {
 
    @FindBy(css=".draggable-area")
    private WebElement draggableArea;
 
    @CurrentFrame
    private FramePath framePath;
 
    @Inject
    private DragAndDropFactory factory;
 
    public Draggable getMyDraggable() {
        return factory.createDraggable(draggableArea, framePath);
    }
}

Later on you can drop this element to Droppable. You can get Droppable object in similar way as Draggable object (by converting WebElement using DragAndDropFactory):

@PageObject
@Frame('another-frame')
public class ComponentWithDroppableArea {
 
    @FindBy(css=".droppable-area")
    private WebElement dropArea;
 
    @Inject
    private DragAndDropFactory factory;
 
    @CurrentFrame
    private FramePath framePath;
 
    public void drop(Draggable draggable) {
        Droppable dropabble = factory.createDroppable(dropArea, framePath);
        element.dropTo(dropabble);
    }
}

As you can see to convert any element WebElement to Draggable or Droppable you have to pass framePath parameter, in this way drag and drop functionality performs necessary frame switches during dragging and dropping by itself (it works also when dragging element from different frame).