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 mabl file picker menu, choose a source:
   • Computer: browse your local disk and upload the file to your workspace.
   • Downloaded: reuse a file your test downloaded earlier in the same test. mabl tracks the download as a file variable, so replay picks up the right file even when its name changes between runs.
   • Workspace: choose a file you have already saved to your workspace uploads.
3. mabl automatically records 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.

Recording custom file upload steps

If, for some reason, the Trainer doesn't record a "set file input" step when you select a file, try creating a custom file upload step with CSS or XPath:

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'].

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