Skip to content

Instantly share code, notes, and snippets.

@veeresh-bikkaneti

veeresh-bikkaneti/DragDrop.cs

Created August 27, 2024 22:44
Show Gist options
  • Save veeresh-bikkaneti/6a5951796b587b408e88c621cb53bff8 to your computer and use it in GitHub Desktop.
Save veeresh-bikkaneti/6a5951796b587b408e88c621cb53bff8 to your computer and use it in GitHub Desktop.
Download ZIP
DragDrop.cs
Raw
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!");
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment