2

I am working on a task that writing UI testcase(Automation) by selenium in Java. I have a html page that It contains the element I need to drag to a target. I have tried with the Action come-up with selenium, It's not working for me. So I have searched for a alternative way That I would like to write a script for drag and drop Action on a UI and execute this script with selenium executeScript() method. AFAIU this element drags as a copy of it's element (Cloning) and drop it where we need to. So Can anyone help me through this to write a script for drag and drop Action

As I observed the level of action for drag and drop

  1. Click & hold on the element
  2. Get a copy of the element (cloning) and move to desire place that we want
  3. Release it to a target.

P.S I have am unique id for both element(#g1) I need to drag and the place(#a) I need to drop it.

Abimaran Kugathasan
  • 31,165
  • 11
  • 75
  • 105
satkunam rajeenthini
  • 151
  • 4
  • 12

1 Answers1

1

You can use jquery.simulate.js which is the library JQuery use to simulate many functionalities when testing the framework.

1) first make sure all of the elements that you want drag and drop are drag-able. 2) Then we point out the elements (drag-able element) we need to move and the target (drop-able element) which the element need to be drop,

3) simulate the drag and drop using function using jquery.simulate.js

Please refer to below sample code.

var dragableElement = $("#dragableElement");
var dropableElement = $("#dropableElement");

var dropableOffset = dropableElement.offset();
var dragableOffset = dragableElement.offset();

var dx = dropableOffset.left - dragableOffset.left;
var dy = dropableOffset.top - dragableOffset.top;

dragableElement.simulate('drag', {
        dx: dx,
        dy: dy
});

Enjoy,

Nipuna Marcus
  • 213
  • 1
  • 6