Failing to automate ng2-dnd using selenium and java

Question

Could you please help me in automating the drag and drop using selenium and java.

http://akserg.github.io/ng2-webpack-demo/#/dnd

The similar example we are using in our project but we drag and drop is not happening and we have tried in different ways to find the solution but no use.

If anyone of you is having the solution for this please reply and it will be appreciated.

Please find the code

public class ND2DND
{
    public static void main(String[] args) throws InterruptedException
    {
        WebDriver driver = new ChromeDriver();
        driver.get("http://akserg.github.io/ng2-webpack-demo/#/dnd");
        driver.manage().window().maximize();
        Thread.sleep(2000);
        WebElement sourceElement = driver
                .findElement(By.xpath("/html/body/app-root/demo-dnd/div/div/simple-dnd/div/div[1]/div/div[2]/div/div/div"));
        System.out.println(sourceElement.getText());

        // Element on which need to drop.
        WebElement destinationElement = driver
                .findElement(By.xpath("/html/body/app-root/demo-dnd/div/div/simple-dnd/div/div[2]/div/div[2]"));

        try
        {
            if (sourceElement.isDisplayed() && destinationElement.isDisplayed())
            {
                try
                {
                    Actions actions = new Actions(driver);
                    WebDriverWait wait = new WebDriverWait(driver, 20);
                    wait.until(ExpectedConditions.elementToBeClickable(sourceElement));
                    Action atc2 = actions.clickAndHold(sourceElement).moveToElement(destinationElement).release(destinationElement).build();
                    atc2.perform();
                    Thread.sleep(1000);
                    System.out.println("dropped");
                }
                catch (StaleElementReferenceException e)
                {
                    System.out.println("Element stale is continuing");
                }
            }
        }
        catch (Exception e)
        {
            System.out.println("Unable to drag and drop " + e);
        }
    }
}

Thanks in advance.

Solution for the above url:

wait.until(ExpectedConditions.elementToBeClickable(sourceElement));

                String basePath = new File("").getAbsolutePath();

                final String JQUERY_LOAD_SCRIPT = (basePath + "/lib/jquery_load_helper.js");

                String jQueryLoader = readFile(JQUERY_LOAD_SCRIPT);


                JavascriptExecutor js = (JavascriptExecutor) driver;
                js.executeAsyncScript(
                        jQueryLoader /* , http://localhost:8080/jquery-1.7.2.js */);

                // ready to rock
                js.executeScript("jQuery(function($) { " + " $('input[name=\"q\"]').val('bada-bing').closest('form').submit(); "
                        + " }); ");



              //http://stackoverflow.com/questions/29381233/how-to-simulate-html5-drag-and-drop-in-selenium-webdriver
              //"where jquery_load_helper.js contains:"  
              String filePath = basePath + "/lib/drag_and_drop_helper.js";


              //JQuery can ONLY work with id and css , xpath does NOT work with it.
              //String source =  "//section[@id='wrapper']/article/ul/li[4]/a"; 

              String source = ".panel-success > div:nth-child(2) > ul:nth-child(1)";
              String target = "div.panel-info:nth-child(1) > div:nth-child(2)";

              StringBuffer buffer = new StringBuffer();
              String line;
              BufferedReader br = new BufferedReader(new FileReader(filePath));
              while((line = br.readLine())!=null)
                  buffer.append(line);

              String javaScript = buffer.toString();

              javaScript = javaScript + "window.jQuery('" + source + "').simulateDragDrop({ dropTarget: '" + target + "'});";
              ((JavascriptExecutor)driver).executeScript(javaScript);

Answer 1

You can download the .js files from the google.



import java.io.BufferedReader;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.io.Reader;
import java.nio.charset.Charset;

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.StaleElementReferenceException;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.interactions.Actions;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;

public class ND2DND {

    public static void main(String[] args) throws InterruptedException {
        WebDriver driver = new ChromeDriver();


        // driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);

/*      System.setProperty("webdriver.gecko.driver", "lib\\geckodriver.exe");

          WebDriver driver = new FirefoxDriver();
*/       

        //driver.get("http://akserg.github.io/ng2-webpack-demo/#/dnd");
        driver.get("http://localhost:4200/#/dnd");

        driver.manage().window().maximize();

        Thread.sleep(2000);

        WebElement sourceElement = driver.findElement(By.id("draggable"));

        System.out.println(sourceElement.getText());

        // Element on which need to drop.
        WebElement destinationElement=driver.findElement(By.id("droppable"));


        try {

            if (sourceElement.isDisplayed() && destinationElement.isDisplayed()) {

                try {


                    WebDriverWait wait = new WebDriverWait(driver,20);

                    wait.until(ExpectedConditions.elementToBeClickable(sourceElement));

                    String basePath = new File("").getAbsolutePath();

                    final String JQUERY_LOAD_SCRIPT = (basePath + "/lib/jquery_load_helper.js");

                    String jQueryLoader = readFile(JQUERY_LOAD_SCRIPT);


                    JavascriptExecutor js = (JavascriptExecutor) driver;
                    js.executeAsyncScript(
                            jQueryLoader /* , http://localhost:8080/jquery-1.7.2.js */);

                    // ready to rock
                    js.executeScript("jQuery(function($) { " + " $('input[name=\"q\"]').val('bada-bing').closest('form').submit(); "
                            + " }); ");



                  //http://stackoverflow.com/questions/29381233/how-to-simulate-html5-drag-and-drop-in-selenium-webdriver
                  //"where jquery_load_helper.js contains:"  
                  String filePath = basePath + "/lib/drag_and_drop_helper.js";


                  //JQuery can ONLY work with id and css , xpath does NOT work with it.
                  //String source =  "//section[@id='wrapper']/article/ul/li[4]/a"; 

                  String source = "#draggable";
                  String target = "#droppable"; //"ul.filters-collection li a" ; //"div.tasks-scroll ol.tasks li:nth-child(1)"; //#bin";

                  StringBuffer buffer = new StringBuffer();
                  String line;
                  BufferedReader br = new BufferedReader(new FileReader(filePath));
                  while((line = br.readLine())!=null)
                      buffer.append(line);

                  String javaScript = buffer.toString();

                  javaScript = javaScript + "window.jQuery('" + source + "').simulateDragDrop({ dropTarget: '" + target + "'});";
                  ((JavascriptExecutor)driver).executeScript(javaScript);


                 //javaScript = javaScript + "jQuery('" + sourceElement + "').simulateDragDrop({ dropTarget: '" + destinationElement + "'});";
                 // javaScript = javaScript + "$('#{sourceElement}').simulateDragDrop({ dropTarget:" + "'#{destinationElement}'});";
                  //javaScript = javaScript+"$('#"+sourceElement+"').simulate( '#" +destinationElement+ "');" ;

                 // ((JavascriptExecutor) driver).executeScript(javaScript);


                    Thread.sleep(1000);
                    System.out.println("dropped");
                } catch (StaleElementReferenceException e) {
                    System.out.println("Element stale is continuing");
                }
            }

        }

        catch (Exception e) {
            System.out.println("Unable to drag and drop " + e);

        }



    }


     private static String readFile(String file) throws IOException {
            Charset cs = Charset.forName("UTF-8");
            FileInputStream stream = new FileInputStream(file);
            try {
                Reader reader = new BufferedReader(new InputStreamReader(stream, cs));
                StringBuilder builder = new StringBuilder();
                char[] buffer = new char[8192];
                int read;
                while ((read = reader.read(buffer, 0, buffer.length)) > 0) {
                    builder.append(buffer, 0, read);
                }
                return builder.toString();
            } finally {
                stream.close();
            }
    }

}