CODEWITHSUNDEEP
javaseleniumdrag-and-dropwebdriver
vamsi chandra
vamsi chandra

Reputation: 61

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

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?

Upvotes: 3

Views: 4333

Answers (2)

Hanan Ohayon
Hanan Ohayon

Reputation: 11

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));

Upvotes: 0

Petr Janeček
Petr Janeček

Reputation: 38454

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).

Upvotes: 1

Related Questions