Geek Answers Handbook

How to upload files to filepicker using protractor?

enter image description here

Here is the 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 do this, now I am not getting any errors, but this is not a file upload. Popup does not close.

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 works.

+6
source share
2 answers

This code works:

 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; }); }); }); });
0
source

Do not click the "Select File" button. When you click on it, the Browser Select File dialog box appears. You will not be able to control this dialog box, as it is outside the scope of the selenium webdriver.

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

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

In your specific 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);
+5
source

More articles:


All Articles