Use webdriver JSONprotocol instead of current dragTo implementation

[tarjei]

I could not get my test to work when using the dragTo implementation in the Selenium2Driver, but this worked:

    private function performDragAndDrop(Element $element, Element $dropZone)
    {
        $session = $this->session->getDriver()->getWebDriverSession();

        //this requires a sequence of steps as follows:
//1st find the source and target/destination elements to use as reference to do the drag and drop
        $from = $session->element('xpath',$element->getXpath());
        $to = $session->element('xpath',$dropZone->getXpath());
//now perform drag and drop
        $session->moveto(array('element' => $from->getID())); //move to source location, using reference to source element
        $session->buttondown(""); //click mouse to start drag, defaults to left mouse button
        $session->moveto(array('element' => $to->getID())); //move to target location, using reference to target element
        $session->buttonup(""); //release mouse to complete drag and drop operation
//it may be worthwhile to encapsulate these steps into a function called draganddrop($src,$target), etc.
    }

Most of the code is just a cut and paste from an example I found in a comment on the internet(I cannot remember where), but it is fairly straight forward.

[stof]

Well, the only difference between your code and the driver is that your code does not trigger the events: https://github.com/Behat/MinkSelenium2Driver/blob/master/src/Behat/Mink/Driver/Selenium2Driver.php#L829

[tarjei]

Interesting. Then the question becomes, why did my code work and the code that also triggers the events not?

[stof]

@everzet do we really need to emulate the D&D events ? We are using the selenium API to trigger all actions there, so it should handle them, no ?

[everzet]

@stof Mink has and always had 2 responsibilities:

1. Provide single API to all emulators
2. Eliminate differences between emulators as much as possible

If all of the emulators emulate events, but Selenium doesn't, then it's a good idea for Mink to do it.

[sp0tteh]

The default behaviour of this function doesn't work with already binded drag/drop elements. (using jquery ui droppable / draggable).
Replacing the function with the one mentioned above works fine.

If this function can't be changed then are we able to get another function added with the following parts removed?:

 $script = <<<JS
(function (element) {
    var event = document.createEvent("HTMLEvents");

    event.initEvent("dragstart", true, true);
    event.dataTransfer = {};

    element.dispatchEvent(event);
}({{ELEMENT}}));
JS;
$this->withSyn()->executeJsOnXpath($sourceXpath, $script);

and:

 $script = <<<JS
(function (element) {
    var event = document.createEvent("HTMLEvents");

    event.initEvent("drop", true, true);
    event.dataTransfer = {};

    element.dispatchEvent(event);
}({{ELEMENT}}));
JS;
        $this->withSyn()->executeJsOnXpath($destinationXpath, $script);

Let me know if this would be accepted and I'll submit a pull request.

Thanks.

[aik099]

@allmyitjason , can you please send PR anyway? Without it I need to jump back and forth in the code just to see what has been changed compared to current implementation.

[aik099]

@tarjei:
Just to clarify: with current drag-n-drop implementation the drag works fine, but respective events aren't fired at all?
Drag-n-drop tests pass right now, because they are using jQueryUI draggable/droppable components to detect if a drag-n-drop operation succeeded. jQuery does pretty well in overcoming browser incompatibilities and firing correct events at correct times. There might be an issue however in cross-browser even firing code, that is used.

Improved code version is here: https://github.com/Behat/MinkSelenium2Driver/blob/master/src/Behat/Mink/Driver/Selenium2Driver.php#L684-L701
Original code version is here: https://github.com/Behat/MinkSelenium2Driver/blob/master/src/Behat/Mink/Driver/Selenium2Driver.php#L895-L902

As you can see if document.createEvent is missing in used browser, then no events are fired. Can you please try adding missing parts of cross-browser event triggering code to dragTo method and see if it helps you. And if it does I would be glad to see an PR from you.

@allmyitjason:
In your PR you provide alternative implementation of dragTo function. What is not working in current dragTo implementation for you? Are it events not being fired? If so, then please read beginning of this message, for more info.

[sp0tteh]

hi @aik099

Yea drop and drop events aren't being fired. I'll try with the updated js and will let you know if it resolves my issue.

[aik099]

@allmyitjason , please also update your PR if it does help you.

[sp0tteh]

@aik099:

I have just been testing the changes with the new js code and I still see the same result. The events aren't fired and text between the two elements are simply being highlighted. Same result is experienced in IE 9,10 / Firefox 23.

Using the above pull request code, the drag and drop works as expected in IE and FF.

This was the JS I added to
https://github.com/Behat/MinkSelenium2Driver/blob/master/src/Behat/Mink/Driver/Selenium2Driver.php#L894

$script = <<<JS
(function (element, eventName) {
    var event;
    if (document.createEvent) {
        event = document.createEvent("HTMLEvents");
        event.initEvent(eventName, true, true);
    } else {
        event = document.createEventObject();
        event.eventType = eventName;
    }

    event.eventName = eventName;

    if (document.createEvent) {
        element.dispatchEvent(event);
    } else {
        element.fireEvent("on" + event.eventType, event);
    }
}({{ELEMENT}}, 'dragstart'));
JS;

and
https://github.com/Behat/MinkSelenium2Driver/blob/master/src/Behat/Mink/Driver/Selenium2Driver.php#L912

 $script = <<<JS
(function (element, eventName) {
    var event;
    if (document.createEvent) {
        event = document.createEvent("HTMLEvents");
        event.initEvent(eventName, true, true);
    } else {
        event = document.createEventObject();
        event.eventType = eventName;
    }

    event.eventName = eventName;

    if (document.createEvent) {
        element.dispatchEvent(event);
    } else {
        element.fireEvent("on" + event.eventType, event);
    }
}({{ELEMENT}}, 'drop'));
JS;

[aik099]

Are you using jQuery to bind event listeners to drag events? If nope, then I'm strongly recommending that.

Also can you run tests locally for MinkSelenium2Driver? These tests are using jQueryUI/jQuery (as I've mentioned before), to verify, that drop has happened. They pass for me on Firefox 23 without problems.

[sp0tteh]

I'm using the jQuery UI draggable for the drag element.
And jQuery Fullcalendar plugin for the drop event.

Drag

$('#external-events div.external-event').each(function() {
        // it doesn't need to have a start or end
        var eventObject = {
            title: $.trim($(this).text()) // use the element's text as the event title
        };
        // store the Event Object in the DOM element so we can get to it later
        $(this).data('eventObject', eventObject);

        // make the event draggable using jQuery UI
        $(this).draggable({
            zIndex: 999,
            revert: true,      // will cause the event to go back to its
            revertDuration: 0  //  original position after the drag
        });

    });

Drop

$('#cal').fullCalendar({
    droppable: true,
    drop: function(date, allDay) {
        alert('drop');
    }
});

I'll have a look at the tests, but I not sure how to run them? So far been using Mink simply through codeception.

[aik099]

To run tests do the following:

1. clone the repo on disk, where you have both Selenium and WebServer installed from https://github.com/Behat/MinkSelenium2Driver url
2. create phpunit.xml file in cloned directory based on phpunit.xml.dist
3. put correct paths/urls in it

About your code:
And what is test code, that you're performing? I guess it's clicking on the input to open a calendar, but I can't guess what exactly are you dragging there.

[sp0tteh]

I have ran the tests and they did pass.

However I still feel this function should be added, as this is all an end user would be doing. Click on an element, drag and un-click. This is the exact function that I wan't to be able to test without having extra javascript running and possibly conflicting with any listening methods.

My current tests are simply clicking on an element and dropping on a day in the calendar. This is working fine in the browser if I do it myself, and is also working fine with the code in the above pull request.

I'm not too familiar with JavaScript listening methods, but somehow that extra JavaScript is conflicting.

The drag and drop code is all from the jQuery fullcalendar plugin (http://arshaw.com/fullcalendar/docs/dropping/drop/)