Мне нужно протестировать веб-приложение, которое содержит область перетаскивания для загрузки файлов из локальной файловой системы. Моя тестовая среда основана на С#.
Для тестирования автоматизации я использовал Selenium, но перетащить файлы из файловой системы невозможно. Область загрузки - тег div (тег input). Так что лучший способ сделать это? AutoIt (можно ли бросить в веб-браузер)? Sikuli?
Это возможно только с Селеном, но это не просто. Для ввода файла через SendKeys требуется ввести новый элемент INPUT на странице. Затем сценарий должен имитировать падение, отправив dragenter, dragover, drop события в целевую область.
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);
}
Источник: https://gist.github.com/florentbr/349b1ab024ca9f3de56e6bf8af2ac69e
Предыдущий ответ правильный и отлично работает с драйвером Chrome, однако может иметь проблемы с драйвером Mozilla Gecko, который выдает org.openqa.selenium.ElementNotVisibleException
Чтобы избежать этого, удалите input.style.display = 'none';
Вы можете использовать input.style.opacity = 0;, если вам нужно его исчезнуть.