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 · Accepted Answer · 2016-02-19 17:15:55Z

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, 2016 at 17:15

answered Feb 18, 2016 at 12:59

alecxe

476k127 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

16 Comments

nrs Over a year ago

I am getting this error: NoSuchElementError: No element found using locator: By.cssSelector("#fileUploadInput")

alecxe Over a year ago

@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: stackoverflow.com/a/27867319/771848. Hope that helps.

nrs Over a year ago

I have posted my code, please have a look and guide me where am doing wrong.

nrs Over a year ago

Now am getting this error : RangeError: Maximum call stack size exceeded

alecxe Over a year ago

@raghavendrat how about browser.driver.switchTo().frame($('.filepicker_dialog'));?

|

nrs · Accepted Answer · 2016-03-01 07:53:16Z

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;

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

Collectives™ on Stack Overflow

How to upload files in filepicker using protractor?

2 Answers 2

16 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

16 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related