Selenium: Drag and Drop from File System to Webdriver

Selenium: Drag and Drop from file system to WebDriver?

It's possible with Selenium alone, but it's not simple. It requires to inject a new INPUT element in the page to receive the file through SendKeys. Then, the script needs to simulate the drop by sending the dragenter, dragover, drop events to the targeted area.

static void Main(string[] args)
{
    var driver = new ChromeDriver();
    driver.Url = "https://react-dropzone.js.org/";

    IWebElement droparea = driver.FindElementByCssSelector("[data-preview='Basic example'] [style]");
    DropFile(droparea, @"C:\Users\florent\Desktop\capture.png");

    driver.Quit();
}

const string JS_DROP_FILE = "for(var b=arguments[0],k=arguments[1],l=arguments[2],c=b.ownerDocument,m=0;;){var e=b.getBoundingClientRect(),g=e.left+(k||e.width/2),h=e.top+(l||e.height/2),f=c.elementFromPoint(g,h);if(f&&b.contains(f))break;if(1<++m)throw b=Error('Element not interractable'),b.code=15,b;b.scrollIntoView({behavior:'instant',block:'center',inline:'center'})}var a=c.createElement('INPUT');a.setAttribute('type','file');a.setAttribute('style','position:fixed;z-index:2147483647;left:0;top:0;');a.onchange=function(){var b={effectAllowed:'all',dropEffect:'none',types:['Files'],files:this.files,setData:function(){},getData:function(){},clearData:function(){},setDragImage:function(){}};window.DataTransferItemList&&(b.items=Object.setPrototypeOf([Object.setPrototypeOf({kind:'file',type:this.files[0].type,file:this.files[0],getAsFile:function(){return this.file},getAsString:function(b){var a=new FileReader;a.onload=function(a){b(a.target.result)};a.readAsText(this.file)}},DataTransferItem.prototype)],DataTransferItemList.prototype));Object.setPrototypeOf(b,DataTransfer.prototype);['dragenter','dragover','drop'].forEach(function(a){var d=c.createEvent('DragEvent');d.initMouseEvent(a,!0,!0,c.defaultView,0,0,0,g,h,!1,!1,!1,!1,0,null);Object.setPrototypeOf(d,null);d.dataTransfer=b;Object.setPrototypeOf(d,DragEvent.prototype);f.dispatchEvent(d)});a.parentElement.removeChild(a)};c.documentElement.appendChild(a);a.getBoundingClientRect();return a;";

static void DropFile(IWebElement target, string filePath, double offsetX = 0, double offsetY = 0)
{
    if (!File.Exists(filePath))
        throw new FileNotFoundException(filePath);

    IWebDriver driver = ((RemoteWebElement)target).WrappedDriver;
    IJavaScriptExecutor jse = (IJavaScriptExecutor)driver;

    IWebElement input = (IWebElement)jse.ExecuteScript(JS_DROP_FILE, target, offsetX, offsetY);
    input.SendKeys(filePath);
}

Source: https://gist.github.com/florentbr/349b1ab024ca9f3de56e6bf8af2ac69e

How to do drag and drop from file system to browser using Selenium Web driver

You better use autoit for it.

Drag and Drop

Is there a way to achieve drag and drop for Magento image upload using Selenium?

The interim solution to my problem is AutoIt.

Big thanks to @KunduK How to upload image with angular components using python selenium

I targeted the xpath of the image upload area then autoit did the rest with the code below:

autoit.win_wait_active("File Upload",5)
if autoit.win_exists("File Upload"):
   autoit.control_send("File Upload","Edit1",filepath+"{ENTER}")```

Automate drag & drop functionality [File Upload] using Selenium WebDriver in C#

Are you using HTML5 drag and drop? I am stuck with the same issue, and seeing from the various threads, using HTML5 drag and drop has been bugged since few years ago and doesn't seem to be fixed. I found some alternative ways from github achieves, they require javascript execution though, as well as translating the code to C# : http://elementalselenium.com/tips/39-drag-and-drop

Drag and drop local file in browser with Selenium WebDriver and JUnit?

Thank you for your kind answer. I tried the Robot class this morning, but it wasn't able to cope with local files.
I eventually found this video, and I'm now working my problem out. Fortunately AutoIt (which is a little bit like Sikuli I guess) can be plugged in Selenium.
Thanks anyway!

---

Related Topics