How to upload file in angularjs e2e protractor testing

Question

I want to test file uploading using an angularjs e2e test. How do you do this in e2e tests? I run my test script through grunt karma.

Answer 1

This is how I do it:

var path = require('path');

it('should upload a file', function() {
  var fileToUpload = '../some/path/foo.txt',
      absolutePath = path.resolve(__dirname, fileToUpload);

  element(by.css('input[type="file"]')).sendKeys(absolutePath);    
  element(by.id('uploadButton')).click();
});

1. Use the path module to resolve the full path of the file that you want to upload.
2. Set the path to the input type="file" element.
3. Click on the upload button.

This will not work on firefox. Protractor will complain because the element is not visible. To upload in firefox you need to make the input visible. This is what I do:

browser.executeAsyncScript(function(callback) {
  // You can use any other selector
  document.querySelectorAll('#input-file-element')[0]
      .style.display = 'inline';
  callback();
});

// Now you can upload.
$('input[type="file"]').sendKeys(absolutePath);    
$('#uploadButton').click();

Answer 2

You can't directly.

For security reason, you can not simulate a user that is choosing a file on the system within a functional testing suite like ngScenario.

With Protractor, since it is based on WebDriver, it should be possible to use this trick

Q: Does WebDriver support file uploads? A: Yes.

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") on a file upload element, it does the right thing. Make sure you don't WebElement#click() the file upload element, or the browser will probably hang.

This works just fine:

$('input[type="file"]').sendKeys("/file/path")

Answer 3

Here is a combo of Andres D and davidb583's advice that would have helped me as I worked through this...

I was trying to get protractor tests executed against the flowjs controls.

    // requires an absolute path
    var fileToUpload = './testPackages/' + packageName + '/' + fileName;
    var absolutePath = path.resolve(__dirname, fileToUpload);

    // Find the file input element
    var fileElem = element(by.css('input[type="file"]'));

    // Need to unhide flowjs's secret file uploader
    browser.executeScript(
      "arguments[0].style.visibility = 'visible'; arguments[0].style.height = '1px'; arguments[0].style.width = '1px'; arguments[0].style.opacity = 1",
      fileElem.getWebElement());

    // Sending the keystrokes will ultimately submit the request.  No need to simulate the click
    fileElem.sendKeys(absolutePath);

    // Not sure how to wait for the upload and response to return first
    // I need this since I have a test that looks at the results after upload
    //  ...  there is probably a better way to do this, but I punted
    browser.sleep(1000);

Answer 4

var imagePath = 'http://placehold.it/120x120&text=image1';
element(by.id('fileUpload')).sendKeys(imagePath);

This is working for me.

Answer 5

If above solutions don't work, read this

First of all, in order to upload the file there should be an input element that takes the path to the file. Normally, it's immediately next to the 'Upload' button... BUT I've seen this, when the button doesn't have an input around the button which may seem to be confusing. Keep clam, the input has to be on the page! Try look for input element in the DOM, that has something like 'upload', or 'file', just keep in mind it can be anywhere.

When you located it, get it's selector, and type in a path to a file. Remember, it has to be absolute path, that starts from you root directory (/something/like/this for MAC users and C:/some/file in Windows)

await $('input[type="file"]').sendKeys("/file/path")

this may not work, if...

protractor's sendKeys can only type in an input that's visible. Often, the input will be hidden or have 0 pixels size. You can fix that too

let $input = $('input[type="file"]');
await browser.executeScript(
    "arguments[0].style.visibility = 'visible'; arguments[0].style.height = '1px'; arguments[0].style.width = '1px'; arguments[0].style.opacity = 1",
    $input.getWebElement()
);

Answer 6

This is what I do to upload file on firefox, this script make the element visible to set the path value:

   browser.executeScript("$('input[type=\"file\"]').parent().css('visibility', 'visible').css('height', 1).css('width', 1).css('overflow', 'visible')");

Answer 7

I realized that the file input in the web app I'm testing is only visible in Firefox when it is scrolled into view using JavaScript, so I added scrollIntoView() in Andres D's code to make it work for my app:

  browser.executeAsyncScript(function (callback) {
        document.querySelectorAll('input')[2]
     .style = '';
        document.querySelectorAll('input')[2].scrollIntoView();

        callback();
    });

(I also removed all of the styles for the file input element)

Answer 8

// To upload a file from C:\ Directory

{

var path = require('path');
var dirname = 'C:/';
var fileToUpload = '../filename.txt';
var absolutePath = path.resolve('C:\filename.txt');
var fileElem = ptor.element.all(protractor.By.css('input[type="file"]'));

fileElem.sendKeys(absolutePath);
cb();

};

Answer 9

If you want to select a file without opening the popup below is the answer :

var path = require('path'); 
var remote = require('../../node_modules/selenium-webdriver/remote'); 
browser.setFileDetector(new remote.FileDetector()); 
var fileToUpload = './resume.docx';
var absolutePath = path.resolve(process.cwd() + fileToUpload); 
element(by.css('input[type="file"]')).sendKeys(absolutePath);

Answer 10

the current documented solutions would work only if users are loading jQuery. i all different situations users will get an error such:Failed: $ is not defined

i would suggest to document a solution using native angularjs code.

e.g. i would suggest instead of suggesting:

    $('input[type="file"]') .....

to suggest:

    angular.element(document.querySelector('input[type="file"]')) .....

the latter is more standard, atop of angular and more important not require jquery