selenium - 使用 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>

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 的更多信息，请参阅 this question 的答案。 (尽管答案使用 executeAsyncScript 而不是 executeScript)。