Uploading files to your web app

In the mabl Trainer, you can combine file upload steps with assertions to ensure your web application is handling file upload interactions as expected. File uploads are added to your mabl workspace for future test editing and cloud runs, and you can access them by going to Configuration > File Uploads in the app.

Read on to learn more about uploading files to your web app.

Training a file upload step

File upload steps require your application to have a file type input element in the page’s HTML. This is the standard HTML element for file selection, and it’s what mabl interacts with to set the file input. If your application doesn’t have this element, file upload steps won’t work.

To get started, open the mabl Trainer and navigate to the page in your application where the file upload step needs to occur. Make sure the record button is on.

1. Click on the “file upload” or “choose file” button in your application.
2. In the file selection dialog, select the file you would like to upload from your computer.
3. Click Open. The Trainer will automatically record a step that sets the file input: “Set file input to {name-of-file}”.
4. Record the action to submit the file upload in your application. For example, click on the “submit” button.
5. Create an assertion to confirm that the upload was successful. This assertion will depend on what happens in the application after a successful file upload.

If the Trainer doesn’t record a “Set file input” step

If the Trainer records a “click” step instead of a “set file input” step when you select a file, your application may have a hidden file input element. Some web applications hide the file type input element behind a visible button or drop zone. The Trainer records a click on the visible element, but doesn’t associate the interaction with the hidden file input.

To work around this, try creating a custom file upload step:

1. In the Trainer, add a custom find step: Add step > Find Elements.
2. Switch to XPath and enter //input[@type='file'].
3. Select Set file input as the action.
4. Choose the file you want to upload from the dropdown.

If the page has multiple file input elements, you may need a more specific XPath expression to target the correct one, for example: //input[@type='file' and @name='document'].

Adding files to your workspace

Custom file upload steps can only select from files that have already been uploaded to your mabl workspace. To upload new files from your local machine, you must record a file upload step. 

If you can’t record a file upload directly in your application, try this workaround:

1. Open the mabl Trainer and navigate to https://sandbox.mabl.com/file-upload.
2. Record a file upload step using the sandbox’s upload form. This adds the file to your workspace.
3. Delete the sandbox file upload steps from your test.

The file is now available in Configuration > File Uploads and can be selected in any “Set file input” step across your workspace.

Replaying file upload steps in the Trainer

After recording a file upload step, delete the click step that opens the file selection dialog. Otherwise, you will need to manually dismiss the file selection dialog every time during Trainer replay.

mabl cannot interact with the file selection dialog during Trainer replay or local/cloud runs because it is part of the operating system, not the HTML of the page. Learn more about what the mabl Trainer can and cannot interact with here.

Updating file input

To update the file input, click on the pencil icon next to the recorded file upload step. You can choose a new file input from the dropdown.

To use a new file upload that has not yet been uploaded to the mabl application, delete the existing file upload step and record a new upload step with new file input.

Uploading different files for different scenarios

If you need to upload a different file depending on the situation, use conditionals to evaluate the scenario and set the input to the appropriate file. The following screenshot shows test steps that upload a different file depending on the DataTable scenario:

Uploading a different file according to the DataTable scenario