Upload file - Protractor

1.5k Views Asked by At

I fight with protractor because for some tests I need to UPLOAD file. My HTML looks like:

<div class="panel-footer">
    <ul class="list-unstyled">
      <!-- ngRepeat: file in imagesToUpload -->      
    </ul>
    <button class="btn btn-sm btn-success pull-right ng-binding ng-hide" ng-show="imagesToUpload.length" ng-click="uploadImages()">Nahrát na server</button>
    <button class="btn btn-sm btn-primary ng-binding" ng-file-select="onImageSelect($files)" data-multiple="true" style="overflow: hidden;">Vybrat soubory<input type="file" class="btn btn-sm btn-primary ng-binding" ng-file-select="onImageSelect($files)" data-multiple="true" multiple="multiple" __wrapper_for_parent_="true" style="width: 1px; height: 1px; opacity: 0; position: absolute; padding: 0px; margin: 0px; overflow: hidden;"></button>
  </div>

INPUT HTML:

<input type="file" class="btn btn-sm btn-primary ng-binding" ng-file-select="onImageSelect($files)" data-multiple="true" multiple="multiple" __wrapper_for_parent_="true" style="width: 1px; height: 1px; opacity: 0; position: absolute; padding: 0px; margin: 0px; overflow: hidden;">

I search a lot about this issue in protractor. And basicly people advise was to COPY / PASTE path to file to input and then click "UPLOAD"

In my case there is a problem becuase input is here but it store some object not PATH

If I pick file manualy it store in HTML like:

<li ng-repeat="file in imagesToUpload" class="ng-binding ng-scope">
        FileName.png <span title="remove" class="btn btn-flat glyphicon glyphicon-remove" ng-click="imagesToUpload.splice($index, 1)"></span>
      </li>

Maybe this is really stupid but I am thinking if there isnt some other way how to do this? Maybe create object and send it there or something else?

Any advice is welcome.

1

There are 1 best solutions below

5
On BEST ANSWER

The common and the most realistic way to upload the file via protractor/selenium is to send keys to the file input and avoid opening the upload file dialog which you cannot control:

var uploadInput = element(by.css("input[type=file]"));
uploadInput.sendKeys("path/to/file");