Uploading files is a common task in web applications, especially in forms where users need to submit documents, images, or data files. Whether it’s a .txt, .pdf, .jpg, or any other file format, automating file uploads is an essential part of end-to-end testing. Upload files in Playwright is straightforward once you understand how to work with the element.
This guide will walk you through different ways to upload single or multiple files using Playwright, including real-world examples and tips for common use cases.
To upload files in Playwright, you can use the built-in setInputFiles() method, which allows you to upload both single and multiple files with ease.
Let us see how to upload a single file, upload multiple files, and remove selected files from a file input field using Playwright — all with practical examples.
Upload a Single File in Playwright
There are generally two types of file upload input fields: single file upload and multiple file upload. To upload a single file in Playwright, you can use the built-in setInputFiles() method by passing the path of the file as an argument. Make sure that the file path you provide is correct and accessible in your test environment. This method simulates the action of selecting a file from the file system to be uploaded through the input field.
Let’s now look at how to upload a single file in Playwright with a practical example.
Example of uploading a single file in Playwright
const { test, expect } = require('@playwright/test');
test('Example: Upload single file using setInputFiles() method in playwright.', async ({ page }) => {
await page.goto('http://only-testing-blog.blogspot.com/2014/02/attributes.html');
//Locate single file upload input element
const uploadFile= page.locator('input[name="img"]');
//Select single file to upload using setInputFiles() method.
await uploadFile.setInputFiles('D:/Test1.txt');
});
Code Breakdown
- page.locator(‘input[name=”img”]’): This Playwright statement is used to locate the element where the name attribute is set to “img”. It targets the file upload field on the page, allowing you to interact with it (e.g., upload files using setInputFiles()).
- setInputFiles(‘D:/Test1.txt’): This command uploads the Test1.txt file located at the specified path. The playwright will simulate a user selecting this file in the file upload input field.
If your file upload form includes checkboxes (like terms acceptance), check out how to select and validate checkboxes using Playwright effectively.
Upload Multiple Files In Playwright
If your form has a multiple file upload input field, you can easily upload more than one file using Playwright’s setInputFiles() method. To do this, pass an array of file paths to the method. The playwright will simulate selecting and uploading all specified files in the automation flow.
Let’s now see how to select and upload multiple files in Playwright automation testing with a practical example.
Example to Select and Upload Multiple Files In Playwright
const { test, expect } = require('@playwright/test');
test('Example: Upload Multiple files using setInputFiles() method in playwright.', async ({ page }) => {
await page.goto('http://only-testing-blog.blogspot.com/2014/02/attributes.html');
//Locate multiple file upload input element
const uploadMultiFile= page.locator('#multiFiles');
//Select multiple files to upload using setInputFiles() method.
await uploadMultiFile.setInputFiles([
'D:/Test1.txt',
'D:/Test2.txt'
]);
});
Code Breakdown
- locator(‘#multiFiles’): This statement locates the file upload input element with the id=”multiFiles” in Playwright. It allows you to interact with a multiple file upload field on the page.
- This command selects and uploads both Test1.txt and Test2.txt from the specified file paths. It simulates a user selecting multiple files for upload in a file input field that supports multiple file selection.
Before interacting with a file upload input, it’s often important to ensure the element exists first. Learn how to verify if an element exists in Playwright using four reliable methods.
Remove Selected Files in Playwright
If you want to remove a file that has already been selected, you can use the setInputFiles() method without passing any file path. In Playwright, this effectively clears the selected file(s) from the file input field, simulating a user removing or resetting the upload.
File upload elements are sometimes disabled initially due to form validation or dynamic rendering. Learn how to wait for an element to be enabled in Playwright before interacting with it.
Let’s now see how to clear or remove a selected file in Playwright using a practical example.
Example to clear/remove a selected file in Playwright
const { test, expect } = require('@playwright/test');
test('Example: Remove Selected files using setInputFiles() method in playwright.', async ({ page }) => {
await page.goto('http://only-testing-blog.blogspot.com/2014/02/attributes.html');
//Locate multiple file upload input element
const uploadMultiFile= page.locator('#multiFiles');
//Remove Selected files from file upload input using setInputFiles() method.
await uploadMultiFile.setInputFiles([]);
});
Code Breakdown
- locator(‘#multiFiles’): This statement will locate the element with id = multiFiles.
- setInputFiles([]) — This command removes the currently selected file(s) from the file upload input field in Playwright. It simulates clearing or resetting the file selection.
Final Thoughts
Handling file uploads is a fundamental part of many web automation test cases in Playwright. The setInputFiles() method makes it easy to simulate file selection for both single and multiple file upload fields. Just provide the correct file path(s), and Playwright takes care of the rest—whether it’s selecting, uploading, or even clearing files from the input field.
With this approach, you can confidently automate file upload scenarios across various forms and applications.
Hi, I’m Aravind, a seasoned Automation Test Engineer with 17+ years of industry experience. I specialize in tools like Selenium, JMeter, Appium, and Excel automation. Through this blog, I share practical tutorials, tips, and real-world insights to help testers and developers sharpen their automation skills.