More JS, Less jQuery (Drag-and-Drop)

Author: mdmintz

help_docs/method_summary.md

@@ -163,7 +163,7 @@ self.hover_and_double_click(
 
 self.drag_and_drop(drag_selector, drop_selector,
                    drag_by="css selector", drop_by="css selector",
-                   timeout=None)
+                   timeout=None, jquery=False)
 
 self.drag_and_drop_with_offset(
     selector, x, y, by="css selector", timeout=None)

seleniumbase/fixtures/base_case.py

@@ -2275,6 +2275,7 @@ def drag_and_drop(
         drag_by="css selector",
         drop_by="css selector",
         timeout=None,
+        jquery=False,
     ):
         """Drag and drop an element from one selector to another."""
         self.__check_scope()
@@ -2292,22 +2293,28 @@ def drag_and_drop(
             drag_selector, by=drag_by, timeout=timeout
         )
         self.__demo_mode_highlight_if_active(drag_selector, drag_by)
-        self.wait_for_element_visible(
+        drop_element = self.wait_for_element_visible(
             drop_selector, by=drop_by, timeout=timeout
         )
         self.__demo_mode_highlight_if_active(drop_selector, drop_by)
         self.scroll_to(drag_selector, by=drag_by)
         drag_selector = self.convert_to_css_selector(drag_selector, drag_by)
         drop_selector = self.convert_to_css_selector(drop_selector, drop_by)
-        drag_and_drop_script = js_utils.get_drag_and_drop_script()
-        self.safe_execute_script(
-            drag_and_drop_script
-            + (
-                "$('%s').simulateDragDrop("
-                "{dropTarget: "
-                "'%s'});" % (drag_selector, drop_selector)
+        if not jquery:
+            drag_and_drop_script = js_utils.get_js_drag_and_drop_script()
+            self.execute_script(
+                drag_and_drop_script, drag_element, drop_element, 0, 0, 1, None
+            )
+        else:
+            drag_and_drop_script = js_utils.get_drag_and_drop_script()
+            self.safe_execute_script(
+                drag_and_drop_script
+                + (
+                    "$('%s').simulateDragDrop("
+                    "{dropTarget: "
+                    "'%s'});" % (drag_selector, drop_selector)
+                )
             )
-        )
         if self.demo_mode:
             self.__demo_mode_pause_if_active()
         elif self.slow_mode:
@@ -2332,7 +2339,7 @@ def drag_and_drop_with_offset(
         script = js_utils.get_drag_and_drop_with_offset_script(
             css_selector, x, y
         )
-        self.safe_execute_script(script)
+        self.execute_script(script)
         if self.demo_mode:
             self.__demo_mode_pause_if_active()
         elif self.slow_mode:

seleniumbase/fixtures/js_utils.py

@@ -151,8 +151,10 @@ def raise_unable_to_load_jquery_exception(driver):
 
 
 def activate_jquery(driver):
-    """If "jQuery is not defined", use this method to activate it for use.
-    This happens because jQuery is not always defined on web sites."""
+    """
+    If "jQuery is not defined" on a website, use this method to activate it.
+    This method is needed because jQuery is not always defined on web sites.
+    """
     try:
         # Let's first find out if jQuery is already defined.
         driver.execute_script("jQuery('html');")
@@ -163,20 +165,15 @@ def activate_jquery(driver):
         pass
     jquery_js = constants.JQuery.MIN_JS
     add_js_link(driver, jquery_js)
-    for x in range(25):
+    for x in range(27):
         # jQuery needs a small amount of time to activate.
         try:
             driver.execute_script("jQuery('html');")
             return
         except Exception:
+            if x == 15:
+                add_js_link(driver, jquery_js)
             time.sleep(0.1)
-    try:
-        add_js_link(driver, jquery_js)
-        time.sleep(0.5)
-        driver.execute_script("jQuery('head');")
-        return
-    except Exception:
-        pass
     # Since jQuery still isn't activating, give up and raise an exception
     raise_unable_to_load_jquery_exception(driver)
 
@@ -1021,6 +1018,8 @@ def slow_scroll_to_element(driver, element, browser):
 
 
 def get_drag_and_drop_script():
+    # This script uses jQuery to perform a Drag-and-Drop action.
+    # (Requires the Drag-selector and the Drop-selector to work)
     script = r"""(function( $ ) {
         $.fn.simulateDragDrop = function(options) {
                 return this.each(function() {
@@ -1078,7 +1077,57 @@ def get_drag_and_drop_script():
     return script
 
 
+def get_js_drag_and_drop_script():
+    # HTML5 Drag-and-Drop script (Requires extra parameters to work)
+    # param1 (WebElement): Source element to drag
+    # param2 (WebElement): Target element for the drop (Optional)
+    # param3 (int): Optional - Drop offset x relative to the target
+    # param4 (int): Optional - Drop offset y relative to the target
+    # param4 (int): Optional - Delay in milliseconds (default = 1ms)
+    # param5 (string): Optional - Key pressed (ALT or CTRL or SHIFT)
+    script = """var t=arguments,e=t[0],n=t[1],i=t[2]||0,o=t[3]||0,r=t[4]||1,
+        a=t[5]||'',s='alt'===a||'\ue00a'===a,l='ctrl'===a||'\ue009'===a,
+        c='shift'===a||'\ue008'===a,u=e.ownerDocument,
+        f=e.getBoundingClientRect(),g=n?n.getBoundingClientRect():f,
+        p=f.left+f.width/2,d=f.top+f.height/2,h=g.left+(i||g.width/2),
+        m=g.top+(o||g.height/2),v=u.elementFromPoint(p,d),
+        y=u.elementFromPoint(h,m);if(!v||!y){
+        var E=new Error('source or target element is not interactable');
+        throw E.code=15,E}var _={constructor:DataTransfer,effectAllowed:null,
+        dropEffect:null,types:[],files:Object.setPrototypeOf([],null),
+        _items:Object.setPrototypeOf([],{add:function(t,e){
+        this[this.length]={_data:''+t,kind:'string',
+        type:e,getAsFile:function(){},getAsString:function(t){t(this._data)}},
+        _.types.push(e)},remove:function(t){
+        Array.prototype.splice.call(this,65535&t,1),_.types.splice(65535&t,1)},
+        clear:function(t,e){this.length=0,_.types.length=0}}),
+        setData:function(t,e){this.clearData(t),this._items.add(e,t)},
+        getData:function(t){for(var e=this._items.length;
+        e--&&this._items[e].type!==t;);return e>=0?this._items[e]._data:null},
+        clearData:function(t){for(var e=this._items.length;
+        e--&&this._items[e].type!==t;);this._items.remove(e)},
+        setDragImage:function(t){}};function w(t,e,n,i){
+        for(var o=0;o<e.length;++o){var r=u.createEvent('MouseEvent');
+        r.initMouseEvent(e[o],!0,!0,u.defaultView,0,0,0,p,d,l,s,c,!1,0,null),
+        t.dispatchEvent(r)}i&&setTimeout(i,n)}function D(t,e,n,i){
+        var o=u.createEvent('DragEvent');o.initMouseEvent(
+        e,!0,!0,u.defaultView,0,0,0,p,d,l,s,c,!1,0,null),Object.setPrototypeOf(
+        o,null),o.dataTransfer=_,Object.setPrototypeOf(o,DragEvent.prototype),
+        t.dispatchEvent(o),i&&setTimeout(i,n)}
+        'items'in DataTransfer.prototype&&(_.items=_._items),
+        w(v,['pointerdown','mousedown'],1,function(){
+        for(var t=v;t&&!t.draggable;)t=t.parentElement;if(t&&t.contains(v)){
+        var e=y.getBoundingClientRect();D(v,'dragstart',r,function(){
+        var t=y.getBoundingClientRect();p=t.left+h-e.left,d=t.top+m-e.top,D(
+        y,'dragenter',1,function(){D(y,'dragover',r,
+        function(){D(u.elementFromPoint(p,d),'drop',1,function(){D(v,'dragend',
+        1,function(){w(u.elementFromPoint(p,d),
+        ['mouseup','pointerup'])})})})})})}})"""
+    return script
+
+
 def get_drag_and_drop_with_offset_script(selector, x, y):
+    # This script uses pure JS (No jQuery)
     script_a = """
         var source = document.querySelector("%s");
         var offsetX = %f;