Protractor - How to upload file using ng-file-upload in test case without changing code?

Question

I am using https://github.com/danialfarid/ng-file-upload for file upload. I have to test it so I wrote protractor test case but it not working.

Code

<div class="col-lg-12 up-buttons">
     <div ng-file-select="" ng-model="files" ng-model-rejected="rejFiles" class="btn btn-default" ng-multiple="false" ng-accept="'text/csv,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'"  ng-model-rejected="rejFiles" tabindex="0">Choose file</div>
</div>

Test case

it('upload file', function(){   
  var fileToUpload = 'C:/Users/Anusha/Desktop/demo.csv';
  var absolutePath = path.resolve(fileToUpload);
  $('input[type="file"]').sendKeys(absolutePath);
  browser.sleep(1500);
})

testcase result

I can upload file but it is received in rejFiles model instead of files model eventhough file format is correct one. Could anyone please suggest me how to do this?

score 4 · Accepted Answer · answered Apr 06 '15 at 11:30

Html

<div class="col-lg-12 up-buttons">
    <div ng-file-select="" ng-model="files" ng-model-rejected="rejFiles" class="btn btn-default" ng-multiple="false" ng-accept="'*.csv'"  ng-model-rejected="rejFiles" tabindex="0">Choose file</div>
</div>

Test case

var path = require('path');
var fileToUpload = file_path;
var absolutePath = path.resolve(fileToUpload);
element.all(by.css('input[type="file"]')).then(function(items) {
  items[0].sendKeys(absolutePath);
});
browser.sleep(500);

Ashish Khokhariya · Answer 2 · 2018-07-13T04:51:07.587

3

There is an issue with runtime DOM element change. So we can get element by element's runtime changed property and for file uploading case, DOM changes a property with 'input[type="file"]'.No matter if there is input tag for uploading element.

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

edited Jul 13 '18 at 04:51

answered Jul 12 '18 at 10:22

Ashish Khokhariya

207
2
13

score 2 · Answer 3 · answered Jun 15 '15 at 23:38

I struggled with this for some time but found that I had to trigger a click on the ngf-select element before trying to sendKeys.

it('upload file', function(){
  var fileToUpload = 'C:/Users/Anusha/Desktop/demo.csv';
  var absolutePath = path.resolve(fileToUpload);
  var button = element(by.css('[ng-file-select]');
  button.click();
  var input = element(by.css('input[type="file"]'));
  input.sendKeys(absolutePath);
});

The input is added by ng-file-upload at the bottom of the page after the ngf-select directive button is clicked.

Also, I was able to use relative paths (relative to the location of the spec file) for the file like this:

it('upload file', function(){
  var path = require('path');
  var fileToUpload = '../demo.csv';
  var absolutePath = path.resolve(__dirname, fileToUpload);
  var button = element(by.css('[ng-file-select]');
  button.click();
  var input = element(by.css('input[type="file"]'));
  input.sendKeys(absolutePath);
});

This assumes you have run npm install path --save-dev.

This is using Protractor 2.0.0 and ng-file-upload 4.0.4

score 0 · Answer 4 · edited May 23 '17 at 11:53

0

Absolute path has helped me:

var fileToUpload = 'D:/file.csv';
var absolutePath = path.resolve(fileToUpload);
$('input[type="file"]').sendKeys(absolutePath);
element(by.css('#doUpload')).click();

(Also discuessed here)

edited May 23 '17 at 11:53

Community

1
1

answered Apr 01 '15 at 08:03

Marko Jurisic

844
9
10

I have tried it. It is working but my button will show only ng-model="files" receives file. It is not working as for my requirement – Anusha Nilapu Apr 01 '15 at 08:17
Here file is taking but it is putting file in rejFiles model not in files model – Anusha Nilapu Apr 01 '15 at 10:11

Protractor - How to upload file using ng-file-upload in test case without changing code?

4 Answers4