硒：拖动并从文件系统拖放到的webdriver？ [英] Selenium: Drag and Drop from file system to webdriver?

问题描述

我要测试Web应用程序，其中包含一拖从本地文件系统上载文件拖放区。
我的测试环境是基于C＃。为自动化测试我已经使用硒，但它不能从文件系统拖动文件。

还有一件事我想补充：上传面积div标签（无输入标签：\）。

我已经读了很多不同的文章，但没有一个版本，它为我工作。

那么，什么是做到这一点的最好方法是什么？的AutoIt（是否有可能在一个WebBrowser下降）？ Sikuli？

你对此有何看法？

问候

马尔科

解决方案

这是可能的硒独自一人，但它不是简单的。它需要注入新的输入元素在网页中接收通过的SendKeys 文件。然后，脚本需要通过发送的dragenter ，的dragover ，下降至模拟降事件到目标区域。

<预类=郎-C＃prettyprint-覆盖> IWebElement droparea = driver.FindElement（ By.Id（droparea））;
DropFile（droparea，@C：\ ... \image.png）;


<预类=郎-C＃prettyprint-覆盖> 静态无效DropFile（IWebElement目标字符串文件路径，诠释offsetX = 0，INT offsetY = 0）{
如果）
抛出新FileNotFoundException异常（文件路径）（File.Exists（文件路径！）;

IWebDriver司机=（（RemoteWebElement）目标）.WrappedDriver;
IJavaScriptExecutor JSE =（IJavaScriptExecutor）驱动程序;
WebDriverWait等待=新WebDriverWait（驱动程序，TimeSpan.FromSeconds（30））;

串JS_DROP_FILE = @
变种目标=参数[0]，
offsetX =参数[1]，
offsetY =参数[2]，
原稿= target.ownerDocument ||文件，
窗口= document.defaultView ||窗口;

VAR输入=使用document.createElement（'输入'）;
input.type ='文件';
input.style.display ='无';
input.onchange =函数（）{
target.scrollIntoView（真）;

VAR RECT = target.getBoundingClientRect（），
X = rect.left +（offsetX ||（rect.width>> 1）），由$ = rect.top +（offsetY ||（RECT b $。高度与GT;→1）），
dataTransfer = {文件：this.files};

['的dragenter'，'的dragover'，'下降']的forEach（功能（名）{
变种EVT = document.createEvent（'的MouseEvent'）;！
evt.initMouseEvent（姓名，0，0，窗口，0，0，0，X，Y，1，！ 1，1，1，0，NULL）;！
evt.dataTransfer = dataTransfer;
target.dispatchEvent（EVT）;
}）;

的setTimeout（函数（）{document.body.removeChild（输入）;}，25）;
};
document.body.appendChild（输入）;
返回输入;
;

IWebElement输入=（IWebElement）jse.ExecuteScript（JS_DROP_FILE，目标，offsetX，offsetY）;
input.SendKeys（文件路径）;
等。直到（ExpectedConditions.StalenessOf（输入））;
}


I have to test a web-application, which contains a drag and drop area for uploading files from the local file system. My test environment is based on C#. For the automation testing I have used Selenium, but it is not possible to drag files from the file system.

One more thing I want to add: The upload area is a div tag (No input tag :\ ).

I have already read a lot of different articles, but there wasn't a version, which worked for me.

So what's the best way to do it? AutoIT (is it possible to drop in a webbrowser)? Sikuli?

What's your opinion?

Regards

Marko

解决方案

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.

IWebElement droparea = driver.FindElement(By.Id("droparea"));
DropFile(droparea, @"C:\...\image.png");

static void DropFile(IWebElement target, string filePath, int offsetX = 0, int offsetY = 0) {
    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));
}

这篇关于硒：拖动并从文件系统拖放到的webdriver？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！