Search code examples
protractore2e-testingend-to-end

Protractor - Uploading a Document using a Modal

I am currently using protractor to validate a user's walk through a Web App. To proceed (buttons are disabled until an action is performed) a user must upload a document, which then enables buttons to be pressed and would then proceed with the process.

In my local code I have a folder that contains the document needed to be uploaded to proceed. However, when I am interacting with the web app via protractor, I am struggling with getting it uploaded.

As it works now:

  1. Click link to upload doc
  2. Modal is displayed with Browse button to select (Modal Image)
  3. Browse button must be used to browse for the file - cannot insert into 'text box'
  4. Select a date using calendar tool
  5. Submit button then becomes active
  6. Click Submit and can proceed through app process

I have attempted the solution here: How to upload file in angularjs e2e protractor testing , but the issue is that the 'text area' to insert the path into returns an 'Invalid Element State Error' - I cannot simply insert the path into the box as the solution above seems to suggest.

Bottom line is I need to upload this document while necessarily using the browse button, but I cannot use protractor to manipulate the local dialogue box used to browse the machine.

My code: 

it('should upload the example doc', function() {
  var path = require('path');
  var fileToUpload = 'path/path/path/',
    absolutePath = path.resolve(__dirname, fileToUpload);
  page.findInput().sendKeys(absolutePath);
  browser.sleep(3000);
  expect(page.submitBtnClick());
});

Thoughts?

Solution

  • Answer Found Here

    functioning code below:

    uploadDoc() {
return browser.findElement(by.css('input[type=file]')).sendKeys('full/path/of/the file/with.extension');
}