Testing upload a file to filepicker with protractor in AngularJS app

Question

In an AngularJS project I am trying to test with protractor if a file is uploaded correctly to filepicker.

Filepicker input type="file" element is whithin a iframe name="filepicker_dialog" id="filepicker_dialog" so firstly is needed to get access to the iframe:

 var
     ptor = protractor.getInstance(),
     driver = ptor.driver;

 //Open iframe
 element(by.id('openIframe')).click();

 //Wait iframe is present
 browser.wait(function(){
     return element(by.id('filepicker_dialog')).isPresent();
 })
 .then(function(){
     //Switch protractor to iframe
     ptor.switchTo().frame('filepicker_dialog');
 })

As Selenium wiki says to upload the file some trick have to be done because...

You can't interact with the native OS file browser dialog directly

So based on How to upload file in angularjs e2e protractor testing answer I am setting file path on input value:

//Upload image
.then(function(){
    //Get image's absolute path
    var fileToUpload = '../../public/assets/img/header.jpg';
    var absolutePath = path.resolve(__dirname, fileToUpload);

    //Set image's path as input (file type) value               
    driver.findElement(By.id('fileUploadInput')).sendKeys(absolutePath);

    //Submit form
    driver.findElement(By.id('fileUploadForm')).submit();

    // Switch back to Default Content
    ptor.switchTo().defaultContent();
 });

File seems to be uploaded inside the iframe but not to my project, the problems is that iframe is not closed and remains like this:

I contacted filepicker team and their answer was:

So when file is uploaded all what’s happen is sending results to the original website via communication iframe or local storage. If communication iframe and local storage are unavailable data sending will fail and widget will be stayed open with error message.

As they suggest problem may be that protractor is one the iframe so can't communicate with the main frame, despite I am doing ptor.switchTo().defaultContent(); to switch to main frame.

Console has only one error and not really helpful:

I almost know what happens but I don't know what else do, any advice/idea?

Thanks in advance.

Answer 1

<input name="upload" type="file">

Solution:

var absolutePath = path.join(__dirname,'..\\..\\dash-e2e-tests\\resources\\files-cabin\\test-files\\image.png);

element(by.xpath("xpath")).sendKeys(absolutePath);

Answer 2

It is working now, as alecxe said I .switchTo().defaultContent() but I do after I .sendKeys(absolutePath). Is not needed to submit the form.

Then I wait to iframe is closed (not present).

Whole code:

 var
     ptor = protractor.getInstance(),
     driver = ptor.driver;

 //Open iframe
 element(by.id('openIframe')).click();

 //Wait iframe is present
 browser.wait(function(){
     return element(by.id('filepicker_dialog')).isPresent();
 })
 .then(function(){
     //Switch protractor to iframe
     ptor.switchTo().frame('filepicker_dialog');
 })
 //Upload image
 .then(function(){
    //Get image's absolute path
    var fileToUpload = '../../public/assets/img/header.jpg';
    var absolutePath = path.resolve(__dirname, fileToUpload);

    //Set image's path as input (file type) value               
    driver.findElement(By.id('fileUploadInput')).sendKeys(absolutePath);
 }) 
 // Switch back to Default Content
 .then(function(){
     ptor.switchTo().defaultContent();
 })
//Wait iframe is closed
.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;
    });
});

Answer 3

One possible reason could be "when" you are switching to the default content - try to do it only once the form is submitted:

element(by.id('fileUploadForm')).submit().then(function() {
    browser.switchTo().defaultContent();
});