Dragging and dropping a file from the file system with Selenium webdriver

Question

i am testing a Web-Application, One of the scenario is the ability to drag a file from the file system and drop it onto the component.

similar to this :

http://s3u.github.com/har-view/

http://html5demos.com/dnd-upload

Is there a way to simulate dropping a file from the file system onto an element using web driver?

Answer 1

No. Unfortunately, WebDriver only drives the browser and can't touch anything outside of it. If you want to drag'n'drop something in, you'll have to use Robot or any other tool (there might be a library for this).

Answer 2

The only thing that helped me was running a JS code that i found in Selenium: Drag and Drop from file system to webdriver?

Just copy paste the whole thing in to your project.

See: static void DropFile(IWebElement target, string filePath, int offsetX = 0, int offsetY = 0) {

        if (String.IsNullOrWhiteSpace(filePath))
        {
            throw new ArgumentNullException("filePath");
        }

        if (!File.Exists(filePath))
        {
            throw new FileNotFoundException(filePath);
        }



        IWebDriver driver = ((RemoteWebElement)target).WrappedDriver;
        IJavaScriptExecutor jse = (IJavaScriptExecutor)driver;
        WebDriverWait wait = new WebDriverWait(driver, TimeSpan.FromSeconds(30));


        string JS_DROP_FILE = @"
    var target = arguments[0],
        offsetX = arguments[1],
        offsetY = arguments[2],
        document = target.ownerDocument || document,
        window = document.defaultView || window;

    var input = document.createElement('INPUT');
    input.type = 'file';
    input.style.display = 'none';
    input.onchange = function () {
      target.scrollIntoView(true);

      var rect = target.getBoundingClientRect(),
          x = rect.left + (offsetX || (rect.width >> 1)),
          y = rect.top + (offsetY || (rect.height >> 1)),
          dataTransfer = { files: this.files };

      ['dragenter', 'dragover', 'drop'].forEach(function (name) {
        var evt = document.createEvent('MouseEvent');
        evt.initMouseEvent(name, !0, !0, window, 0, 0, 0, x, y, !1, !1, !1, !1, 0, null);
        evt.dataTransfer = dataTransfer;
        target.dispatchEvent(evt);
      });

      setTimeout(function () { document.body.removeChild(input); }, 25);
    };
    document.body.appendChild(input);
    return input;
    ";

        IWebElement input = (IWebElement)jse.ExecuteScript(JS_DROP_FILE, target, offsetX, offsetY);
        input.SendKeys(filePath);
        wait.Until(ExpectedConditions.StalenessOf(input));