Improve drag-and-drop JS event emulation on Selenium 3 (#408)

minkphp · Jan 20, 2025 · 2cd7d77 · 2cd7d77
1 parent 717c5b3
commit 2cd7d77
Showing 1 changed file with 22 additions and 31 deletions.
diff --git a/src/Selenium2Driver.php b/src/Selenium2Driver.php
@@ -1025,44 +1025,35 @@ public function keyUp(string $xpath, $char, ?string $modifier = null)
 
     public function dragTo(string $sourceXpath, string $destinationXpath)
     {
-        $source      = $this->findElement($sourceXpath);
-        $destination = $this->findElement($destinationXpath);
+        $source = $this->findElement($sourceXpath);
+        $target = $this->findElement($destinationXpath);
 
-        $this->getWebDriverSession()->moveto(array(
-            'element' => $source->getID()
-        ));
-
-        $script = <<<JS
-(function (element) {
-    var event = document.createEvent("HTMLEvents");
+        $this->getWebDriverSession()->moveto(array('element' => $source->getID()));
+        $this->getWebDriverSession()->buttondown();
 
-    event.initEvent("dragstart", true, true);
-    event.dataTransfer = {};
+        $this->executeJsOnElement($source, <<<'JS'
+            (function (sourceElement) {
+                window['__minkDragAndDropSourceElement'] = sourceElement;
 
-    element.dispatchEvent(event);
-}({{ELEMENT}}));
-JS;
-        $this->executeJsOnElement($source, $script);
+                sourceElement.dispatchEvent(new DragEvent('dragstart', {bubbles: true, cancelable: true}));
+            }({{ELEMENT}}));
+JS
+        );
 
-        $this->getWebDriverSession()->buttondown();
-        if ($destination->getID() !== $source->getID()) {
-            $this->getWebDriverSession()->moveto(array(
-                'element' => $destination->getID()
-            ));
-        }
+        $this->getWebDriverSession()->moveto(array('element' => $target->getID()));
         $this->getWebDriverSession()->buttonup();
 
-        $script = <<<JS
-(function (element) {
-    var event = document.createEvent("HTMLEvents");
+        $this->executeJsOnElement($target, <<<'JS'
+            (function (targetElement) {
+                var sourceElement = window['__minkDragAndDropSourceElement'];
 
-    event.initEvent("drop", true, true);
-    event.dataTransfer = {};
-
-    element.dispatchEvent(event);
-}({{ELEMENT}}));
-JS;
-        $this->executeJsOnElement($destination, $script);
+                sourceElement.dispatchEvent(new DragEvent('drag', {bubbles: true, cancelable: true}));
+                targetElement.dispatchEvent(new DragEvent('dragover', {bubbles: true, cancelable: true}));
+                targetElement.dispatchEvent(new DragEvent('drop', {bubbles: true, cancelable: true}));
+                sourceElement.dispatchEvent(new DragEvent('dragend', {bubbles: true, cancelable: true}));
+            }({{ELEMENT}}));
+JS
+        );
     }
 
     public function executeScript(string $script)