Date & Files

File Upload

Intermediate

Upload avatar

Live widget · interact freely

Manual test goal

Upload an image, verify size + type validation, and reject files that exceed the budget.

Expected result

A 50KB PNG renders a preview thumbnail; a 5MB upload triggers the size error.

Stable selectors

File input[data-testid="upload-input"]
Preview thumbnail[data-testid="upload-preview"]
Size error[data-testid="upload-error"]

Reference Playwright spec

file-upload.spec.ts

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

test('file upload validates size and type', async ({ page }) => {
  await page.goto('https://lab.hakdogan.com/practice/file-upload');

  await page.getByTestId('upload-input').setInputFiles('fixtures/avatar.png');
  await expect(page.getByTestId('upload-preview')).toBeVisible();
});

Demo Simulator

Simulated Playwright run · no real browser is launched

Idlefile-upload.spec.ts

https://lab.hakdogan.com/practice/file-upload

# console output will stream here