c# - studio - Selenium: ¿Arrastrar y soltar del sistema de archivos a WebDriver?

selenium c# guru99

Question

Tengo que probar una aplicación web que contiene un área de arrastrar y soltar para cargar archivos desde el sistema de archivos local. Mi entorno de prueba se basa en C #.

Para las pruebas de automatización he usado Selenium, pero no es posible arrastrar archivos desde el sistema de archivos. El área de carga es una etiqueta div (sin etiqueta de input ). Entonces, ¿cuál es la mejor manera de hacerlo? AutoIt (¿es posible colocarlo en un navegador web)? Sikuli?

Answer 1

Es posible con Selenium solo, pero no es simple. Requiere inyectar un nuevo elemento INPUT en la página para recibir el archivo a través de SendKeys . Luego, el script necesita simular la caída enviando los dragenter , dragover y drop al área objetivo.

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

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

Answer 2

La respuesta anterior es correcta y funciona perfectamente con el controlador de Chrome, sin embargo, podría tener problemas con el controlador Gecko de Mozilla, que arroja org.openqa.selenium.ElementNotVisibleException

Para evitar eso, elimine input.style.display = ''none'';

Puede usar input.style.opacity = 0; si necesitas hacerlo desaparecer.