Playwright Upload File

Playwright Upload File

Uploading a file using playwright is easy now as it can be flawlessly done using the page.setInputFiles(selector, filepath). It expects the first argument to be the selector and the second to be the path to the file that needs to be uploaded.

Multiple files can also be passed in the array. The empty array represented will clear the selected files.

await page.setInputFiles('input#upload', 'file');

await page.setInputFiles('input#upload', ['file1', 'file2']);

await page.setInputFiles('input#upload', []);


We have done the automation over the autopract site for real-time representation, where we can practice our day-to-day automation using various automation tools.

  • This is the upload part of the page.
const {test, expect} = require('@playwright/test');
const site = "";

test('ElementHandle', async ({page})=> 

    await page.goto(site);
    await page.locator('.close').click()
    await page.locator("input[type='file']").scrollIntoViewIfNeeded()
    await page.setInputFiles("input[type='file']", 'G.png')
    await page.pause()
    await page.locator('.btn.btn-success').click()


  • We can see here that the file G.png, present in our root of the test, has been uploaded here after choosing the argument locator for choose file.
  • Then followed by the filename.
Standard (Image)