How to upload files in filepicker using protractor?

Question

Here is HTML code:

<input type="file" class="fileUploadInput" name="fileUpload" id="fileUploadInput" accept="application/msword,application/pdf,text/plain,application/rtf,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.oasis.opendocument.formula" multiple="multiple" title="Choose File">

Here is my code:

 browser.wait(function(){
            return element(by.id('.filepicker_dialog_container')).isPresent();
        }).then(function() {
            browser.driver.switchTo().frame('.filepicker_dialog');
        }).then(function(){
            var fileToUpload = '/home/raghavendra/Desktop/f0657c76d96b9ddab5562b8391297dbbb01488fec4e79a4c13195aea.doc';
            var absolutePath = protractor.basePath.resolve(__dirname, fileToUpload);
            $("#fileUploadInput").sendKeys(absolutePath);
});

I am doing like this, now am not getting any error but it is not uploading the file. The pop up window is not closing now.

Here is my complete code:

  var path = require('path');
var ptor = browser,
    driver = browser.driver;

describe('Hirealchemy roles', function() {

    it('while clicking filepicker icon', function () {


        $('.icon-people').click();
        browser.sleep(5000);
        browser.driver.findElement(By.xpath('/html/body/div[4]/div/ng-view/div/div/div[2]/' +
                                            'section/div/div/div[1]/form/div[2]/input')).sendKeys(group_name);
        browser.sleep(5000);
        element.all(by.css('.btn.btn-main')).click();
        browser.sleep(5000);

        browser.wait(function(){
             return element(by.id('filepicker_dialog')).isPresent();
        })
            .then(function(){
                ptor.switchTo().frame('filepicker_dialog');
            })

            .then(function(){
                 var fileToUpload = '/home/raghavendra/Desktop/50_resumes/f0657c76d96b9ddab5562b8391297dbbb01488fec4e79a4c13195aea.doc';
                 var absolutePath = path.resolve(__dirname, fileToUpload);
                 driver.findElement(By.id('fileUploadInput')).sendKeys(absolutePath);
            })

            .then(function(){
                ptor.switchTo().defaultContent();
            })

            .then(function(){
                browser.wait(function(){
                    var deferred = protractor.promise.defer();
                    element(by.id('filepicker_dialog')).isPresent()
                        .then(function(present){
                            deferred.fulfill(!present);
                        });
                    return deferred.promise;

                });
            });
    });
})

This code is working.

alecxe · Answer 1 · 2016-02-19T17:15:55.203

5

Don't click the "Choose File" button. When you click it, a browser's Select File dialog would appear. You would not be able to control this dialog since it is out of selenium webdriver's scope.

Instead, send the keys to the input with an absolute path to the file to upload:

$("#fileUploadInput").sendKeys("/absolute/path/to/file");

In your particular case, do:

var EC = protractor.ExpectedConditions;
var picker = element(by.id('.filepicker_dialog_container'));

browser.wait(EC.presenceOf(picker), 5000);
browser.switchTo().frame($('.filepicker_dialog'));

var fileToUpload = '/home/raghavendra/Desktop/f0657c76d96b9ddab5562b8391297dbbb01488fec4e79a4c13195aea.doc';
var absolutePath = protractor.basePath.resolve(__dirname, fileToUpload);
$("#fileUploadInput").sendKeys(absolutePath);

edited Feb 19 '16 at 17:15

answered Feb 18 '16 at 12:59

alecxe

462,703
120
1,088
1,195

I am getting this error: NoSuchElementError: No element found using locator: By.cssSelector("#fileUploadInput") – nrs Feb 18 '16 at 13:14
@raghavendrat from what I understand, this is usually because of two things - the button is inside an iframe and you need to switch to it before searching for the element and/or you need to wait for the element to become present: http://stackoverflow.com/a/27867319/771848. Hope that helps. – alecxe Feb 18 '16 at 16:00
I have posted my code, please have a look and guide me where am doing wrong. – nrs Feb 19 '16 at 05:47
Now am getting this error : RangeError: Maximum call stack size exceeded – nrs Feb 22 '16 at 10:41
@raghavendrat how about `browser.driver.switchTo().frame($('.filepicker_dialog'));`? – alecxe Feb 22 '16 at 15:39
@raghavendrat is this a public site and you can share a link to it? – alecxe Feb 23 '16 at 14:15
@raghavendrat also, what protractor version are you using? If you are not using the latest protractor, consider upgrading. Also try `browser.driver.switchTo().frame($('.filepicker_dialog').getWebElement());` – alecxe Feb 23 '16 at 14:17
No it's private..I am using protractor version 2.5.1. – nrs Feb 24 '16 at 08:22
@raghavendrat do you see the same error after upgrading to protractor 3? Please also try: `browser.driver.switchTo().frame(driver.findElement(by.css('.filepicker_dialog')));`. – alecxe Feb 24 '16 at 14:21
I upgraded and still am not able to..please help me – nrs Feb 25 '16 at 12:35
@raghavendrat what about the `browser.driver.switchTo().frame(driver.findElement(by.css('.filepicker_dialog')‌));`? – alecxe Feb 25 '16 at 15:17
Now am getting this error: Error: Wait timed out after 5006ms – nrs Feb 26 '16 at 05:04
@raghavendrat could you please edit the question and include the complete code you have so far and the complete traceback? This would help to help. The idea presented in the answer is still valid for file uploads in general, we just need to make it work in your case. It's like a guessing game unfortunately, but let's see what you've got at the moment. Thanks. – alecxe Feb 27 '16 at 04:13
@raghavendrat could you please remove the `browser.wait(EC.presenceOf(picker), 5000);` line and try again? – alecxe Feb 29 '16 at 15:38
Finally it worked....I have done some modifications and now am able to upload files...Thank u so much...I have posted my updated code...please have a look – nrs Mar 01 '16 at 07:50
Please help me out of this question also : http://stackoverflow.com/questions/35715973/not-able-to-click-on-hidden-element-in-protractorplease-go-through-the-image – nrs Mar 01 '16 at 12:09

score 0 · Accepted Answer · answered Mar 01 '16 at 07:53

This code is working:

var path = require('path');
var ptor = browser,
    driver = browser.driver;

describe('Hirealchemy roles', function() {

    it('while clicking filepicker icon', function () {


        $('.icon-people').click();
        browser.sleep(5000);
        browser.driver.findElement(By.xpath('/html/body/div[4]/div/ng-view/div/div/div[2]/' +
                                            'section/div/div/div[1]/form/div[2]/input')).sendKeys(group_name);
        browser.sleep(5000);
        element.all(by.css('.btn.btn-main')).click();
        browser.sleep(5000);

        browser.wait(function(){
             return element(by.id('filepicker_dialog')).isPresent();
        })
            .then(function(){
                ptor.switchTo().frame('filepicker_dialog');
            })

            .then(function(){
                 var fileToUpload = '/home/raghavendra/Desktop/50_resumes/f0657c76d96b9ddab5562b8391297dbbb01488fec4e79a4c13195aea.doc';
                 var absolutePath = path.resolve(__dirname, fileToUpload);
                 driver.findElement(By.id('fileUploadInput')).sendKeys(absolutePath);
            })

            .then(function(){
                ptor.switchTo().defaultContent();
            })

            .then(function(){
                browser.wait(function(){
                    var deferred = protractor.promise.defer();
                    element(by.id('filepicker_dialog')).isPresent()
                        .then(function(present){
                            deferred.fulfill(!present);
                        });
                    return deferred.promise;

                });
            });
    });
});

How to upload files in filepicker using protractor?

2 Answers2