通过 Selenium 在 AngularJS 中自动上传文件答案

【问题标题】：Automate file upload in AngularJS via Selenium通过 Selenium 在 AngularJS 中自动上传文件
【发布时间】：2016-08-17 01:54:32
【问题描述】：

我正在使用 Powershell 来驱动 .NET Selenium 和 FirefoxDriver 来自动化一些东西。其中一部分是文件上传，而网站恰好（至少部分）是用 AngularJS 编写的。

现在我已经弄清楚如何使用普通输入元素自动上传文件。只需通过 SendKeys 发送文件路径即可。

但我无法弄清楚这种情况。带有可选手动文件选择器的文件放置区的 HTML 如下：

<div class="overflowHidden video-drop-zone file-drop-zone zone appversionicon rounded"
ng-file-drop="onFileSelect($files);" ng-file-drop-available="dropSupported=true">               
    <div class="simpleDropZoneFileSelect">
        <span class="selectFileText">
            <span class="ng-binding ng-hide" ng-show="dropLabel !== undefined &amp;&amp; dropLabel !== ''"><br></span>
            <a class="ng-binding" href="" ng-show="true">Select file</a>
            <input class="" ng-show="true" ng-file-select="onFileSelect($files)" type="file">
        </span>
    </div>
</div>

我希望我没有把它简化太多。整个 AngularJS 设置肯定不止于此。但也许你给我一些关于下一步看哪里或如何处理的指示就足够了。如果没有，请告诉我，我会添加更多信息。

我发现 Protractor 似乎是进行 AngularJS 测试时要走的路，但它会大大改变我的设置（使用 NodeJS 服务器等），我现在只需要上传这个文件。

谢谢！

桑德罗

【问题讨论】：

标签： javascript angularjs selenium selenium-webdriver

【解决方案1】：

不确定您的整个设置如何。但是在 selenium 中文件上传要容易得多。

Driver.FindElement(By.CssSelector("input[type='files']")).SendKeys("FilePath")

应该这样做

【讨论】：

感谢赛夫的输入！正如我在帖子中所说，我知道这种方法。我可以肯定地假设我已经在这个上尝试过它并且它没有工作。不过我明天会再试一次以确保
现在试过了。它有效！！！！ :-) 起初它不起作用，因为元素不可见（在绝对位置 -9999px），因此无法接受输入。这就是为什么我必须放弃那个解决方案。很高兴我有“让我们再试一次确定”的心态。谢谢赛弗！
我很高兴这有效。由于没有正确的选择器，我遇到了类似的问题。
你用的量角器是什么版本的？ @桑德罗。我面临同样的问题，无法使用 Sendkeys 直接看到元素不可见”
完全不知道任何量角器的使用。甚至不知道那是什么

【解决方案2】：

<button class="btn btn-primary ng-scope" ng-click="vm.importAccountsClicked()" translate="import-accounts">Import Accounts</button>
<input class="hide" type="file" id="fileItem" accept=".csv" onchange="angular.element(this).scope().import()">

我在使用 Webdriver 和 Java 时遇到了类似的问题。查看带有 Import Accounts 按钮的网页（上面的 html sn-p），我无法让 Selenium+Java 向其发送密钥。我犯的错误是我没有使用 type=file 属性来识别元素。相反，我使用的是按钮的文本：

@FindBy (xpath="(//button[.='Import Accounts'])")
private WebElement importbutton;

所以在我将importbutton变量声明更改为

@FindBy (id = "fileItem")
private WebElement importbutton;

问题已通过使用 sendKeys() 方法解决。

importbutton.sendKeys(filepath);

希望这会有所帮助。

【讨论】：