Table of contents

How to Test File Uploads with Playwright

Most services allow users to upload files to their accounts. This can be a profile picture, a document, or any other type of file. Testing this functionality is crucial to ensure that users can upload files without any issues. In this example, we will show you how to test file uploads using Playwright.

Account properties to verify can run the gamut from simple text to connected third party services. In this example, we will focus on a popular case: changing a profile image by uploading one of our own.

On our test site, such a test could look as follows:

import { test, expect } from '@playwright/test'

test('file upload', async ({ page }) => {
  await page.goto('https://danube-web.shop/')

  await page.getByRole('button', { name: 'Log in' }).click()
  await page.getByPlaceholder('Email').fill(process.env.USER_EMAIL)
  await page.getByPlaceholder('Password').fill(process.env.USER_PASSWORD)
  await page.getByRole('button', { name: 'Sign In' }).click()
  await page.locator('#account').click()

  const handle = await page.$('input[type="file"]')
  await handle.setInputFiles(process.env.FILE_PATH)

  await page.getByRole('button', { name: 'Upload' }).click()
  await expect(page.getByText('Upload successful.')).toBeVisible()
})

USER_EMAIL=user@email.com USER_PASSWORD=supersecure1 FILE_PATH=file.jpg npx playwright test file-upload.ts

SET USER_EMAIL=user@email.com
SET USER_PASSWORD=supersecure1
SET FILE_PATH=file.jpg
npx playwright test file-upload.ts

Here, we are simply checking for a message giving us feedback on the status of the upload. Depending on the website we are testing, it might be possible to also download the profile image afterwards to run a comparison locally for a more robust check.

1. Use environment variables to inject secrets.
2. Use setInputFiles (Playwright) to upload the file.
3. If possible, download the file from the platform and compare it with the one that was just uploaded.

1. Official documentation from Playwright