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

Answer 2

为更新的量角器版本添加user2355213s答案。 ptor为obsolote，而应使用browser。此外，executeScript()期望字符串作为参数。所以我最终使用了

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

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

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

取决于您的HTML / CSS。

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

2 个答案: