使用 Protractor 和 Selenium 将文件上传至隐藏输入框

Question

我有一个隐藏的文件输入框，就像这样：

<input type="file" id="fileToUpload-1827" multiple="" onchange="angular.element(this).scope().setFiles(this)" data-upload-id="1827" class="hidden-uploader">

我希望能够上传文件到这个网站。在Protractor中完成此任务的常规方法是：

ptor.findElement(protractor.By.css('.file-upload-form input')).sendKeys('/path/to/file')

但由于输入元素不可见，我收到了一个错误。

我尝试过：

  ptor.driver.executeScript("return $('.file-upload-form input')[0].removeClass('hidden-uploader');").then(function () {
    ptor.findElement(protractor.By.css('.file-upload-form input')).sendKeys('hello');
  })

但是遇到了错误。

UnknownError: $(...)[0].removeClass is not a function

看起来很荒谬，需要使用executeScript使元素可见以便上传文件，有更好的方法吗？如果没有，如何取消隐藏该元素？

输入表单的完整HTML如下：

<form class="file-upload-form ng-scope ng-pristine ng-valid" ng-if="ajaxUploadSupported">
<strong>Drag files here to upload</strong> or

<label for="fileToUpload-1953">
  <div class="btn btn-info select-file-btn">
    Click to Select
  </div>
</label>

<div>
      <input type="file" id="fileToUpload-1953" multiple="" onchange="angular.element(this).scope().setFiles(this)" data-upload-id="1953" class="hidden-uploader">
</div>
</form>

- user2355213

---

用户要怎样才能访问那个文件上传控件呢？ - Arran

他们将点击一个浏览按钮，它会弹出一个框来选择文件系统中的文件。或者他们可以将计算机上的文件拖放到一个目标区域。这两种方法在Selenium中均不可能实现，因为Selenium无法与操作系统进行交互。根据这个答案，sendKeys()是实现上传文件的方法。 - user2355213

该元素已被隐藏，那么用户与哪个元素进行交互？ - Arran

@Arran（以及其他想了解此问题的访问者）。隐藏输入字段并显示标签是一种常用的hack，用于规避输入文件对话框的默认样式/文本。例如，请参见此问题http://stackoverflow.com/questions/13685070/alter-input-type-file-label-content - dirkk

@dirkk，实际上当OP给我们代码时，我们都意识到了这一点。你假设（错误地）没有人知道这个问题的答案，而是这个问题非常严重，所有人都只能要求更多的细节并继续前进。一个快速的谷歌搜索也会带你找到关于Selenium非常相似的问题。 - Arran

Answer 1

最后我找到的唯一方法是使用JavaScript使输入元素可见。

因此，我有一个名为“unhideFileInputs”的函数：

  var unhideFileInputs = function () {
    var makeInputVisible = function () {
      $('input[type="file"]').removeClass('hidden-uploader');
    };

    ptor.driver.executeScript(makeInputVisible);
  }

这段代码包含函数'makeInputVisible'，当我在浏览器中调用ptor.driver.executeScript(makeInputVisible)时会执行。因为我知道我的页面包含jQuery，所以可以使用jQuery的removeClass方法来显示我的文件输入元素。

要了解如何使用webdriver在浏览器中执行javascript，请参见此问题的答案（尽管答案使用executeAsyncScript而不是executeScript）。

- user2355213

Answer 2

补充一下user2355213的回答，针对更现代的protractor版本。 ptor已经过时，应该使用browser。此外，executeScript()期望参数为字符串。所以我最终使用了：

browser.executeScript('$(\'input[type="file"]\').attr("style", "");');

由于我的可见性设置直接应用于元素。 当然，您也可以使用

browser.executeScript('$(\'input[type="file"]\').removeClass("hidden-uploader");');

根据您的HTML/CSS。

- dirkk

---

它报错了- $ 未定义。这个问题可能有什么解决方法？ - Shardul