DragDrop.cs

DragDrop.cs

/// <summary>
/// Extension method for IWebDriver that performs a drag-and-drop operation using JavaScript.
/// This method highlights the source and destination elements for visual feedback during the operation.
/// </summary>
/// <param name="_driver">The IWebDriver instance controlling the browser.</param>
/// <param name="source">The IWebElement representing the element to be dragged.</param>
/// <param name="destination">The IWebElement representing the target element where the source will be dropped.</param>
public static void DragAndDropUsingJS(this IWebDriver _driver, IWebElement source, IWebElement destination)
{
    // Highlight the source and destination elements for visual feedback during the drag-and-drop operation.
    source.Highlight(_driver);
    destination.Highlight(_driver);

    // Create an instance of the Actions class to facilitate complex user interactions.
    Actions actions = new Actions(_driver);

    // Execute a JavaScript function to perform the drag-and-drop operation.
    ((IJavaScriptExecutor)_driver).ExecuteScript(
        // JavaScript code to simulate drag-and-drop using custom events.
        "function createEvent(typeOfEvent) {\n" +
        "  var event = document.createEvent(\"CustomEvent\");\n" +
        "  event.initCustomEvent(typeOfEvent, true, true, null);\n" +
        "  event.dataTransfer = {\n" +
        "    data: {},\n" +
        "    setData: function (key, value) {\n" +
        "      this.data[key] = value;\n" +
        "    },\n" +
        "    getData: function (key) {\n" +
        "      return this.data[key];\n" +
        "    }\n" +
        "  };\n" +
        "  return event;\n" +
        "}\n\n" +
        "function dispatchEvent(element, event, transferData) {\n" +
        "  if (transferData !== undefined) {\n" +
        "    event.dataTransfer = transferData;\n" +
        "  }\n" +
        "  if (element.dispatchEvent) {\n" +
        "    element.dispatchEvent(event);\n" +
        "  } else if (element.fireEvent) {\n" +
        "    element.fireEvent(\"on\" + event.type, event);\n" +
        "  }\n" +
        "}\n\n" +
        "var source = arguments[0];\n" +
        "var target = arguments[1];\n" +
        "var dragstartEvent = createEvent('dragstart');\n" +
        "dispatchEvent(source, dragstartEvent);\n" +
        "var dragoverEvent = createEvent('dragover');\n" +
        "dispatchEvent(target, dragoverEvent);\n" +
        "var dropEvent = createEvent('drop');\n" +
        "dropEvent.dataTransfer = dragstartEvent.dataTransfer;\n" +
        "dispatchEvent(target, dropEvent);\n" +
        "var dragendEvent = createEvent('dragend');\n" +
        "dragendEvent.dataTransfer = dropEvent.dataTransfer;\n" +
        "dispatchEvent(source, dragendEvent);\n",
        // Pass the source and destination elements as arguments to the JavaScript function.
        source, destination);

    // Output a message indicating that the drag-and-drop operation was successful.
    Console.WriteLine("Drag and drop successful!");
}


/// <summary>
/// Performs a drag-and-drop operation using JavaScript.
/// </summary>
/// <param name="_driver">The IWebDriver instance.</param>
/// <param name="sourceElement">The source element to drag.</param>
/// <param name="targetElement">The target element to drop onto.</param>
public static void DragAndDropUsingJavaScript(this IWebDriver _driver, IWebElement sourceElement, IWebElement targetElement)
{
    // Execute JavaScript for drag and drop
    var js = (IJavaScriptExecutor)_driver;

    // Execute JavaScript for drag and drop
    string script = @"function createEvent(typeOfEvent) {
                var event = document.createEvent(""CustomEvent"");
                event.initCustomEvent(typeOfEvent, true, true, null);
                event.dataTransfer = {
                    data: {},
                    setData: function(key, value) {
                        this.data[key] = value;
                    },
                    getData: function(key) {
                        return this.data[key];
                    }
                };
                return event;
            }
            function dispatchEvent(element, event, transferData) {
                if (transferData !== undefined) {
                    event.dataTransfer = transferData;
                }
                if (element.dispatchEvent) {
                    element.dispatchEvent(event);
                } else if (element.fireEvent) {
                    element.fireEvent(""on"" + event.type, event);
                }
            }
            function dragAndDrop(element, target) {
                var dragStartEvent = createEvent('dragstart');
                dispatchEvent(element, dragStartEvent);
                var dropEvent = createEvent('drop');
                dispatchEvent(target, dropEvent, dragStartEvent.dataTransfer);
                var dragEndEvent = createEvent('dragend');
                dispatchEvent(element, dragEndEvent, dragStartEvent.dataTransfer);
            }
            dragAndDrop(arguments[0], arguments[1]);";

    // Execute the JavaScript script
    js.ExecuteScript(script, sourceElement, targetElement);

    // Output a message indicating that the drag-and-drop operation was successful.
    Console.WriteLine("Drag and drop successful!");
}
/// <summary>
/// This is an extension method for IWebDriver that performs a drag-and-drop operation using the HTML5 Drag and Drop API.
/// </summary>
/// <param name="_driver">The IWebDriver instance.</param>
/// <param name="sourceElement">The source element to be dragged.</param>
/// <param name="targetElement">The target element to drop the source element onto.</param>
public static void DragAndDropUsingHTML5API(this IWebDriver _driver, IWebElement sourceElement, IWebElement targetElement)
{
    var js = (IJavaScriptExecutor)_driver;
    string script = @"
function simulateDragDrop(sourceNode, destinationNode) {
    var EVENT_TYPES = {
        DRAG_END: 'dragend',
        DRAG_START: 'dragstart',
        DROP: 'drop'
    }

    function createCustomEvent(type) {
        var event = new CustomEvent('CustomEvent')
        event.initCustomEvent(type, true, true, null)
        event.dataTransfer = {
            data: {},
            setData: function(type, val) {
                this.data[type] = val
            },
            getData: function(type) {
                return this.data[type]
            }
        }
        return event
    }

    function dispatchEvent(node, type, event) {
        if (node.dispatchEvent) {
            return node.dispatchEvent(event)
        }
        if (node.fireEvent) {
            return node.fireEvent('on' + type, event)
        }
    }

    var event = createCustomEvent(EVENT_TYPES.DRAG_START)
    dispatchEvent(sourceNode, EVENT_TYPES.DRAG_START, event)

    var dropEvent = createCustomEvent(EVENT_TYPES.DROP)
    dropEvent.dataTransfer = event.dataTransfer
    dispatchEvent(destinationNode, EVENT_TYPES.DROP, dropEvent)

    var dragEndEvent = createCustomEvent(EVENT_TYPES.DRAG_END)
    dragEndEvent.dataTransfer = event.dataTransfer
    dispatchEvent(sourceNode, EVENT_TYPES.DRAG_END, dragEndEvent)
}

simulateDragDrop(arguments[0], arguments[1])";

    js.ExecuteScript(script, sourceElement, targetElement);
    // Output a message indicating that the drag-and-drop operation was successful.
    Console.WriteLine("Drag and drop successful!");
}