Skip to main content
Transform your testing process with: Real Device Features, Company-wide Licences, & Test Observability
No Result Found

Test the file upload functionality

Learn how to test the file upload functionality of your web app in Selenium using BrowserStack Automate.

The file upload functionality enables you to upload files to a web app. For example, submit documents for processing in various applications, upload videos or images to social media sites, upload cover letters and resumes to career sites, or attach files to emails. The functionality involves looking for a file on your computer and then uploading it. Like any web app feature, it must be tested too.

On Automate, you can test the file upload functionality of your web app using:

  • Files preloaded to the BrowserStack server
  • Files downloaded in the same Automate session
  • Files from your computer

Testing with preloaded files isn’t supported on Android devices.

If you are agnostic to the actual files used in the test and only care about whether the file upload works fine or not, test with files preloaded on BrowserStack remote computers. These Windows and Mac computers include the following preloaded files:

Windows 11, 10, 8.1, 8, 7
Copy icon Copy
Windows XP
Copy icon Copy
Mac
Copy icon Copy

To test the file upload feature, use paths to these preloaded files in your test scripts. See the following scripts for example:

  • Selenium 4 W3C test scripts to test on desktops
Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy
  • Selenium 4 W3C test scripts to test on iOS devices
Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy
  • Selenium Legacy JSON test scripts to test on desktops
Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy
  • Selenium Legacy JSON test scripts to test on iOS devices
Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy

Testing with files downloaded in the same Automate session isn’t supported on Android devices.

Suppose your test includes downloading a file from the web. The file is downloaded to the following location on the BrowserStack remote computer:

Downloading a file from the web slows down the execution of your tests considerably.

Copy icon Copy
Copy icon Copy
Copy icon Copy

Within the same Automate session, the file is available in later test steps. So, you can use the downloaded file to test your file upload feature.

See the sample scripts provided for desktop testing with preloaded files, for example. Instead of the path to the preloaded file, you have to use the path to the downloaded file.

When testing on an iOS device, you have to similarly modify your script to access the recently downloaded file and upload it to the web app you want to test. See the following sample scripts:

If you are using iOS 15, add the NATIVE_APP context after initiating the web app, and replace the ElementID file-upload with Choose file in the sample script.

  • Selenium 4 W3C test scripts to test on iOS devices
Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy
  • Selenium Legacy JSON test scripts to test on iOS devices
Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy

If you want to use your own files for a test, there are two ways to do it:

  • Upload files from your computer to the remote BrowserStack computer during the test.

  • Preload files from your computer to the BrowserStack server, and then access the files during the test.

You can upload up to 10 media files to the BrowserStack server. By default, files are deleted from the server after 30 days from the date of upload.

Upload files to the remote computer

For this, you have to use these two methods in your test script:

  • Local File Detector, to detect files on a local computer
  • Send Keys, to specify the location of the files

The Local File Detector method works for testing on Windows and Mac computers. It doesn’t work with mobile (both Android and iOS) browsers.

See the following sample scripts for reference:

  • Selenium 4 W3C test scripts to test on desktops
Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy
  • Selenium Legacy JSON test scripts to test on desktops
Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy

To test the file upload feature on an Android device, use these methods:

  • Push File, to upload files from your computer to the /data/local/tmp/<file_name> directory on the remote BrowserStack computer
  • Send Keys, to upload files from the remote computer to the web app under test

The Push File method doesn’t work for testing with browsers on iOS devices.

See the following sample scripts for reference:

  • Selenium 4 W3C test scripts to test on Android
Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy
  • Selenium Legacy JSON test scripts to test on Android
Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy

Preload files to the BrowserStack server

When testing on Windows and Mac computers, the Local File Detector and the Send Keys methods don’t work as expected in some cases. Also, the Push File method doesn’t work for iOS devices. For these cases, BrowserStack has the following three-step workaround:

This method works for loading media (audio, image, and video) files only. You can test the file upload feature by uploading up to 5 files.

(1) First, preload your media files to the BrowserStack server using the Upload media file REST API:

Terminal
Copy icon Copy

BrowserStack returns a media_url (hash ID) of each file that you upload:

Terminal
Copy icon Copy

(2) Next, in your test script, specify the media_url for each file using the uploadMedia capability for the W3C protocol and browserstack.uploadMedia for the JSON wire protocol:

Capability Description Values
uploadMedia Set this capability if you want to use your uploaded images, videos, or audios in the test. Upload your media files to BrowserStack servers using REST API. Use the media_url value returned as a result of the upload request to set this capability. The media_url returned on successful upload.
Example: ["media://hashedid", "media://hashedid"]
Capability Description Values
browserstack.uploadMedia Set this capability if you want to use your uploaded images, videos, or audio in the test. Upload your media files to BrowserStack servers using REST API. Use the media_url value returned as a result of the upload request to set this capability. The media_url returned on successful upload.
Example: ["media://hashedid", "media://hashedid"]



Code snippets showing how to set uploadMedia (Selenium W3C)

Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy

Code snippets showing how to set browserStack.uploadMedia (Selenium Legacy JSON)

Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy

At the time of the test, each specified file is uploaded from the BrowserStack server to the BrowserStack remote computer or device used for the test. The remote directory to which a file is uploaded depends on the type of file. For example, if it’s an image file, it’s uploaded to /Documents/images on Mac and to C:\\Users\\hello\\Documents\\images\\ on Windows.

For a list of all directories where files are stored on a BrowserStack remote computer, see Test with preloaded files.

(3) Finally, specify the corresponding fully qualified <MEDIA_DIRECTORY> location on the remote computer as the argument to the Send Keys method. The specified files on this <MEDIA_DIRECTORY> location are uploaded during the test to check the file upload functionality. When testing on an iOS device, write your script to access Photo Library to select the file.

The following scripts show how to access a media file previously loaded to the BrowserStack server, from a BrowserStack remote computer or iOS device:

  • Selenium W3C test scripts for testing on desktops
Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy
  • Selenium W3C test scripts for testing on Mac
Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy
  • Selenium W3C test scripts for testing on iOS
Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy
  • Selenium Legacy JSON test scripts for testing on desktops
Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy
  • Selenium Legacy JSON test scripts for testing on Mac
Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy
  • Selenium Legacy JSON test scripts for testing on iOS
Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy
Copy icon Copy

Supported file formats

The table below lists different types of media and non-media files that you can preload to the BrowserStack server:

OS Max size Allowed type
macOS 15MB .png, .tiff , .tif, .jpg, .jpeg, .gif, .bmp, .bmpf
Windows -
Any supported browser
15MB .png, .jpg, .jpeg, .gif, .svg, .webp, .avif
iOS 15MB .png, .tiff , .tif, .jpg, .jpeg, .gif, .bmp, .bmpf
Android 15MB .png, .jpg, .jpeg, .gif, .bmp, .bmpf
OS Max size Allowed type
macOS 50MB .mp4, .mov
Windows -
Any supported browser
50MB .mp4, .webm, .3gp, .qt, .qtff, .ogg
iOS 50MB .mp4, .mov
Android 50MB .mp4, .mkv, .3gp, .3gpp
OS Max size Allowed type
macOS 15MB .aac, .aiff, .mp3, .wav
Windows 15MB .aac, .mp3, .wav
iOS 15MB .aac, .aiff, .mp3, .wav
Android 15MB .mp3, .wav
OS Max size Allowed type
macOS 15MB .zip, .xlsx, .xls, .pdf, .pnp, .csv, .html, .txt, .ppt, .doc, .docx, .tar, .rar
Windows 15MB .zip, .xlsx, .xls, .pdf, .pnp, .csv, .html, .txt, .ppt, .doc, .docx, .tar, .rar
iOS NA Uploading non-media files to iOS is not supported.`
Android NA Uploading non-media files to Android is not supported.

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked





Thank you for your valuable feedback

Is this page helping you?

Yes
No

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked





Thank you for your valuable feedback!

Talk to an Expert
Download Copy Check Circle