CODEWITHSUNDEEP
javaseleniumselenium-webdriverui-automation
Sachidanand Pandit
Sachidanand Pandit

Reputation: 338

How I can Sort this Draggable List in Selenium

Link for Practice https://demoqa.com/sortable

I tried with this code

Actions action=new Actions(driver);
List<WebElement> elements=driver.findElements(By.xpath("//*[@id=\"demo-tabpane-list\"]/div/div"));
for(int i=5;i>=0;i--) {


action.dragAndDrop(elements.get(0), elements.get(i)).build().perform();
}

Upvotes: 0

Views: 1091

Answers (2)

lorvindc
lorvindc

Reputation: 67

In order to sort the elements, you need to get each element and drag it to a destination.

The solution below basically drags and drops each sortable element above the table (although this uses C#, I think logic can be used in Java). In this case I set the destination to the List Tab to ensure the the element is above the list. Reason: When I tried to set it to the 1st row, it goes to the second row.

The logic is as follows

  • Drag/drop element 2 above 1

  • Drag/drop element 3 above 2

  • Drag/drop element 4 above 3

  • Drag/drop element 5 above 4

  • Drag/drop element 6 above 5

      // Function to sort the elements
  public void SortElements()
  {
      var action = new Actions(webDriver);
      action.DragAndDrop(sortablePage.GetSortableElementByIndex(2), sortablePage.GetListTab()).Perform();
      action.DragAndDrop(sortablePage.GetSortableElementByIndex(3), sortablePage.GetListTab()).Perform();
      action.DragAndDrop(sortablePage.GetSortableElementByIndex(4), sortablePage.GetListTab()).Perform();
      action.DragAndDrop(sortablePage.GetSortableElementByIndex(5), sortablePage.GetListTab()).Perform();
      action.DragAndDrop(sortablePage.GetSortableElementByIndex(6), sortablePage.GetListTab()).Perform();
  }

  // Create a method to get the sortable element by index
  public IWebElement GetSortableElementByIndex(int index)
  {
      return WaitForElementByXPath(wait, $"//div[@id='demo-tabpane-list']/div/div[{index}]");
  }

  // Create a method to get the Tab above the list
  public IWebElement GetListTab()
  {
      return WaitForElementById(wait, $"demo-tab-list");
  }

If you want to check more details of the C# code, you may refer to the following: https://github.com/lorvindc/web-ui-specflow-framework

Upvotes: 0

YaDav MaNish
YaDav MaNish

Reputation: 1352

List<WebElement> list = driver.findElements(By.xpath("//* [@id='demo-tabpane-list']/div/div"));
    
for(int i =1;i<list.size();i++) {
        
WebElement element = driver.findElement(By.xpath("//*[@id='demo-tabpane-list']/div/div["+ i +"]"));
        
        WebElement destination6 = driver.findElement(By.xpath("//*[@id='demo-tabpane-list']/div/div[6]"));
        WebElement destination5 = driver.findElement(By.xpath("//*[@id='demo-tabpane-list']/div/div[5]"));
        WebElement destination4 = driver.findElement(By.xpath("//*[@id='demo-tabpane-list']/div/div[4]"));
        WebElement destination3 = driver.findElement(By.xpath("//*[@id='demo-tabpane-list']/div/div[3]"));
        WebElement destination2 = driver.findElement(By.xpath("//*[@id='demo-tabpane-list']/div/div[2]"));
        WebElement destination1 = driver.findElement(By.xpath("//*[@id='demo-tabpane-list']/div/div[1]"));
        
        Actions action = new Actions(driver);
        
        if(element!=null) {
        action.dragAndDrop(element, destination6).perform();
        action.dragAndDrop(element, destination5).perform();
        action.dragAndDrop(element, destination4).perform();
        action.dragAndDrop(element, destination3).perform();
        action.dragAndDrop(element, destination2).perform();
        action.dragAndDrop(element, destination1).perform();
        break;
        }
    }

Please enhance it as per your need.

Upvotes: 1

Related Questions