Test Automation Practice
Real UI elements to point your tests at, from text fields to custom dropdowns. Each topic gives you tasks to automate, a tip on how to locate every element, and a solution you can check your work against.
- Pick a topic and read the tasks under each element.
- Write your test against this site, using the setup below.
- Compare with the solution. Every solution is a real test that runs against these pages.
Topics
Inputs & Forms
Text fields, checkboxes, radio buttons, native and custom dropdowns, and form validation.
Start practising → ReadyButtons & Mouse Actions
Click, double-click, right-click, hover menus, tooltips, keyboard keys and button states.
Start practising → ReadyAlerts & Dialogs
Browser alert, confirm and prompt boxes, plus in-page modal dialogs.
Start practising → ReadyFrames & Windows
Iframes, nested iframes, new tabs and popup windows.
Start practising → ReadyWeb Tables
Static, sortable and paginated tables: find a row, read a cell, sum a column.
Start practising →Waits & Dynamic Content
Elements that appear late or disappear, loading spinners and IDs that change on every load.
Scrolling
Infinite scroll, scrolling inside a box, and elements you must scroll into view.
Drag & Drop
Drag items between lists and reorder them.
File Upload & Download
Single and multiple file uploads, and downloads you can verify.
Date Pickers, Sliders & Auto-suggest
The tricky widgets: calendars, range sliders and search-as-you-type lists.
Links & Images
Find broken links and broken images, and check where links point.
Shadow DOM
Elements hidden inside open shadow roots and web components.
SVG & Canvas
Charts and icons drawn with SVG or canvas, which normal locators struggle with.
Login Flow
A fake login (runs entirely in your browser) with errors, a dashboard and logout.
Cookies & Storage
Read and set cookies and localStorage, and reuse a logged-in state between tests.
Set up Playwright
In an empty folder, run npm init playwright@latest and choose TypeScript. Then set baseURL in playwright.config.ts so your tests can open a topic with a short path like page.goto('/practice/forms'):
import { defineConfig } from '@playwright/test';
export default defineConfig({
testDir: './tests',
use: {
baseURL: 'https://hiraanachwani.com',
},
});Run your tests with npx playwright test, or npx playwright test --ui to watch each step in the browser.
These pages stay stable: element labels, IDs and data-testids won't change once published, so your tests keep passing. Found a problem or want a topic added? Let me know.