Is there any way to solve sorting web element ? I am getting difficulties while sorting using drag and drop function

Question

Is there any way to solve sorting web element ? I am getting difficulties while sorting using drag and drop function. My drag and drop is not working, i think my logic is good, but while running code nothing happening...

public void sortable() { // loop for drag and drop is not working...
    try {
        driver.get("http://jqueryui.com/");
        myLibrary.clickButton(By.partialLinkText("Sortable"));          

        WebElement iframe = driver.findElement(By.xpath("//*[@id='content']/iframe"));
        driver.switchTo().frame(iframe);            
        String temp = "";

        Thread.sleep(10 * 1000); //manual work to disorder sortable list prior to start for loop.
        Actions action = new Actions(driver);
        int i = 1, j = 1;

        for (i = 1; i < 8; i = i + 1) {
            WebElement sourceText = driver.findElement(By.cssSelector("#sortable > li:nth-child(" + i + ")")); 

            WebElement dragElement = driver
                    .findElement(By.cssSelector("#sortable > li:nth-child(" + i + ") > span"));
            while (true) {
                temp = "Item" + " " + j;
                if (temp == sourceText.getText()) {
                    WebElement targetElement = driver
                            .findElement(By.cssSelector("#sortable > li:nth-child(" + j + ")"));
                    action.moveToElement(dragElement).dragAndDrop(dragElement, targetElement).build().perform();
                    Thread.sleep(1 * 1000);
                    break;
                } else {

                    if (j == 8) {
                        break;
                    } else {
                        j++;
                    }
                }

            }

        }

        Thread.sleep(5 * 1000);

    } catch (Exception e) {
        e.printStackTrace();
    }

}

Answer 1

Building upon what @JeffC posted as an answer, here's another variant of the same that uses some of the built in capabilities of Java.

We basically use the List.sort() and a Comparator to get this done.

import java.util.List;
import org.openqa.selenium.By;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.interactions.Actions;
import org.openqa.selenium.remote.RemoteWebDriver;
import org.testng.annotations.AfterClass;
import org.testng.annotations.BeforeClass;
import org.testng.annotations.Test;

public class SorterSample {
  private RemoteWebDriver driver;

  @BeforeClass
  public void setup() {
    driver = new ChromeDriver();
  }

  @AfterClass
  public void cleanup() {
    if (driver != null) {
      driver.quit();
    }
  }

  @Test
  public void testMethod() {
    String url = "http://jqueryui.com/sortable/";
    driver.get(url);
    driver.switchTo().frame(driver.findElement(By.cssSelector("iframe.demo-frame")));
    List<WebElement> items = driver.findElements(By.cssSelector("#sortable > li"));
    items.sort(
        (o1, o2) -> {
          int compareValue = o1.getText().compareTo(o2.getText());
          if (compareValue < 0) {
            new Actions(driver).dragAndDrop(o1, o2).perform();
          }
          return compareValue;
        });
  }
}

Answer 2

This was a fun little exercise...

Rather than trying to invent your own sorting code, you should use an established sorting algorithm. I chose bubble sort but you can pick any one you want. If you are just sorting a few items, this should work just fine. It runs in just a few seconds.

The main code

String url = "http://jqueryui.com/sortable/";
driver.get(url);
driver.switchTo().frame(driver.findElement(By.cssSelector("iframe.demo-frame")));
List<WebElement> items = driver.findElements(By.cssSelector("#sortable > li"));
bubbleSort(items);

The bubble sort method

static void bubbleSort(List<WebElement> items)
{
    int n = items.size();
    boolean swapped;
    for (int i = 0; i < n - 1; i++)
    {
        swapped = false;
        for (int j = 0; j < n - i - 1; j++)
        {
            int compare = items.get(j).getText().compareTo(items.get(j + 1).getText());
            if (compare < 0)
            {
                swap(items.get(j + 1), items.get(j));
                swapped = true;
            }
        }

        // break if no elements were swapped
        if (swapped == false)
        {
            break;
        }
    }
}

and finally the support method to swap items

public static void swap(WebElement source, WebElement target)
{
    new Actions(driver).dragAndDrop(source, target).perform();
}

I just ran this code a few times and it's working just fine. It sorts the items in reverse order (so you don't have to mix them up manually). This is not the most efficient way to do this but I wanted to be able to watch the bubble sort work so you see each swap. If you want this to go faster, you can pull the text from the items, sort that list and then line up the elements with their sorted text so you only have to do n swaps.