UI-licious Documentation

Appearance

Uploading Files ​

Many applications allow users to upload files — profile pictures, documents, or attachments. It is important to include test cases that validate whether an application correctly accepts files of the expected format and within allowed size limits.

Using the I.upload() command to upload files ​

Use the I.upload() command to upload files to a file input element (<input type="file">).

The command expects two arguments:

  • element - the file input element to upload the file to (by visible text, CSS, or XPath)
  • filePath - path to the file to upload within the project directory (absolute or relative)

Take this file input field as a reference for the following example:
Simple File Input Field
UI
HTML
<!--[--><label for="#profile-picture-input">Profile Picture</label>
<input id="profile-picture-input" type="file">
<!--]-->

Example:

js
// using the label
I.upload("Profile Picture", "img/profile-picture-128.png")

// using css
I.upload("#profile-picture-input", "img/profile-picture-128.png")

// or xpath
I.upload("//input[@type='file']", "img/profile-picture-128.png")

This uploads the file at img/profile-picture-128.png from the project directory to the "Profile Picture" input field.

WARNING

Avoid triggering the native file dialog, as it cannot be automated and will cause the test to hang.

There is no need to open the file dialog when automating uploads, as the I.upload() command works by attaching files directly to the <input type='file'> field.

Uploading a downloaded file ​

You can also upload a file that was downloaded earlier during the test.

Downloaded files are saved to a virtual folder named //downloads. You can reference these files by prefixing //downloads to the file name.

js
// this will upload "fileA.pdf" from the browser's "Downloads" folder
I.upload("Supporting documents", "//downloads/fileA.pdf")

Alternatively, you can access downloaded files using the UI.Downloads.files property and reference the path of the file you want to upload.

js
// upload the first file
I.upload("Supporting documents", UI.Downloads.files[0].path)

// upload the second file
I.upload("Photo", UI.Downloads.files[1].path)

// upload the most recently downloaded file
I.upload("Certificate", UI.Downloads.files.last.path)