使用量角器和selenium将文件上传到隐藏输入

Question

我有一个隐藏的文件输入字段,如下所示:

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

我希望能够将文件上传到此.在量角器中执行此操作的常规方法是:

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>

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).