Part 13: Usages Of Javascripts In Selenium : How JavaScript Helps In Uploading File In Selenium And Protractor

Hello Folks,

In last post, we learnt how to upload a file using selenium webdriver.

In this post , we will learn how JavaScript can help you in uploading a file when selenium webdriver fails to do so.

I was working on an angular application where I need to upload a profile picture. I was using Protractor framework. Angular code for file upload was as below:

You can notice input tag contains an attribute named “hidden” which was a big problem for uploading.

When I tried to use sendKeys() method, I was getting exception as element is not visible. Then I tried with JavaScript ways to set the value, I got exception as element can not be interacted. Since element is hidden, so none of the ways was working.

When nothing works, I prefer JavaScript but here JavaScript also failed But the solution was JavaScript again. JavaScript can also be used to change the value of an attribute of web element. I made hidden element visible by setting its style attribute. After making element visible, I used sendKeys() method to send file name and it worked fine.

Java code:

I tried to create similar html code but could not. If you encounter such web elements, you can use above way. This can be used for all types of web element.

If you have any doubt, feel free to comment below.
If you like my posts, please like, comment, share and subscribe.
#ThanksForReading
#HappySelenium