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

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);
})

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?

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);

Protractor File upload failing with ng upload version 3.3.4 · Issue , for file upload. I have to test it so I wrote protractor test case but it not working. Code file</div> </div>. Test case There is an issue with runtime DOM element change. So we can get No matter if there is input tag for uploading element. This is using Protractor 2.0.0 and ng-file-upload 4.0.4. share. Protractor - How to upload file using ng-file-upload in test case without changing code? Ask Question This is using Protractor 2.0.0 and ng-file-upload 4.0.4.

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);

Protractor - How to upload file using, Protractor - How to upload file using ng-file-upload in test case without changing code? - angularjs. Here, ‘abc’ is the text file to upload, ‘test_conf’ is the file with required configuration to run the test, and ‘test_spec’ is the file that includes the code to perform the file upload operation. Steps to Run the Test. Run selenium server using the command webdriver-manager start from the command line, as shown below.

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

How to Handle the File Upload dialog in Protractor for IE11 , I have been using the usual file upload in the protractor to upload the I can't tell you exactly what is wrong without seeing your app. Can you provide a reproducible test case (i.e. against a public app) to ng-upload to version 3.3.4, the same lines of protractor code doesnt By default it is set to body. It worked with protractor 1.6.1 and ng-file-upload 3.0.7. Then after we upgraded to ng-file-upload to 4.1.0 it stopped working with both Protractor 1.6.1 and Protractor 2.0. Weird thing is that it works on Internet Explorer 11 😵 PS: I added more details about this here: angular/protractor#2101

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)

Protractor, Protractor - How to upload file using ng-file-upload in test case without changing code? #Angular #AngularJS. I have been using the usual file upload in the protractor to upload the files . element(by.id('upload_button')).sendKeys('file path'); It was working fine until our application's 'ng upload' upgraded to version 3.3.4.

How to perform the file upload operation with Protractor on Docker?, You can't interact with the native OS file browser dialog directly, but we do some magic so that if you call WebElement#sendKeys("/path/to/file")  The Protractor testing tool is an end to end behavior-driven testing framework designed keeping Angular JS applications in mind. Even though that might sound like Protractor won’t work with non-angular JS applications, it does. It works with both Angular and non-Angular JS applications equally well. Feel free to explore the entire AngularJS

Protractor Testing Tool for End-to-end Testing of AngularJS , If your login page is not written with Angular, you'll need to interact with it via Another option is to put your log-in code into an onPrepare function, which elm.​click().then(function() { /* passing case */}, function(err) { /* error handling here */}) to test file upload on a remote server (such as Sauce Labs), you need to set a  Is there a way i can put my test data in a json file and use that file in my specs to get the test data. I need to use a lot of hard coded data which i want to put inside the data file. I know karma has the functionality for unit tests but not sure of using in protractor. Any suggestions.

Protractor Testing Tutorial: Automation Tool Framework, One of the features of automated application testing is uploading files. The Protractor can test directly against Chrome and Firefox without using a To use this, in your config file set directConnect: true. Angular Testability: Dealing with Selenium or Protractor timeouts · Abou Kone in Code d'Ivoire. Can someone post an example of how to use setFileDetector? (unless not needed in this example) I am using Protractor, JS, selenium standalone server, and have a button to select a file, i.e.

Comments
  • 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
  • Here file is taking but it is putting file in rejFiles model not in files model