logo logo

How to Upload Files while Automating Web Tests (No Code Needed)

Upload File TestProject Addon

Uploading a file from your local machine to your web app is a pretty common scenario, that must be included in your web test automation sometimes to complete end to end testing flow. However, you might face some obstacles while attempting to upload files when you click on the upload button. It immediately opens the native OS file explorer dialog, where you are required to select the file that you want to upload. Selenium cannot automate the native OS file dialog, so you won’t be able to record your actions on that dialog.

Let’s have a look at this input element of type file:

input element of type file

As mentioned above, clicking on the “Choose File” button would trigger the native OS file explorer dialog, as seen below:

native OS file explorer dialog

This element can also be wrapped by another element with different styles, but as long as it’s an input element of type file, the File Uploader Addon (from TestProject’s Addon Library) will know how to handle it!

The File Uploader Addon

To overcome the limitation of uploading files and to simplify the whole process, we can use the File Uploader Addon.

This useful addon contains two 2 different methods (‘actions’ in TestProject terminology) for uploading a file in your web test:

1. Upload File using XPath

A non-element action (basically a test step that doesn’t require an element to run) that has 2 parameters:

  1. An XPath of the input element: //input[@type = ‘file’].
  2. A local path to the file you want to upload.

Here is an example of how to use this action:

Upload File using XPath

2. Upload File to Input Element

An element action that works directly on the input element. It works on two types of elements that are located by these XPaths: //button[text()=’Upload’] AND //input[@type = ‘file’].

This element action takes only one input parameter which is the local path to the file that you want to upload. Here is an example of how to use this action:

Upload file to input element

 

That’s it! We’ve managed to overcome the obstacle of file uploading to our web tests, and we did that without using a single line of code! 😲🎉

Want to explore and read about more Addons? Check out these tutorials we have lined up for you:

  1. Deep Link Toolkit Addon
  2. Siri Commands for iOS Addon
  3. Google Authenticator OTP Automation Addon
  4. Image Comparison Addon
  5. Explore many more Addons here!

Go ahead and give these Addons a try! Share your experience in the comments below 🙃

 

About the author

Amit Yahav

Backend developer & Test automation solution architect at TestProject.
Father of one, tech geek and Manchester United fan!

Comments

4 5 comments
  • Ganesh babu March 29, 2021, 12:20 pm

    May i know, any addon is available for Mobile App Testing like this, a post on how to do the same would help.

  • Ran Tzur March 29, 2021, 2:51 pm

    Hello Ganesh, you can just record the upload steps on Mobile, since mobile applications parse their elements to native elements, you can just click on the upload button -> select the file -> return to the application.

  • Ganesh babu March 29, 2021, 8:05 pm

    Hello Ran Tzur, Thanks for the reply. I tried uploading an image like you mentioned, as am doing testing in emulators, the app is closing whenever i try to use the upload option. Hence asked for any add-on to help me out. Please suggest if any.

  • Karan Solanki April 1, 2021, 11:55 am

    File upload working for mac os ? i think that is showing error. can you please elaborate more ?

  • Deepen Shah November 30, 2021, 6:38 am

    How to provide file path which can work for all the team members machine and also on various OSs (windows or iOS) ?

Leave a Reply

FacebookLinkedInTwitterEmail