1

I'm looking to upload a file using Protractor testing.

Ideal scenario:

  1. On the form, first the user should click the 'Upload File' button
  2. Next a window appears where they search for their file
  3. And finally, the file is chosen.

createJobTest.js

    it('should click upload file button', function() {
        createJobPage.step5UploadFile.click().then(function(){
            browser.waitForAngular();
            });
        });
    })


    var path = require('path');

    it('should upload a file', function() {
      var fileToUpload = '../desktop/test.txt',
          absolutePath = path.resolve(__dirname, fileToUpload);

      $('input[type="file"]').sendKeys(absolutePath);    
      $('#uploadButton').click();
    });

createJobPage.js

this.step5UploadFile = element(by.id('step5--upload-file'));

createJob.html

<span class="btn btn-blue-one btn-upload" id="step5--upload-file" flow-btn translate="uploadfile"></span>

The upload file window opens but I'm getting this error:

Failed: No element found using locator: By(css selector, input[type="file"])

Any help much appreciated!

Web Tech
  • 173
  • 1
  • 3
  • 11
  • See http://stackoverflow.com/questions/36182407/protractor-upload-file-running-exe-via-protractor/36182733#36182733 – KCaradonna Apr 07 '16 at 13:27
  • @KCaradonna Thanks for the comment, tried it but still getting the same error :( – Web Tech Apr 07 '16 at 16:01
  • When you are uploading a file with protractor you don't need to click the upload file button. You are sending the absolutePath of the file you want to upload directly to the file upload element and you've kind of done that correctly done in your code. My guess is that the element you are trying to send the file to is no longer visible because it's hidden underneath the upload file dialog. You can solve this by removing the first "it" block and $('#uploadButton').click(); in your code above. Let me know if this helps and I can submit it as an answer. – KCaradonna Apr 07 '16 at 17:43

2 Answers2

1

1 way is to sendkeys.

        var fileToUpload =filepath;
        var absolutePath = path.resolve(__dirname, fileToUpload); // absolute path
        var fileElement = element(by.css('input[type="file"]'));
        browser.executeScript("arguments[0].style.visibility = 'visible'; ", fileElement.getWebElement());
        fileElement.sendKeys(absolutePath);

Another way is to operate on the desktop window . Which is the main functionality. You can refer the answer from the below link which i already answered.

File upload using autoit

This is what i am using in my application.

Pavan Srivatsav
  • 74
  • 1
  • 7
0
var path = require('path');
        var fileToUpload = '../desktop/test.txt';
        var absolutePath = path.resolve('__dirname', fileToUpload);
        $('input[type="file"]').sendKeys(absolutePath);
        browser.driver.sleep(100);
amit
  • 41
  • 2
  • 10