Part of my web app has configuration that requires a file upload. This is currently implemented using AngularJS
我的web应用程序的一部分配置需要文件上传。这是目前使用AngularJS实现的。
<div ng-file-drop="onFileSelected($files)">Upload Files</div>
Dropping a file from the filesystem using Selenium seems nearly impossible and the SendKeys method wont work here as all I have is a div
and not an input
.
使用Selenium从文件系统中删除文件几乎是不可能的,SendKeys方法在这里不起作用,因为我只有一个div而不是一个输入。
The alternative seems to be to call the Angular function directly. How would I do this?
另一种方法似乎是直接调用角函数。我该怎么做呢?
1 个解决方案
#1
2
I'm pretty sure you can still find an input with type="file"
in your DOM.
我确信您仍然可以在DOM中找到type="file"的输入。
Let's take a look at an example Angular File Upload DEMO page. There is a ng-file-upload div that you can drag and drop files onto, but, if you would inspect the DOM, you'll see a hidden file input element that is actually responsible for the upload.
让我们看一个角度文件上传演示页面的例子。有一个ng-file-upload div可以拖放文件到上面,但是,如果您要检查DOM,您将看到一个隐藏的文件输入元素,它实际上负责上传。
What we can do in tests is make the input visible so that we can interact with it and send keys to it containing an absolute path to a file to upload. Example code to make the file input visible:
我们在测试中可以做的是使输入可见,这样我们就可以与它交互,并将包含绝对路径的键发送到要上载的文件。使文件输入可见的示例代码:
WebElement fileInput = driver.findElement(By.cssSelector("input[ng-model=files]"));
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("arguments[0].style.visibility = 'visible'; arguments[0].style.overflow = 'visible'; arguments[0].style.height = '1px'; arguments[0].style.width = '1px'; arguments[0].style.opacity = 1", fileInput);
fileInput.sendKeys("/absolute/path/to/a/file");
Sample code that works for the for the provided fiddle:
为提供的小提琴工作的示例代码:
driver.switchTo().frame("result");
// waiting for the element to appear
WebDriverWait wait = WebDriverWait(driver, 10);
WebElement fileInput = wait.until(ExpectedConditions.presencefElementLocated(By.cssSelector("input[ng-model=file]")));
// making the element visible
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("arguments[0].style.visibility = 'visible'; arguments[0].style.overflow = 'visible'; arguments[0].style.height = '1px'; arguments[0].style.width = '1px'; arguments[0].style.opacity = 1",
fileInput);
fileInput.sendKeys("/absolute/path/to/the/file")
Once the path is sent to the input, the upload process is triggered.
一旦路径被发送到输入,就会触发上传过程。
#1
2
I'm pretty sure you can still find an input with type="file"
in your DOM.
我确信您仍然可以在DOM中找到type="file"的输入。
Let's take a look at an example Angular File Upload DEMO page. There is a ng-file-upload div that you can drag and drop files onto, but, if you would inspect the DOM, you'll see a hidden file input element that is actually responsible for the upload.
让我们看一个角度文件上传演示页面的例子。有一个ng-file-upload div可以拖放文件到上面,但是,如果您要检查DOM,您将看到一个隐藏的文件输入元素,它实际上负责上传。
What we can do in tests is make the input visible so that we can interact with it and send keys to it containing an absolute path to a file to upload. Example code to make the file input visible:
我们在测试中可以做的是使输入可见,这样我们就可以与它交互,并将包含绝对路径的键发送到要上载的文件。使文件输入可见的示例代码:
WebElement fileInput = driver.findElement(By.cssSelector("input[ng-model=files]"));
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("arguments[0].style.visibility = 'visible'; arguments[0].style.overflow = 'visible'; arguments[0].style.height = '1px'; arguments[0].style.width = '1px'; arguments[0].style.opacity = 1", fileInput);
fileInput.sendKeys("/absolute/path/to/a/file");
Sample code that works for the for the provided fiddle:
为提供的小提琴工作的示例代码:
driver.switchTo().frame("result");
// waiting for the element to appear
WebDriverWait wait = WebDriverWait(driver, 10);
WebElement fileInput = wait.until(ExpectedConditions.presencefElementLocated(By.cssSelector("input[ng-model=file]")));
// making the element visible
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("arguments[0].style.visibility = 'visible'; arguments[0].style.overflow = 'visible'; arguments[0].style.height = '1px'; arguments[0].style.width = '1px'; arguments[0].style.opacity = 1",
fileInput);
fileInput.sendKeys("/absolute/path/to/the/file")
Once the path is sent to the input, the upload process is triggered.
一旦路径被发送到输入,就会触发上传过程。