File Upload Demo

← Back to Tetsing Lab

☁️

Click to browse or drag a file here

Accepted: images (PNG, JPG, GIF, WebP) and PDF · Max 5 MB

📄

Uploading… 0%

✅ Upload complete! File is ready.

🎭

How to automate this page

File input and drag-and-drop are two of the trickiest interactions in Playwright. These steps cover both.

terminal # One-time setup
npm init playwright@latest

# Run your tests
npx playwright test

# Open the HTML report
npx playwright show-report

1 Drop zone becomes active on dragover drag event ▼

Playwright can fire a native drag event onto an element using page.dispatchEvent. After the dragover event fires, the zone should have the .dragover class visually indicating readiness.

tetsing-lab.spec.ts

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

test('drop zone gets active style on dragover', async ({ page }) => {
  await page.goto('https://falcoma.com/tetsing-lab/file-upload-demo');

  const zone = page.locator('[data-testid=drop-zone]');

  await zone.dispatchEvent('dragover', { dataTransfer: {} });

  await expect(zone).toHaveClass(/dragover/);
});

2 Uploading a valid file shows the preview and progress bar happy path ▼

Use setInputFiles to attach a file to the hidden input. The preview panel should appear with the file name, and the progress bar should start filling.

tetsing-lab.spec.ts

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

test('shows file preview and progress bar after selecting a file', async ({ page }) => {
  await page.goto('https://falcoma.com/tetsing-lab/file-upload-demo');

  const filePath = path.join(__dirname, 'fixtures/test-image.png');
  await page.setInputFiles('[data-testid=input-file]', filePath);

  await expect(page.locator('[data-testid=file-preview]')).toBeVisible();
  await expect(page.locator('[data-testid=file-name]')).toContainText('test-image.png');
  await expect(page.locator('[data-testid=progress-wrap]')).toBeVisible();
});

3 Upload completes and shows the success message async upload ▼

After the fake progress bar completes (~2 seconds), the success message should appear and the progress bar should be hidden.

tetsing-lab.spec.ts

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

test('shows success message after upload completes', async ({ page }) => {
  await page.goto('https://falcoma.com/tetsing-lab/file-upload-demo');

  await page.setInputFiles('[data-testid=input-file]',
    path.join(__dirname, 'fixtures/test-image.png'));

  // Wait for the fake upload to finish
  await expect(page.locator('[data-testid=upload-success]'))
    .toBeVisible({ timeout: 5000 });

  await expect(page.locator('[data-testid=progress-wrap]')).not.toBeVisible();
});

4 Invalid file type shows the error message validation ▼

Attach a .txt file which is not in the accepted list. The preview should not appear, and the error banner should show the rejection message.

tetsing-lab.spec.ts

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

test('shows error for an unsupported file type', async ({ page }) => {
  await page.goto('https://falcoma.com/tetsing-lab/file-upload-demo');

  // Create a simple text file fixture on the fly
  await page.setInputFiles('[data-testid=input-file]', {
    name: 'notes.txt',
    mimeType: 'text/plain',
    buffer: Buffer.from('hello world'),
  });

  await expect(page.locator('[data-testid=upload-error]'))
    .toContainText('File type not accepted');
  await expect(page.locator('[data-testid=file-preview]')).not.toBeVisible();
});

🔐

Unlock Playwright Tutorial

Get the full automation guide for File Upload Demo — real test code, step by step.

€ 1.99 one-time

Unlock for €1.99 →

🔒 Secure checkout · Instant access · No subscription

📁 File Upload Demo

Unlock Playwright Tutorial