Drag and sort test using Selenium web driver

Question

I am trying to automate UI of a web page. Please find the link for the webpage below http://demoqa.com/draggable/

In this web page we have an option called Draggable + Sortable .Click on Draggable + Sortable option. An un ordered list appears. List items can be dragged and we can re-arrange the order of this list.

I wrote a code to automate this . But my code is partially working. code is able to drag the element but unable to place it where I want. please find the steps in the code. I am trying to place One at the bottom of the list

WebElement drgnsort = dr.findElement(By.linkText("Draggable + Sortable"));
        drgnsort.click();
        WebElement container = dr.findElement(By.id("sortablebox"));
        List<WebElement> lis = container.findElements(By.tagName("li"));
        WebElement one = lis.get(0);
        builder.clickAndHold(one).moveByOffset(0,200).release().perform();

The Actions class has a "dragAndDrop" feature. You should look into using it instead of recreating the wheel. ;) — IamBatman
– IamBatman, Commented Sep 7, 2017 at 22:14
In case of DragAndDrop I am unable to identify the destination location. The entire Unordered list is inside a a div and there is no other element except the unordered list. Please let me know if I am not clear — user7520525
– user7520525, Commented Sep 8, 2017 at 5:06
Then try "dragAndDropBy", it allows you to move it by pixel. — IamBatman
– IamBatman, Commented Sep 8, 2017 at 14:49

Pankaj Sharma · Accepted Answer · 2017-09-08 05:45:56Z

2

Try following code:

Actions action = new Actions(we);
    List<WebElement> list = we.findElements(By.cssSelector("#sortablebox li"));
    WebElement target = list.get(0);
    WebElement dest = list.get(3);
    action.click(target).clickAndHold().moveToElement(dest).moveByOffset(0, 10).release().build().perform();

Where 'we' is instance of WebDriver.
You can Identify the un-ordered list by its index, we have to move element a bit more that is why I have used 'moveByOffset(0, 10)'.

answered Sep 8, 2017 at 5:45

Pankaj Sharma

797 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user7520525 Over a year ago

Thank you Pankaj. Code works. I just have one question. Can you please explain cssSelector("#sortablebox li"). How is it different from locating the Un-ordered list with ID.

user7520525 Over a year ago

Can I also Know how get the "list" (List<WebElement>) by using Id?

Pankaj Sharma Over a year ago

ID is unique throughout the page but if you have multiple webelement correspond to selector then use "we.findElements" instead of "we.findElement". You will get the list of webelements. P.S. if you found answer helpful then please upvote it. Thanks

Collectives™ on Stack Overflow

Drag and sort test using Selenium web driver

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related