How to test File Uploads

Introduction

When you manually upload a file on a site, a native window from the Operating System opens which allows you to select the file.

After you select the file from that window, the local path of the file is written in the <input type="file"> element.

Since our engine is using the webdrivers to locate and interact with elements from Web Applications, our engine cannot see or interact with that native window from the Operating System.

That's why our Upload FIle action writes the local path of the file directly in the <input type="file"> element, thus skipping the native window from the Operating System.

In the Upload FIle action, you need to provide the online path for your file.

You can get an online path for your file by uploading it in our Drive section.

Our engine will download the file from that path, place it on the machine on which the test is executed and it will get the local path for that file and write it in the <input type="file"> element.

There is no need to add a Click step that clicks on the Choose file button from your Web Application, since there is no need for the native window from the Operating System to be displayed.

Sometimes, the <input type="file"> may be hidden or may not be displayed.

In order for our engine to interact with that input, you might need to add an Execute JavaScript step to make it visible.

Steps

  1. Upload your file in our Drive section.
  2. Copy the File Download URL for your uploaded file.
  3. Find the <input type="file"> in your Web Application.
  4. Get the locator for that element.
  5. Add the File Download URL for your file in the Upload File step.


In order for our engine to interact with that input, you might need to add an Execute JavaScript step before step 5 in order to make it visible.

The Execute JavaScript step must be placed before the Upload File step.

For this example, we'll pretend that the <input type="file"> has the myFile ID.

document.querySelector("#myFile").style.visibility="visible";
document.querySelector("#myFile").style.display="block";

Depending on the state of your element, you might also need to update CSS properties such as width, height, opacity, z-index, pointer-events, etc.

document.querySelector("#myFile").style.visibility="visible";
document.querySelector("#myFile").style.display="block";
document.querySelector("#myFile").style.width="200px";
document.querySelector("#myFile").style.height="20px";
document.querySelector("#myFile").style.position="fixed";
document.querySelector("#myFile").style.overflow="visible";
document.querySelector("#myFile").style.zIndex="9999999";
document.querySelector("#myFile").style.top="500px";
document.querySelector("#myFile").style.left="500px";
document.querySelector("#myFile").style.right="500px";
document.querySelector("#myFile").style.bottom="500px";

If you still can't figure it out, just send us a message, we'll gladly help out.

You can also upload files in the Drive by using our Endtest API.

More details are available in the Endtest API chapter.

← How to test in multiple tabsHow to test File Downloads →