Formsintermediate 10 min

File Upload Inputs — Practice in Playwright, Selenium & Cypress

File upload automation practice in Playwright, Selenium, and Cypress — setInputFiles, hidden inputs, drag-and-drop uploaders, and progress assertions.

Live element

Locators cheat-sheet

data-testid	Role	Accessible label	What it is
file-input	textbox	Choose files	Native <input type="file" multiple> for one or many files.
uploaded-files	list	Uploaded file list	Renders the names of every selected file.

Reference solutions

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

test('uploads multiple files and lists their names', async ({ page }) => {
  await page.goto('/practice/file-upload');
  const frame = page.frameLocator('iframe[title="File upload live widget"]');

  await frame.getByTestId('file-input').setInputFiles([
    path.join(__dirname, 'fixtures/a.txt'),
    path.join(__dirname, 'fixtures/b.png'),
  ]);

  const list = frame.getByTestId('uploaded-files');
  await expect(list).toContainText('a.txt');
  await expect(list).toContainText('b.png');
});

Try it in the Practice Hub Open learning module