如何使用量角器控制 Windows 文件选择器答案

【问题标题】：How can I control the windows File Selector using protractor如何使用量角器控制 Windows 文件选择器
【发布时间】：2016-05-13 01:24:58
【问题描述】：

我点击了一个上传按钮，它打开了一个 Windows 文件选择器。我无法使用量角器在该文件选择器对话框中写入文件的路径。

我尝试通过在量角器中传递 ctrl+v 按键将文本复制到剪贴板并将其粘贴到文件上传。可以复制文本，但无法粘贴。

现在我打算使用robotjs或其他一些工具来实现这一点。
知道我们如何在量角器中做到这一点吗？

【问题讨论】：

理想情况下会有一个输入字段，您可以将目录路径发布到并完全避免文件浏览器，因为robotjs在运行测试时会使您的桌面无用，因为如果您在需要键入时移动鼠标path out 它会在那里输入它（例如你的文本编辑器）。但是，我能够让它工作，并且可以在我稍后回家时发布代码示例。

标签： protractor

【解决方案1】：

你试过了吗？

// set file detector
var remote = require('../../node_modules/protractor/node_modules/selenium-webdriver/remote');
browser.setFileDetector(new remote.FileDetector());


var fileToUpload = '../sample.txt';
var absolutePath = path.resolve(__dirname, fileToUpload);

var fileElem = element(by.css('input[type="file"]'));

// Unhide file input
browser.executeScript("arguments[0].style.visibility = 'visible'; arguments[0].style.height = '1px'; arguments[0].style.width = '1px';  arguments[0].style.opacity = 1", fileElem.getWebElement());

fileElem.sendKeys(absolutePath);

// take a breath 
browser.driver.sleep(100);

// click upload button
element(by.css('button[data-ng-click="uploadFile(file)"]')).click(); // does post request

请查看this 和this 了解更多信息。

希望这会有所帮助。 :)

【讨论】：

感谢优质产品。该解决方案对我有用。
这行得通，但我不得不用'selenium-webdriver/remote'替换'../../node_modules/protractor/node_modules/selenium-webdriver/remote'

【解决方案2】：

假设由于层层叠叠的javascript而无法使 input[type="file] 元素可见（请参阅Quality Product的答案），则可以使用robotjs通过文件浏览器上传文件。

您需要更改以下代码 sn-ps 以适应您的具体情况，但这就是我能够让 robotsjs 工作的方式（利用页面对象设计模式）

页面对象

var robot = require("robotjs");
var path = require("path");

var MediaPO = function() { 
   ...
   ...
   ...       

   this.clickBrowseFileLink = function() {
        return browseFileLink.click(); //returns a promise
   };

    this.uploadFile = function(filename) {
       robot.moveMouse(648, 264) //May need to change based on desktop size
       var uploadPath = path.resolve(__dirname,'../PATH/TO/UPLOAD/', filename); //change to your upload file's path
       robot.setKeyboardDelay(1000);
       console.log(uploadPath); //for debugging
       robot.typeString(uploadPath);
       robot.keyTap("enter");
       browser.sleep(3000);
    };
    ...
    ...
    ...

规格

 //Note: all code but uploadFile should be replaced with the code from your project
 // this is just an example

it("should upload .png files successfully", function() {
   ...
   ...
   ...

   //your page object function for opening the file explorer
   //must return a promise otherwise the string will be typed too early

   mediaPO.clickBrowseFileLink().then(function() { 
       mediaPO.uploadFile("teddy.png");
       mediaPO.clickUploadNowButton(); //replace with your method of confirming upload.
       expect(mediaPO.pngFileExists()).toBeTruthy();
   });
};

【讨论】：

谢谢松虎。我只使用robotjs 模块作为上传文件的解决方法。这是一段很好的代码。