How to do drag and drop in protractor ?

[wakandan]

Looking at webdriverjs I can see there's a way to do drag and drop such as this:

 * <p>Example:<pre><code>
 *   new webdriver.ActionSequence(driver).
 *       keyDown(webdriver.Key.SHIFT).
 *       click(element1).
 *       click(element2).
 *       dragAndDrop(element3, element4).
 *       keyUp(webdriver.Key.SHIFT).
 *       perform();
 * </pre></code>

How to use it with protractor?

[juliemr]

You should be able to do the exact same thing, but with protractor instead of webdriver and ptor (or whatever you call your protractor instance) instead of driver.

[wakandan]

I tested with it in debug mode but the element doesn't seem to be dragged and dropped as desired....

[wakandan]

I was writing another test using dragAndDrop and it seems to work

ptor.actions().dragAndDrop(
   ptor.findElement(protractor.By.xpath('//td[contains(concat(" ", @class, " "), "fc-day") and @data-date="' + currentTimePlus1Day.format('YYYY-MM-DD') + '"]')),
   ptor.findElement(protractor.By.xpath('//td[contains(concat(" ", @class, " "), "fc-day") and @data-date="' + currentTimePlus3Day.format('YYYY-MM-DD') + '"]'))
).perform();

the code above is to drag the mouse from 1 day to another in fullcalendar and it works fine.

However, my previous test to drag an event into a different day using the same method doesn't seems to work. The only difference between the two is on the other test, I was selecting the event for the first param for dragAndDrop. Does this scenario ring any bell to you?

Along the way I was also researching on how to actually debug the written test in protractor. The method of putting ptor.debugger() like in the documentation just add window.clientSideScripts variable which contains some "protractor-specific" selector functions into the test page which isn't very helpful. Is there a way I could findElement in xpath, do dragAndDrop on them like the above code in the test page instead? Thanks a lot.

[vishalshivnath]

I am trying to do DragAndDrop for slider bar , when i launch protractor , the following scripts get executed without any errors or warning but i don't see the slider bar moving.

ptor.get('URL');
var slider = ptor.findElement(protractor.By.xpath(".//*[@id='leftcolumn']/div[2]/div/a[1]")); //slider bar object
ptor.actions().dragAndDrop(slider,{x:1000,y:0}).perform();
ptor.sleep(10000);

[juliemr]

What does your template look like? I've added a test which successfully uses drag and drop in this commit: fb46ec9

[juliemr]

Closing as obsolete and solved, please open a new issue if there is still a problem.

[ssetem]

Hi,

If anyone gets a cannot find toWireValue method of [Object] error you need to pass a promise which gets the actual element.

e.g.
var handle = $(".ui-handler")
ptor.actions().dragAndDrop(handle.find(), {x:100, y:0}).perform()

the .find() part is important here, took me a while to figure this out

[snehacharkha]

Hi ,

Very new to protractor , and i need to do drag and drop testing for a slider bar.

i believe,
ptor.actions().dragAndDrop(slider.find(), {x:100, y:0}).perform() should do the work .

But can some one please tell me where to look for value of x and y ;

Here's the code snippet

[snehacharkha]

@juliemr Do you have any suggestion for this ?

[chuckwired]

@snehacharkha, check the implementation; x and y are the offset in pixels (or you can use another WebElement).

/**
 * Convenience function for performing a "drag and drop" manuever. The target
 * element may be moved to the location of another element, or by an offset (in
 * pixels).
 * @param {!webdriver.WebElement} element The element to drag.
 * @param {(!webdriver.WebElement|{x: number, y: number})} location The
 *     location to drag to, either as another WebElement or an offset in pixels.
 * @return {!webdriver.ActionSequence} A self reference.
 */
webdriver.ActionSequence.prototype.dragAndDrop = function(element, location) {
  return this.mouseDown(element).mouseMove(location).mouseUp();
};