How to upload a file in angularjs e2e protractor test

Question

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

Answer 1

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

• Use the path module to resolve the full path to the file you want to download.
• Set the path to the input type = "file" element.
• Click the download button.

This will not work on firefox. The protractor will complain because the item is not visible. To load in firefox you need to make the entry 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 cannot directly.

For security reasons, you cannot simulate a user who selects a file in the system in a functional test suite such as ngScenario.

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

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

You cannot directly interact with the file browser dialog of your own operating system, but we do some magic so that if you call WebElement # sendKeys ("/ path / to / file") for the file upload element, this does the right thing. Make sure you are not using WebElement # click () for the file upload element, otherwise the browser may freeze.

This works just fine:

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

Answer 3

Here's a combo of tips by Andres D and davidb583 that would help me when I worked on this ...

I tried to get protractor tests performed against 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 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 works for me.

Answer 5

I realized that the file input in the test web application is only shown in Firefox when it scrolls to the window using JavaScript, so I added scrollIntoView () in Andres D code to make it work for my application:

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

(I also deleted all styles for the file input element)

Answer 6

This is what I do to upload the file in firefox, this script makes 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

// Download 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 8

current documented solutions will only work if users download jQuery. I in different situations, users will get this error: Failed: $ not defined

I suggest documenting the solution using a custom corner code.

eg. I would suggest instead of suggesting:

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

to offer:

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

the latter is more standard, on top of angular and more importantly not require jquery