Move element with protractor

Question

I have a issue, i can't dragAndDrop element. This element is dragAndDrop by jquery in Angular Directive. I use Protractor 2.10 and Selenium 2.45. I try dragAndDrop for many ways:

/**
 *Draft dragAndDrop
 */

'use strict';


describe('DragAndDrop ', function() {

    beforeEach(function() {

        browser.get(browser.baseUrl);
        browser.waitForAngular();
    });

    it('test', function(){

        //var coordenadas = placaUno.getLocation();


        var buttonStart = element(by.binding('landing-main-button-start')).click();
        var placas= element(by.buttonText('Placas')).click();

        //OK
        //var placaUno = element.all(by.repeater('board in boards')).get(1);

        //img placa  to drag and drop
        var placaUnoCSS = element(by.css('#hwtoolbox > div > ul > li:nth-child(1) > div.submenu-level > div > div > div:nth-child(1) > img'));

        //space with drop placa
        var espacioPlaca = element(by.css('#boardSchema'));

        //First way -- not found
        //browser.actions().mouseDown(placaUnoCSS).mouseMove(placaUnoCSS,espacioPlaca).mouseUp().perform()

        //Second way -- not found
        browser.actions()
            .dragAndDrop(placaUnoCSS, espacioPlaca)
            .perform();

        //Third way -- not found
        /*
         browser.actions().dragAndDrop(
         browser.findElement(by.css('#hwtoolbox > div > ul > li:nth-child(1) > div.submenu-level > div > div > div:nth-child(1) > img')),
         browser.findElement(by.css('#protoboard-canvas'))).perform();
        */

        browser.pause();

    });

    afterEach(function(){

    });


});

Is necesary call a native Jquery event in test?.

Moreover debug step by step, elements are present, click is OK, mouseDown is ok... DragAndDrope sentecence is ok but not drag and drop on website.

Your question is unclear. There is no test in this code (describe, it, expect...). On which browser are you testing? Do you get an error message? browser.actions() should work like you used it but you can also have a look at the .dragAndDrop() wrapper : github.com/angular/protractor/blob/… — glepretre
"So, what did you expect?" You should add more info to your question ;) — glepretre

Kieran Ryan Kieran Ryan · Accepted Answer · 2015-08-11T18:17:24

do me a favour and save yourself some stress by adding a sensibly named class to your placaUnoCSS element. Then you can simply select it, as you know, with:

var startDragEle = element(by.css(".imageToDrag"));

Given that you're correctly selecting drag start and end element

browser.actions().dragAndDrop().perform();

should work :-)

In case you need it here's the API:

https://code.google.com/p/selenium/source/browse/javascript/webdriver/actionsequence.js

Move element with protractor

1 Answers