Unable to simulate drag and drop using jquery in HTML5 application in Selenium webdriver

Question

Hi I am trying to perform a drag and drop operation using Jquery in selenium webdriver but it throws the following error:

jQuery(...)[0].simulateDragDrop is not a function

My code is as follows:

       String dnd_javascript = null;
       String JQUERY_LOAD_SCRIPT=null;



        /** dynamically load jQuery */


        try(BufferedReader br = new BufferedReader(new FileReader("C://CMS_Next//cmsqc//CMS_Automation//src//Sample Data//jQuerify.js"))) {
            StringBuilder sb = new StringBuilder();
            String line = br.readLine();

            while (line != null) {
                sb.append(line);
                sb.append(System.lineSeparator());
                line = br.readLine();
            }
           JQUERY_LOAD_SCRIPT = sb.toString();
        }

        JavascriptExecutor js = (JavascriptExecutor) driver;
        js.executeAsyncScript( JQUERY_LOAD_SCRIPT);




        //Script to load javascript for drag n drop  

        try(BufferedReader br = new BufferedReader(new FileReader("C://CMS_Next//cmsqc//CMS_Automation//src//Sample Data//dnd.js"))) {
            StringBuilder sb = new StringBuilder();
            String line = br.readLine();

            while (line != null) {
                sb.append(line);
                sb.append(System.lineSeparator());
                line = br.readLine();
            }
            dnd_javascript = sb.toString();
        }

       ((JavascriptExecutor)driver).executeScript(dnd_javascript);

       //Once the image to be dragged is displayed, I am trying to drag and drop it using the following 

       ((JavascriptExecutor)driver).executeScript("jQuery('.image_section_left img')[0].simulateDragDrop({ dropTarget: '#middleright'})");

try checking http://stackoverflow.com/questions/7813700/testing-jquery-drag-drop-and-droppable-with-selenium?rq=1 — Gajendra Naidu, Jan 05 '16 at 11:36
Thanks for your reply @GajendraNaidu but that example doesn't seem to me a JAVA implementation. I am using Selenium with JAVA. Please correct me if I am wrong. — Lakshay Gupta, Jan 06 '16 at 05:20

score 0 · Answer 1 · edited May 23 '17 at 12:03

You can take a look at my solution. Since HTML5 is not supported by selenium so we use a workaround which is by using a javascript helper file. You should take a look here to understand and download the helper java script file (How to simulate HTML5 Drag and Drop in Selenium Webdriver?

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

Unable to simulate drag and drop using jquery in HTML5 application in Selenium webdriver

1 Answers1