Regarding: HTML5 Drag and Drop with Selenium Webdriver #3604

[isaiahgrant]

NOTE: This is not an issue, but rather a temporary alternative for developers (like myself) whom are looking for their tests to function while this issue remains open. I would have liked to comment on the existing issue, but it has been closed for comments (:-/).

Meta -

OS: Ubuntu 16.04
Selenium Version: PHPUnit_Selenium 5.0.8 - 2015-10-23
Browser: Chrome

Browser Version: Version 58.0.3029.110 Built on Ubuntu , running on Ubuntu 16.04 (64-bit)

Expected Behavior -

As already known, drag and drop events using draggable and droppable attributes/functionality does not function as expected when ran in Laravel's Dusk tests (among others). Running a $browser->drag('#from','#to') from testers should automate dragging the "from" element to the "to" element firing the "dragstart", "dragover", and "drop" events.

Actual Behavior -

/**
     * Drag and drop from $source to $target.
     *
     * @param WebDriverElement $source
     * @param WebDriverElement $target
     * @return WebDriverActions
     */
    public function dragAndDrop(WebDriverElement $source, WebDriverElement $target)
    {
        $this->action->addAction(
            new WebDriverClickAndHoldAction($this->mouse, $source)
        );
        $this->action->addAction(
            new WebDriverMouseMoveAction($this->mouse, $target)
        );
        $this->action->addAction(
            new WebDriverButtonReleaseAction($this->mouse, $target)
        );

        return $this;
    }

This behavior, though in theory simulates a drag and drop, actually fires "mousedown" and "mouseup" events rather than the "dragstart", "dragover", and "drop" events.

Steps to reproduce -

$this->browse(function (Browser $browser) {
    $browser->setUp()->visit($this->url)->drag('#element-a', '#element-b');
}

Temporary solution

Create events for "mousedown" and "mouseup", on draggable and droppable elements (respectively), that trigger the dragstart and drop events (respectively).

-- Example:
Included is a jsfiddle link that provides the code necessary for user driven drag-and-drop as well as the Dusk test drag and drop simulation (though of course the dusk test cannot be ran from it):

Dusk "testable" Drag and Drop Fiddle

A highlight of the functionality:

    $("a[draggable='true']").on("mousedown", function(event) {
        $(this).trigger("dragstart");
    });

    $("div[droppable='true']").on("mouseup", function(event) {
        $(this).trigger("drop");
    });

[p0deje]

Laravel Dusk is not really related to Selenium, so I'm closing this issue. You should instead post one to Dusk issue tracker.

[isaiahgrant]

Will do! The issue # in the title was the only thing I was able to find on the matter so I thought it would be appropriate to attach to that.

Thank you.