Automate drag-and-drop operations

Some web applications have functionality allowing to drag web elements from one location and drop them on a defined area or even another web element.

These kinds of complex actions are not available in basic element properties. You can automate drag-and-drop actions using advanced user interactions.

The action chain generator implements the Builder pattern to create a composite action containing a group of other actions. It eases building actions by configuring an action chains generator instance and invoking its perform() method to get the complex action.

actions().dragAndDrop(
    $('From Selector'),
    $('To Selector'))
    .perform()

In this example, drag the Mystery & Thrillers folder from the left table to the Horror folder of the right side table.

See the code below as an example:

<?xml version="1.0" encoding="UTF-8"?>
<config xmlns="http://web-harvest.sourceforge.net/schema/1.0/config" scriptlang="groovy">
    <robotics-flow exclusive="true">
        <robot driver="${driver}">
            <script><![CDATA[
                timeouts(10 * 1000)

                // open site
                open('https://rpa-tutorial.s3.amazonaws.com/trainings/dnd/samples/dhtmlxTree/05_drag_n_drop/12_tree_drag.html');

                // find base element
                element = $(byXpath('//*[@id="treeboxbox_tree"]/div/table/tbody/tr[2]/td[2]/table/tbody/tr[2]/td[2]/table/tbody/tr[1]/td[4]/span'));

                // find target element
                target = $(byCssSelector('#treeboxbox_tree2 > div > table > tbody > tr:nth-child(2) > td:nth-child(2) > table > tbody > tr:nth-child(4) > td:nth-child(2) > table > tbody > tr:nth-child(3) > td:nth-child(2) > table > tbody > tr:nth-child(1) > td.dhxTextCell.standartTreeRow > span'));

                // get base element center coordinates
                int elementX = element.getLocation().getX()+element.getSize().width/2;
                int elementY = element.getLocation().getY()+element.getSize().height/2;

                // get target element center coordinates
                int targetX = target.getLocation().getX()+target.getSize().width/2;
                int targetY = target.getLocation().getY()+target.getSize().height/2;

                // move mouse to base element and click and hold
                actions().moveByOffset(elementX, elementY).clickAndHold().build().perform();

                sleep(500);

                // move mouse to target element and click a click context for make realese
                actions().moveByOffset(targetX-elementX, targetY-elementY).build().perform();

                // for IE need to use next work around
                if(driver.toString().equalsIgnoreCase("internet explorer")) {
                    actions().contextClick().build().perform();
                } else {                
                    // for all other drivers
                    actions().release().build().perform();
                }

                sleep(5000)
                ]]></script>
        </robot>
    </robotics-flow>
    <export include-original-data="true"/>
</config>

The Mystery & Thrillers folder is moved to the Horror folder. The new folder structure looks like this: