Working with File Uploads in Playwright

 In this article, we will explore how to work with file uploads in Playwright, a Node.js library that allows you to automate browser interactions for end-to-end testing and web scraping.

1. Single file upload

Here we are using the setInputFiles playwright method to select the files for file upload. Next, we are clicking the Upload button and finally to verify that the upload was successful, we are asserting the file name on the success page.

Syntax :

// Upload single File  
  await page.waitForSelector('[name="filesToUpload"]');
  await page.locator('[name="filesToUpload"]').setInputFiles('upload/playwright.png');

Example :

// @ts-check
import { test, expect } from '@playwright/test';

test('upload single file in playwright', async ({page}) => {

  await page.goto('https://davidwalsh.name/demo/multiple-file-upload.php');

  // Upload single File  
  await page.waitForSelector('[name="filesToUpload"]');
  await page.locator('[name="filesToUpload"]').setInputFiles('upload/playwright.png');

  //Get uploaded file name
  const uploadedFileName = await page.locator('//*[@id="fileList"]/li');  
  expect(uploadedFileName).toHaveText('playwright.png'); 

}); 

2. Multiple File Upload

Similarly, here also we are using the setInputFiles command, but instead of one file path, we are passing an array of file paths.

Syntax: 

// Upload single File  
  await page.waitForSelector('[name="filesToUpload"]');
  await page.locator('[name="filesToUpload"]').setInputFiles(['upload/playwright.png', 'upload/selenium.png']);  

Example:

// @ts-check
import { test, expect } from '@playwright/test';

test('upload multiple files in playwright', async ({page}) => {

  await page.goto('https://davidwalsh.name/demo/multiple-file-upload.php');

  // Upload single File  
  await page.waitForSelector('[name="filesToUpload"]');
  await page.locator('[name="filesToUpload"]').setInputFiles(['upload/playwright.png', 'upload/selenium.png']);  

  //Get uploaded file name
  const uploadedFileName1 = await page.locator('//*[@id="fileList"]/li[1]');
  const uploadedFileName2 = await page.locator('//*[@id="fileList"]/li[2]');
 
  expect(uploadedFileName1).toHaveText('playwright.png');
  expect(uploadedFileName2).toHaveText('selenium.png');  
 
});

3. Remove Selected Files 

Here, first we are using the setInputFiles command to select the files for upload and then asserting that the intended file was selected successfully. Then, we are using the setInputFiles command again with an empty array to remove the selected file and asserting that the file was un-selected successfully.

Syntax :

//remove files
  await page.locator('[name="filesToUpload"]').setInputFiles([]);  

Example :

// @ts-check
import { test, expect } from '@playwright/test';

test('remove all selected files', async ({page}) => {

  await page.goto('https://davidwalsh.name/demo/multiple-file-upload.php');

  // Upload single File  
  await page.waitForSelector('[name="filesToUpload"]');
  await page.locator('[name="filesToUpload"]').setInputFiles(['upload/playwright.png', 'upload/selenium.png']);  

  //Get uploaded file name
  const uploadedFileName1 = await page.locator('//*[@id="fileList"]/li[1]');
  const uploadedFileName2 = await page.locator('//*[@id="fileList"]/li[2]');

  expect(uploadedFileName1).toHaveText('playwright.png');
  expect(uploadedFileName2).toHaveText('selenium.png');

  //remove files
  await page.locator('[name="filesToUpload"]').setInputFiles([]);  
  expect(uploadedFileName1).toHaveText('No Files Selected');  
 
});

Final output :