Selen: przeciągnij i upuść z systemu plików na webdrivera?

Question

Muszę przetestować aplikację internetową, która zawiera obszar przeciągania i upuszczania do przesyłania plików z lokalnego systemu plików. Moje środowisko testowe oparte jest na języku C#.

Do testowania automatyki użyłem Selenium, ale nie można przeciągać plików z systemu plików. Obszar przesyłania to znacznik div (bez tagu input). Więc jaki jest najlepszy sposób na zrobienie tego? AutoIt (czy można zrzucić przeglądarkę internetową)? Sikuli?

Answer 1

Jest to możliwe przy użyciu samego Selenu, ale nie jest to proste. Wymaga wstrzyknięcia nowego elementu INPUT na stronie, aby odebrać plik przez SendKeys. Następnie skrypt musi zasymulować spadek, wysyłając zdarzenia do docelowego obszaru.

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() { 
      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('DragEvent'); 
      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)); 
} 

Answer 2

poprzednią odpowiedź jest poprawna i doskonale współpracuje ze sterownikiem Chrome, jednak może mieć problemy z kierowcą Mozilla Gecko, która rzuca org.openqa.selenium.ElementNotVisibleException

Aby tego uniknąć, usuń input.style.display = 'none';

Możesz użyć input.style.opacity = 0;, jeśli chcesz, aby zniknął.