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. mabl intercepts the file picker and opens the file selection modal.
2. In the mabl file picker menu, choose a source. If the page's file input accepts multiple files, you can build a list of files to upload, from any of the supported sources:
   • Your computer: browse your local disk and upload the file to your workspace.
   • Downloaded in this test: reuse a file that your test captured from an earlier download 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 upload: choose a file you have already saved to your workspace uploads.
   • File variable: use a file uploaded to the test as a data-driven variable. Select a specific file variable, or type a filename template that combines text with mabl variable syntax to choose the file at runtime. File variables may also be overridden by shared file downloads from an earlier test in the plan.
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 a Playwright locator, CSS, or XPath:

1. In the Trainer, add a custom find step: Add step > Find Elements.
2. Enter the locator that targets the file input. For example, xpath=//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: xpath=//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.

For steps that support uploading multiple files, the list arrives pre-filled with the files the step already holds, from which you can add or delete files as needed.

Data-driven file sources

When you select File variable as the file source, the file doesn't have to be fixed when you record the step. mabl can decide which file to upload when the test runs, from either of these sources:

• Shared file variables downloaded in an earlier test and shared with the current test.
• A filename template that resolves to the name of one of the test's file variables

Upload a file that an earlier test downloaded

A file that one test downloads can be uploaded by another test in the same plan. Use shared variables to validate round trip journeys, for example exporting a report in one test and re-importing it in another.

1. Name the file in the downloading test. Open the download step and fill in Save as file variable, for example exportedReport. Name it deliberately: if you leave the field blank, mabl names the variable for you, and the uploading test has nothing to match.
2. Share that test's variables. On the downloading test's details page, toggle on Shared variables. See sharing variables between tests.
3. Add a matching file variable to the uploading test: {x} > Manage variables > Data-driven variables > New file variable. Give it the same name, and upload any file as a placeholder for training. Names are case sensitive.
4. Add or edit a file upload step, select File variable as the file source, and select the placeholder variable.
5. Order the plan so the downloading test finishes first, using a sequential stage or separate stages.

During training and ad hoc runs, the step uploads the placeholder file. During plan runs in the cloud, the file from the downloading test replaces it.

Select a file variable by name at runtime

If your test needs to upload a different file depending on the situation, you can select the file variable by name when the test runs. Combine literal text with mabl variable syntax to build a filename template, and mabl resolves the template to a file variable at runtime.

1. Choose the variable that holds your runtime value. This can be a DataTable scenario value, a value extracted from the page, or a value from an API response.
2. Create a file variable for each expected value, naming each one so it matches your template. For example, for a variable named country_code, you could name the file variables users_us, users_ca, and users_fr.
3. Add or edit a file upload step, select File variable as the file source, and type the filename template in the Variable field instead of picking a specific variable: users_{{@country_code}}.

When the test runs, the step uploads whichever file variable the template resolves to: users_ca when the page shows ca, users_fr when it shows fr.

Using conditionals instead

If your files aren't named on a predictable pattern, use conditionals to evaluate the scenario and set the input to the appropriate file. This approach needs a condition for every file, so a filename template is usually simpler when the names can follow a convention. 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