Your Automation Playground

Master Playwright
Test Automation

A beautifully crafted practice arena with every UI pattern you need to become a Playwright expert. Forms, tables, modals, drag & drop, shadow DOM, iframes, and much more.

0Sections
0Elements
0Patterns
01

Form Elements

Practice with every type of form input, validation, and interaction pattern.

Registration Form

Validation
0/200

Sliders & Range

Input
#6366f1

File Upload

Upload

Drag & drop files here or

Supports: Images, PDF, DOC (Max 5MB)

Auto-Suggest

No DOM

Multi-Select

Select

Hold Ctrl/Cmd to select multiple

02

Data Tables

Sortable, filterable, and paginated data tables for comprehensive testing.

User Management

ID ↕ Name ↕ Email ↕ Role Status ↕ Actions

Inline Editable Table

Editable
Product Price Quantity Total
MacBook Pro 2499 1 $2,499
iPhone 15 Pro 1199 2 $2,398
AirPods Max 549 1 $549
Grand Total: $5,446

Dynamic Table

Randomized

Columns and rows change position on every page reload. Cell values are random.
03

Interactions

Drag & drop, hover effects, context menus, and click interactions.

Drag & Drop

DnD

Reorder the items by dragging:

  • Check emails
  • Write code
  • Review PRs
  • Run tests
  • Deploy

Drop here to remove

Hover Effects

Hover
Hover me
Scale
Rotate
Color
This is a custom tooltip with HTML content!

Context Menu

Menu

Right-click anywhere in this area

Toggle Buttons

04

Shopping

A complete e-commerce workflow — browse products, add to cart, apply coupons, and checkout.

Lamborghini Huracan Luxury

Lamborghini Huracan

V10 engine, 630 HP, 0-100 in 2.9s

₹3,21,00,000
Triumph Speed Triple Sport

Triumph Speed Triple 1200

1160cc triple engine, 180 HP, Ohlins suspension

₹16,95,000
Seiko Presage Classic

Seiko Presage Cocktail Time

Automatic movement, sapphire crystal, 50m WR

₹32,500
Luxury Yacht Luxury

Oceanis Luxury Yacht

Spacious deck, premium cabin, and smooth coastal cruising

₹1,85,00,000

Available Offers

FLAT10 — 10% off on orders above ₹50,000
SPEED20 — 20% off on automobiles
FIRST500 — ₹500 off on your first order

Shopping Cart 0

Your cart is empty.

05

Dynamic Content

Practice waiting for elements, handling loading states, and dynamic DOM changes.

Delayed Loading

Wait
Content will appear here...

Visibility Controls

DOM

I'm visible!

Start / Stop Toggle

Status: Stopped

Counter & Timer

State
0

Auto-updating Timer

00:00

Progress Indicators

Progress
0%
06

Modals & Alerts

Dialog boxes, confirmation prompts, toast notifications, and alerts.

Modal Dialogs

Modal

HTTP Basic Auth

Auth

Opens the real native HTTP Basic Authentication popup (server returns 401). Handle it in Playwright via httpCredentials.

Username: admin Password: password123

Notifications

Toast

Native Dialogs

Native

Inline Alerts

Alert
Success! Operation completed.
Error! Something went wrong.
Warning! Please check your input.
Info: System will restart at midnight.
07

Tabs & Accordion

Tabbed interfaces and collapsible content panels.

Tabs

Overview

PlayLab is a comprehensive test automation practice website designed for learning Playwright, Selenium, Cypress, and other browser automation tools.

Features

  • 50+ interactive UI elements
  • Dynamic content loading
  • Responsive design testing
  • Theme switching (dark/light)
  • Authentication flows

Pricing

Free! This practice site is completely open-source and free to use for learning automation testing.

This tab is disabled.

Accordion

Playwright is a modern end-to-end testing framework created by Microsoft. It supports Chromium, Firefox, and WebKit browsers with a single API.

This site provides a safe environment to practice various automation scenarios without affecting real applications. It covers forms, tables, modals, drag & drop, and more.

Install Playwright with npm init playwright@latest, then write your tests targeting this site's elements using the provided data-testid attributes.

Absolutely! Fork the repository, add new practice sections, and submit a pull request. All contributions are welcome.

08

Frames & Windows

Practice with iframes, new windows, and cross-frame interactions.

iFrame

Frame

Nested Frames

Nested

External iFrame

External

Window Handling

Window
09

Uploads & Downloads

Single/multiple file upload flows plus a real PDF to test browser download/viewer behavior.

Single File Upload

Single

Drag & drop a file here or

One file only (Max 5MB)

Multiple File Upload

Multiple

Drag & drop files here or

Multiple files allowed (Max 5MB each)

Downloads

PDF
Download PDF
10

Shadow DOM

Elements encapsulated within Shadow DOM for advanced testing.

Shadow DOM Elements

Nested Shadow DOM

11

Advanced Scenarios

Complex patterns for advanced automation practice.

Infinite Scroll

Scroll

Clipboard & Keys

Keyboard
Press any key...

API & Network

API
Click to fetch data...

Local Storage

Image Gallery with Lightbox

Gallery
12

Multi-Step Wizard

Navigate through a multi-step form with validation at each step.

1Personal
2Address
3Payment
4Review

Personal Information

Address Details

Payment Method

Review & Submit

Order Submitted!

Your order has been placed successfully.

14

Network & API

Practice intercepting network requests, mocking APIs, and handling responses.

Fetch Users API

GET

Fetches from https://jsonplaceholder.typicode.com/users

Click to fetch...

Submit Data API

POST
Submit to see response...

Slow API (Timeout)

Delay

Simulates a slow API response for testing timeouts.

Waiting...

Error Responses

Errors

Trigger different HTTP error responses:

Click an error code...
15

Flaky & Retry Elements

Elements that randomly appear, disappear, or change — great for practicing waitFor and retry logic.

Random Appear

Flaky

This element randomly appears/disappears every 2 seconds:

Now you see me!
Visible

Delayed Button

Wait

Button appears after a random delay (1-5s):

Changing Text

Flaky

Text changes every 3 seconds — wait for the right one:

Loading...

Try waiting for: "Success! Click now"

16

Custom Date Picker

A custom calendar widget — more realistic than native date inputs.

Calendar Picker

Typable Date

Month / Year Picker

Date Range

17

Media Player

Audio and video controls for testing media interactions.

Video Player

0:00

Audio Player

Sample Audio Track

PlayLab Demo Audio

0:00
18

Accessibility (a11y)

Test ARIA attributes, keyboard navigation, focus management, and screen reader support.

Keyboard Navigation

Use Tab / Shift+Tab to navigate, Enter/Space to activate:

Skip Link

Scroll content area...

More content...

Even more content...

Target content reached!

ARIA Attributes

Search results update as you type

ARIA Expanded / Controls

Focus Trap (Modal-like)

19

Responsive Testing

Elements that change behavior and visibility based on viewport size.

Viewport-Aware Elements

Desktop Only Visible at > 768px
Tablet Only Visible at 481–768px
Mobile Only Visible at ≤ 480px
Always Visible Visible at all sizes

Current viewport: — × —

Breakpoint: —

Responsive Layout Change

These cards stack on mobile but display side-by-side on desktop.

Card A
Card B
Card C
20

Protected Content

Content that requires authentication — practice testing auth guards.

Protected Area

Authentication Required

You must be logged in to view this content.

Login with: test@playlab.com / Password123

Login to Access