1

This is my first question ever so please go light on me. I am trying to test the drag and drop feature on HTML5 using selenium and java as my main language. However I am fully aware that it is not supported by selenium webdriver itself but there is a workaround on the stackoverflow forum where a user used a javsacript file to simulate the drag and drop action.

The link to that javascript workaround is HERE

I have tried to follow the instructions but since i am quite new to coding, I am wasting my time messing around. However, I have tried my best but now i am having problems with loading scripts. Thanks.

(Turned out that I was not correctly executing the drop.js script. The working code is below:)

import java.io.BufferedReader;
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 java.util.concurrent.TimeUnit;

import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;

public class check {
    public static void main(String[] args) throws InterruptedException, IOException {

        System.setProperty("webdriver.Firefox.driver", "Path_executable");
        WebDriver driver= new FirefoxDriver();
        driver.get("http://html5demos.com/drag#");


        final String JQUERY_LOAD_SCRIPT = ("C:\\jQuerify.js");
        String jQueryLoader = readFile(JQUERY_LOAD_SCRIPT);
        driver.manage().timeouts().setScriptTimeout(10, TimeUnit.SECONDS);
        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(); "
                + " }); ");



      String filePath = "C://drop.js";
      String source = "#one";
      String target = "#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 + "$('" + source + "').simulateDragDrop({ dropTarget: '" + target + "'});";
      ((JavascriptExecutor)driver).executeScript(javaScript);

}

    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();
        }
    }
}

My code is:-

import java.io.BufferedReader;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.InputStreamReader;
import java.io.Reader;
import java.nio.charset.Charset;
import java.util.concurrent.TimeUnit;

import javax.script.ScriptException;

import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;

public class drag {

    public static void main(String[] args) throws ScriptException, NoSuchMethodException, IOException {
        System.setProperty("webdriver.Firefox.driver", "Address_Executable");
        WebDriver driver = new FirefoxDriver();
        driver.get("http://html5demos.com/drag");

        final String JQUERY_LOAD_SCRIPT = ("C:\\jQuerify.js");
        String jQueryLoader = readFile(JQUERY_LOAD_SCRIPT);
        driver.manage().timeouts().setScriptTimeout(10, TimeUnit.SECONDS);
        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(); "
                + " }); ");

        final String DROP = ("C:\\drop.js");
        String scriptLoader = readFile(DROP);
        driver.manage().timeouts().setScriptTimeout(10, TimeUnit.SECONDS);
        JavascriptExecutor js1 = (JavascriptExecutor) driver;
        js1.executeScript(
                scriptLoader /* , http://localhost:8080/jquery-1.7.2.js */);
        ((JavascriptExecutor) driver).executeScript(js1 + "$('#one').simulateDragDrop({ dropTarget: '#bin'});");

    }

    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();
        }
    }

}
Community
  • 1
  • 1
Shah
  • 413
  • 2
  • 11
  • I've tried to use above solution but getting error net.serenitybdd.core.exceptions.SerenityManagedException: asynchronous script timeout: result was not received in 10 seconds with Selenium 2.50.1. can you please clarify ? – vikramvi Apr 13 '16 at 15:56
  • 1
    thanks for sharing code , could get it working at last https://github.com/vikramvi/Selenium-Java/commit/a1354ca5854315fded8fc80ba24a4717927d08c7 – vikramvi Apr 26 '16 at 10:20
  • @vikramvi Sorry I was away for a while. Good job done with this issue. Very well written code. – Shah May 01 '16 at 19:06
  • Thanks to you :) but the challenging thing for me is our HTML5 drag and drop is more complex this solution only works for native drag and drop events in HTML5. In case there are some custom events used along with these it still fails. I'm still searching for universal solution which will work in all scenarios. – vikramvi May 02 '16 at 10:52
  • A drag-n-drop java solution can be found here: https://github.com/timrsfo/se-drag-n-drop – mancocapac Jul 20 '18 at 20:41

0 Answers0