How to upload file in angularjs e2e protractor testing

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.

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

Solution 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")

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