Selenium Drag doesn't fire drag emit

[ChrisGarber-Medlever]

I use protractor/selenium-webdriver for testing. when I try to drag and drop elements I find that the drag is never initiated. I have tried different permutations of actions; e.g. normal drag and drop, moving the mouse a little bit to instantiate the drag and then dragging the rest of the way, manual actions for mouse down, move, mouse up; but nothing is getting the drag-start to trigger.

In order to isolate to the drag-start I paused the driver and began the drag manually, then resumed the tests. It completed the drag and dropped the element in the correct place.

Any help would be greatly appreciated! This app works wonderfully.

[PhilBroadbent]

@ChrisGarber-Medlever Chris - did you ever manage to get this working?

[ChrisGarber-Medlever]

No, it's been getting me down for months. Nothing I do seems to work.

[VolkRiot]

Any update on this. I am in the same exact boat.

[PhilBroadbent]

@ChrisGarber-Medlever @VolkRiot

I've found a workaround which works for my use case. It doesn't truely test the ability to drag/drop but for me this is secondary to the logic I actually want to test (the ability to undo/redo changes you've done). I have no idea if it will be useful for you guys but here's my logic anyway.

Note: Unfortunately it means exposing your Dragula object on the window. The idea is that I simulate the drag by triggering the 'drag' event myself, then moving the DOM nodes manually and finally triggering the 'drop' event.

I am using webdriver.io so you will likely need to change the code, but here's the code so you can get the idea:

    function simulateReorder(source, destination) {

        browser.execute(() => {
            window.drake.emit('drag');
        });

        browser.execute((s, d) => {
            const source = document.querySelector(s);
            const destination = document.querySelector(d);
            const el = document.getElementsByClassName('gu-transit')[0];
            const target = document.getElementsByClassName('my-draggable-class')[0];
            //'my-draggable-class' is the class of the PARENT div which holds the options which can be reordered.

            destination.parentNode.insertBefore(source, destination);
            window.drake.emit('drop', el, target);
        }, source, destination);
    }

As I said above this doesn't truely test the ability to drag. In order to do that I have an integration test which uses Syn (https://github.com/bitovi/syn) which does actually allow you to drag/drop around (I couldn't find a way to use this in UI tests though). I can post that logic if anyone wants.

[VolkRiot]

@PhilBroadbent Much thanks! I ended up doing the same thing you did with similar concerns to leaving the dragula API exposed but the potential for harm is limited. Either way, thank you for your reply.

[mike123vn]

Hi @VolkRiot?

Could you tell me your solution such as what i need to ask developer do, what i should put in my test?. I have trouble with it when proceed UI automation testing for ng2-dragula block with protractor