-
-
Save rcorreia/2362544 to your computer and use it in GitHub Desktop.
(function( $ ) { | |
$.fn.simulateDragDrop = function(options) { | |
return this.each(function() { | |
new $.simulateDragDrop(this, options); | |
}); | |
}; | |
$.simulateDragDrop = function(elem, options) { | |
this.options = options; | |
this.simulateEvent(elem, options); | |
}; | |
$.extend($.simulateDragDrop.prototype, { | |
simulateEvent: function(elem, options) { | |
/*Simulating drag start*/ | |
var type = 'dragstart'; | |
var event = this.createEvent(type); | |
this.dispatchEvent(elem, type, event); | |
/*Simulating drop*/ | |
type = 'drop'; | |
var dropEvent = this.createEvent(type, {}); | |
dropEvent.dataTransfer = event.dataTransfer; | |
this.dispatchEvent($(options.dropTarget)[0], type, dropEvent); | |
/*Simulating drag end*/ | |
type = 'dragend'; | |
var dragEndEvent = this.createEvent(type, {}); | |
dragEndEvent.dataTransfer = event.dataTransfer; | |
this.dispatchEvent(elem, type, dragEndEvent); | |
}, | |
createEvent: function(type) { | |
var event = document.createEvent("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; | |
}, | |
dispatchEvent: function(elem, type, event) { | |
if(elem.dispatchEvent) { | |
elem.dispatchEvent(event); | |
}else if( elem.fireEvent ) { | |
elem.fireEvent("on"+type, event); | |
} | |
} | |
}); | |
})(jQuery); |
Hi, for all of you who search how to drag and drop element found by XPath: https://sudonull.com/post/3102-How-we-tested-drag-drop-in-HTML5 . I did it in C#, Selenium Web Driver and worked perfect. Note that only the first element is searched by Xpath and the second by css.
Hi All,
I have tried to use this but keep getting this error. Can anyone help what wrong I am doing?
testUtility.dragAndDropElementForHTML5(".e-card-header-title.e-tooltip-text","tr > td:nth-of-type(2)");
Source element CSS: .e-card-header-title.e-tooltip-text
Destination element CSS: tr > td:nth-of-type(2)
public void dragAndDropElementForHTML5(String source, String target)
throws Exception {
String js_filepath = System.getProperty("user.dir") + "/src/test/resources/drag_and_drop_helper.js";
String java_script = "";
String text;
BufferedReader input = new BufferedReader(new FileReader(js_filepath));
StringBuffer buffer = new StringBuffer();
while ((text = input.readLine()) != null)
buffer.append(text + " ");
java_script = buffer.toString();
input.close();
java_script = java_script + "$('#" + source + "').simulate( '#" + target + "');";
((JavascriptExecutor) getDriver()).executeScript(java_script);
}
Error:
org.openqa.selenium.JavascriptException: javascript error: Syntax error, unrecognized expression: #.e-card-header-title.e-tooltip-text
(Session info: chrome=84.0.4147.105)
Build info: version: '3.141.59', revision: 'e82be7d358', time: '2018-11-14T08:17:03'
System info: host: 'My-MacBook-Pro.local', ip: '2401:4900:33b5:7c07:fd71:548f:f938:f7b%en0', os.name: 'Mac OS X', os.arch: 'x86_64', os.version: '10.15.5', java.version: '1.8.0_152'
Driver info: org.openqa.selenium.remote.RemoteWebDriver
Capabilities {acceptInsecureCerts: false, browserName: chrome, browserVersion: 84.0.4147.105, chrome: {chromedriverVersion: 83.0.4103.39 (ccbf011cb2d2b..., userDataDir: /var/folders/83/1n1cg9mx25b...}, goog:chromeOptions: {debuggerAddress: localhost:56659}, javascriptEnabled: true, networkConnectionEnabled: false, pageLoadStrategy: normal, platform: MAC, platformName: MAC, proxy: Proxy(), setWindowRect: true, strictFileInteractability: false, timeouts: {implicit: 0, pageLoad: 300000, script: 30000}, unhandledPromptBehavior: dismiss and notify, webauthn:virtualAuthenticators: true, webdriver.remote.sessionid: daf3cb9f97205a7bc0d6b0b163a...}
Session ID: daf3cb9f97205a7bc0d6b0b163abbed3
@Rameshwar-Juptimath - You're using an incorrect css selector in either your source or target. You'll need to change the code to :
Old :
java_script = java_script + "$('#" + source + "').simulate( '#" + target + "');";
New :
java_script = java_script + "$('" + source + "').simulate( '" + target + "');";
@rookieInTraining - I tried with the above code but now I'm getting below exception
org.openqa.selenium.JavascriptException: javascript error: missing ) after argument list
(Session info: chrome=92.0.4515.159)
Build info: version: '3.141.59', revision: 'e82be7d358', time: '2018-11-14T08:17:03'
System info: host: 'Rameshwars-MacBook-Pro.local', ip: 'fe80:0:0:0:1cf0:c93e:fa9f:a663%en0', os.name: 'Mac OS X', os.arch: 'x86_64', os.version: '10.15.7', java.version: '1.8.0_152'
Driver info: org.openqa.selenium.remote.RemoteWebDriver
Capabilities {acceptInsecureCerts: false, browserName: chrome, browserVersion: 92.0.4515.159, chrome: {chromedriverVersion: 92.0.4515.43 (8c61b7e2989f2..., userDataDir: /var/folders/83/1n1cg9mx25b...}, goog:chromeOptions: {debuggerAddress: localhost:49645}, javascriptEnabled: true, networkConnectionEnabled: false, pageLoadStrategy: normal, platform: MAC, platformName: MAC, proxy: Proxy(), setWindowRect: true, strictFileInteractability: false, timeouts: {implicit: 0, pageLoad: 300000, script: 30000}, unhandledPromptBehavior: dismiss and notify, webauthn:extension:credBlob: true, webauthn:extension:largeBlob: true, webauthn:virtualAuthenticators: true, webdriver.remote.sessionid: d76aa1032649d438d6c60e71e90...}
Session ID: d76aa1032649d438d6c60e71e908c237
What if I don't have IDs for the elements? Is there any other way around?
@cnparmar Did you find a workaround for this?
hello, any solution for ReactJs? Thanks
Did you find a solution for this? I'm facing the same issue.