javascript - 无法在 Protractor 中上传文件

Question

我正在尝试在 Protractor 中上传文件。这似乎是一个足够简单的任务，只需查找 input[type"file"] 元素并将其发送到所需的路径即可。

element(by.css('input[type="file"]').sendKeys(FILEPATH);

问题是没有上传任何内容(找到元素本身)。我尝试过其他解决方案，但我已经被这个问题困扰了一段时间。

这里有人可以帮我解决这个问题吗？

这是相关的 DOM。

<li class="add-image pull-left ng-pristine ng-untouched ng-valid ng-scope" ng-model="naCtrl.galleryFilesForUpload" ngf-disabled="naCtrl.galleryFilesRemainder <= 0" ng-if="naCtrl.galleryFilesRemainder" ngf-select="" ngf-drop="" ngf-multiple="true"> <!--This input is just for the protractor tests--> <input type="file" class="hidden-file-input ng-pristine ng-untouched ng-valid" ngf-select="" ngf-multiple="true" ng-model="naCtrl.galleryFilesForUpload"> <div ng-click="eventHandler()" style="height:50px; width:50px;" class="add-image-svg" height="50" width="50" float="false"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 841.889 1190.551" enable-background="new 0 0 841.889 1190.551" xml:space="preserve">
<path d="M719.414,446.744l-34.391,438.855l-434.721-31.312l2.061-28.432l406.457,29.281l29.768-379.878h-39.834v-28.515H719.414z   M628.399,781.33H122.475V304.951h505.924V781.33z M602.057,679.427h-8.188c-0.084,0-1.059,0.068-2.688,0.068  c-9.439,0-42.047-1.809-72.957-24.504c-12.684-9.301-21.414-19.59-29.085-28.695c-12.183-14.41-20.522-24.297-39.806-25.549  c-19.27,1.252-27.61,11.109-39.807,25.549c-7.672,9.105-16.388,19.395-29.072,28.695c-36.283,26.607-74.864,24.504-76.465,24.406  l-155.243,0.029v75.602h453.309V679.427z M602.125,331.224H148.748v321.93h156.106c1.03,0.027,31.772,1.406,60.12-19.367  c10.164-7.463,17.488-16.096,24.546-24.463c13.269-15.691,26.941-31.869,55.498-34.612v-0.404l8.758,0.404  c28.542,2.743,42.215,18.921,55.497,34.612c7.073,8.34,14.368,17,24.546,24.463c28.668,21.037,58.965,19.422,59.299,19.395h9.008  V331.224z M219.38,461.002c0-31.703,25.786-57.475,57.488-57.475c31.689,0,57.475,25.771,57.475,57.475  s-25.786,57.475-57.475,57.475C245.193,518.476,219.38,492.677,219.38,461.002z M245.653,460.973  c0,17.209,14.006,31.202,31.215,31.202s31.202-13.993,31.202-31.202s-13.993-31.201-31.202-31.201S245.653,443.764,245.653,460.973z  "></path>
</svg></div> <div class="text">+ Add an image</div> </li>

<input type="file" class="hidden-file-input ng-pristine ng-untouched ng-valid" ngf-select="" ngf-multiple="true" ng-model="naCtrl.galleryFilesForUpload">

注意:不确定这是否相关，但“input[@type="file"]”元素被标记为隐藏。

注意2:直接与输入文件使用的模型交互(即 element(by.model('naCtrl.galleryFilesForUpload')).sendKeys )，返回 '无法聚焦元素'错误。也许这与问题有关。

提前致谢，:)

Answer 1

我解决了这个问题(这是一个痛苦的事情)。我取消隐藏所有元素，然后单击所需的元素以将其聚焦。

可能有更好的解决方案，但这个对我有用。下面是一个代码示例:

 browser.executeScript('window.document.getElementsByClassName(\'hidden-file-input\')[0].style.display = \'block\';').then( function(_config){

    });

      var inputGallery = element.all(by.model('naCtrl.galleryFilesForUpload')).get(1);

      inputGallery.click().sendKeys("/test.png");