How to Test File Uploads with Playwright

If you’re using Playwright for end-to-end testing, you should check out Playwright Check Suites and start testing in production.

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.

Steps

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:

file-upload.ts

// Example code for testing file uploads
import { test, expect } from '@playwright/test';

test('upload profile image', async ({ page }) => {
  // Login to the website
  await page.goto('https://danube-web.shop/login');
  await page.fill('#email', process.env.USER_EMAIL!);
  await page.fill('#password', process.env.USER_PASSWORD!);
  await page.click('#login-button');

  // Navigate to profile page
  await page.goto('https://danube-web.shop/profile');

  // Upload file
  await page.setInputFiles('input[type="file"]', process.env.FILE_PATH!);
  await page.click('#upload-button');

  // Verify upload success
  await expect(page.locator('#upload-success')).toBeVisible();
  await expect(page.locator('#upload-success')).toContainText('Upload successful');
});

macOS/Linux:

USER_EMAIL=[e-mail] USER_PASSWORD=supersecure1 FILE_PATH=file.jpg npx playwright test file-upload.ts

Windows:

SET USER_EMAIL=[e-mail]
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.

Takeaways

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.

Further reading

1. Official documentation from Playwright

Bugs don’t stop at CI/CD. Why would Playwright?

Sign up and start using Playwright for end-to-end monitoring with Checkly.