Multiple Element Filter
Hands-on with allInnerTexts(), locator.all() and filter({ hasText }) on a realistic login UI. Best place to start if you're new to Playwright locators.
The Testing Academy . Playwright practice
Practise Playwright on real pages.
32 hands-on pages built specifically to teach Playwright - locator strategies, tables, forms, frames,
widgets, network mocking, end-to-end projects, and the patterns you use in every real test suite.
Every interactive element ships with data-test, id and an accessible name.
Pick a track below, or scroll the full catalogue further down.
34
Practice pages
4
Full E2E projects
15
Concept references
700+
data-test hooks
Practice page
End-to-end project
Concept reference
Start here
The three best entry points - one for learning locators, one for a guided project, one for everything together.
TTACart end-to-end demo
Full TTACart-style e-commerce flow with 6 special test users, sort, cart, 2-step checkout. Write a complete Playwright suite against it.
Open TTACartBuild the framework, folder by folder
Step-by-step walkthrough of a production-grade Playwright framework: TypeScript, Page Objects, fixtures, JSON/CSV data, Allure, Docker, sharded CI.
Open the tutorialPick a track
Click a card below to jump to its full list further down the page.
Selectors, tables, forms
Locators, web tables, dropdowns, comboboxes, sortable admin grids, the QA profile form, plus 10-row directories.
9 pagesFrames + widgets
Iframes, multi-frame framesets, SVG, Shadow DOM, calendars, drag-drop, dialogs, hover/right-click menus, file upload + download.
14 pagesConcept references
Cookbooks you'll keep open while writing tests - assertions, test modifiers + hooks, data-driven + POM, JavaScript notes (14 sections), and the framework build-out.
5 referencesEnd-to-end projects
Full-flow apps for writing complete suites - TTACart (e-commerce), TTAStays (hotel booking), TTA AI Chat. All with rich data-test hooks.
Course curriculum
The structured 90-day learning path that complements the hands-on practice pages below.
Course
Playwright JavaScript Course — 90 Day Journey
The full 8-module curriculum covering Playwright fundamentals, advanced locators, network interception, the test runner, page-object models, CI/CD, and debugging.
8 modules
90 days
Curriculum
Learning path
Open course
Selectors & Locators
The original two — login UI and a 10-row employee directory.
Ready
Multiple Element Filter Login
Practise allInnerTexts(), locator.all(), footer link extraction, and filter({ hasText }) on a realistic login UI.
Login form
Footer links
Filter locator
Selectors
Open page
Ready
Web Table Employee Directory
Practise XPath sibling selectors, CSS :has(), checkbox selection, and extracting row data from a realistic employee table.
Web table
XPath siblings
CSS :has()
Tables
Open page
Tables & Forms
Five practice pages — every page has visible locator markers and a collapsible Playwright solution.
Ready
QA Profile Form
Text inputs, radios, dropdown, date, checkboxes, tabs, upload and download — every standard input type in one page.
Inputs
Tabs
Files
Forms
Open page
Ready
Companies Table
A minimal three-column table — Company / Contact / Country — with row-level data-testids for clean locator practice.
3 cols
6 rows
Static
Tables
Open page
Ready
Tall Buildings Table
A six-column wide table for nth-child reads, multi-cell row extraction, and sibling-text queries.
6 cols
nth-child
Wide grid
Tables
Open page
Ready
Custom Dropdowns
Three custom dropdowns built without native <select>. Click-to-open, click-an-option pattern with .select-trigger markers.
.select-trigger
3 dropdowns
Helper fn
Forms
Open page
Ready
Select Box Variants
Five combobox variants — single, multi, creatable, grouped, async — using familiar tta-rs__ class names.
Combobox
Multi
Async
Forms
Open page
Ready
Sortable Admin Table
24 employees, sortable columns with aria-sort, search/role/status filters, pagination, and a bulk-select bar.
Sort
Filter
Paged · 24
Tables
Open page
Ready
Cricket Scorecard
Two-innings batting card. Pull every score with tbody td:nth-child(3), drop Extras + Total, find the highest run-getter.
Two innings
Highest score
parseInt + sort
Tables
Open page
Frame handling
An iframe form and a multi-frame frameset — practise frameLocator() and page.frames().
Ready
Frame Handling Overview
An iframe hosting a vehicle registration form for frameLocator(...), plus a link to the multi-frame frameset.
iframe
frameLocator
Form fill
Frames
Open page
Ready
Multi-frame Frameset
A classic <frameset> with three named frames (main, side, footer) for counting and iteration.
frameset
page.frames
Iteration
Frames
Open page
Ready
Nested iframes
Three iframes nested three levels deep — #pact1 > #pact2 > #pact3. Practise chained frameLocator() with inputs at every depth.
3 levels
Chained
#inp_val · #jex · #glaf
Frames
Open page
Ready
Courses Frameset
Classic 8-frame nested <frameset> with names main, navbar, content, bot + 4 voids. Read frame[name='main'] h2, count via page.locator('//frame').all(), and click navbar links retargeting name='content'.
8 frames
Nested frameset
target=content
Frames
Open page
Widgets
Inline SVG, web components with shadow roots, and a MakeMyTrip-style date range picker — three new locator-practice surfaces.
Ready
SVG locators
A shape gallery, an interactive bar chart, and a star rating control. Practise SVG selectors, getByRole with accessible names, and data-testid on SVG nodes.
SVG
Bar chart
Stars
Widgets
Open page
Ready
Shadow DOM
Three custom elements (tta-input-card, tta-counter, tta-nested) with open shadow roots. Modern Playwright pierces shadow boundaries automatically.
Web components
Auto-pierce
Nested shadow
Widgets
Open page
Ready
Calendar / date picker
A two-month range picker in the spirit of MakeMyTrip / SpiceJet. Each day is a role="button" with aria-label and data-date="YYYY-MM-DD".
Range
2 months
Depart → Return
Widgets
Open page
Ready
Drag & drop Kanban
4-column board with 8 draggable cards. HTML5-native DnD so locator.dragTo() works, plus a manual mouse-event recipe for stubborn libraries.
Drag & drop
dragTo()
mouse.move
Widgets
Open page
Ready
Toasts & notifications
Trigger toasts in 4 flavours with configurable duration. Practise toBeVisible({ timeout }) and asserting they're gone.
Auto-dismiss
Stack 3
aria-live
Widgets
Open page
Ready
Native dialogs
Browser alert / confirm / prompt plus a custom modal that stacks. Practise page.on('dialog', ...).
alert
confirm · prompt
Stacked modal
Widgets
Open page
Ready
Hover menus
Travel-style nav. Hover Add-ons to reveal Taxi/Hotel/Insurance/Meal/Wifi/Activities. Practise locator.hover() + nested hover.
2-level hover
test-id-Taxi
No click open
Widgets
Open page
Ready
Right-click menu
Right-click target spawns ul.context-menu-list. Read items via allInnerTexts(), click any item by text. Practise click({ button: 'right' }).
context-menu-one
6 items
Disabled state
Widgets
Open page
Ready
Keyboard navigation
Sign-up form driven entirely by page.keyboard. Practise pressSequentially, Tab order, Space to toggle, Enter to submit.
Tab order
pressSequentially
Focus trace
Widgets
Open page
Network
Mock APIs from your tests with page.route(). Stub success, force errors, slow things down, modify payloads.
Ready
Network interception
A small product catalog backed by /api/products. The endpoint doesn't exist — install page.route() mocks to drive the UI.
page.route
fulfill / abort
waitForResponse
Network
Open page
More widgets
Two pages that filled the old "Coming next" slot — now real, runnable, with hidden Playwright solutions.
Ready
Windows & Tabs
Anchor target=_blank · window.open() · spawn 3 tabs · noopener variant. Practise context.waitForEvent('page') + Promise.all.
page event
3 tabs
noopener
Widgets
Open page
Ready
Upload & Download
Single + multi-file inputs · drop-zone with hidden input · blob downloads + static link. Practise setInputFiles and waitForEvent('download').
setInputFiles
drop zone
download.saveAs
Widgets
Open page
End-to-end projects
Full-flow apps you can write a complete test suite against - register, login, checkout, payment, confirmation.
Ready
TTACart end-to-end e-commerce demo
Full TTACart-style flow: login (6 special test users) → product list with sort → product detail → cart → 2-step checkout → order complete. Every interactive element has data-test, id and accessible name for Playwright. Special users trigger quirks (locked-out error, problem-user image swap, performance_glitch_user 4s delay, etc.).
7 pages
6 test users
data-test locators
Project
Open TTACart
Ready
TTAStays end-to-end hotel booking demo
Full booking flow: search by destination + dates → filter/sort 10 stays → hotel detail with 3 room types → register / login → guest details → dummy card payment → confirmation with TTA-XXXXXX reference. 200+ data-test hooks for Playwright.
9 pages
10 hotels
Payment step
Project
Open TTAStays
Ready
TTA Bank - full banking flow
The Testing Academy Bank: register → sign in → ₹50,000 balance on the dashboard → send money to 5 beneficiaries via a confirm dialog → receive money → dummy QR pay with mark-as-paid → expense tracker + filterable ledger. Locator triplets (data-testid, data-id, roles) on every control. Demo login: [email protected] / Test@1234.
7 pages
Native dialog
Balance math
Project
Open TTA Bank
Ready
Flaky-UI Dojo
A page that fights back: skeleton loaders with random latency, a spinner that lies, elements that detach and re-attach mid-render, debounced search, an optimistic toggle that rolls back, and a late-enabled submit. Beat it with web-first assertions and expect().toPass(), never waitForTimeout.
5 traps
Stable mode
Race conditions
Hard Mode
Enter the dojo
Ready
Network Mocking Playground
An order feed driven entirely by fetch, with visible loading, empty, error, and offline states plus a live request log. Practice page.route(): fulfill fake data, force 500s and timeouts, drop the connection, and assert every failure state.
Real endpoints
Request log
Error states
Hard Mode
Open the playground
Ready
Shadow DOM Maze
Four levels of web components: an open shadow root, nested shadow-in-shadow with slots, a closed root you cannot pierce (and what to do instead), and the boss level, an iframe living inside a shadow root. Playwright pierces open shadow DOM natively; learn exactly where that stops.
4 levels
Custom elements
Closed root
Hard Mode
Enter the maze
Ready
Upload / Download Center
Drag-drop zone, multi-file input with size and type validation, a hidden-input picker for filechooser practice, then generated downloads with timestamped filenames whose contents you must open and assert. setInputFiles to download-event handling, end to end.
Drag & drop
Validation
Dynamic names
Hard Mode
Open the center
Ready
Auth Gauntlet
Login with an on-screen OTP step, a session that visibly expires after 60 seconds, remember-me that skips the OTP, and an approval popup via window.open + postMessage. Drills storageState reuse, clock control, popup handling, and re-auth recovery.
OTP step
Session expiry
Popup login
Hard Mode
Run the gauntlet
Ready
Virtualized List
10,000 rows claimed, ~15 in the DOM: a windowed employee list plus an infinite-scroll feed with a hard end state. Learn why getByText times out off-screen, why count() lies, and how to jump, scroll, and toPass() your way to any row.
10k rows
Windowing
Infinite scroll
Hard Mode
Open the list
Ready
Date & Time Traps
A custom calendar with disabled weekends and past dates (ISO data-date hooks), a check-in/check-out range with computed nights, a meeting scheduler whose "tomorrow" breaks at midnight, and one instant rendered in three timezones. Built for page.clock.
Disabled dates
Midnight trap
3 timezones
Hard Mode
Open the traps
Ready
Canvas Chart
Eight bars, zero DOM nodes per bar. Click bars by coordinate math, assert the hover tooltip, use the accessible data-table twin as the oracle, and run toHaveScreenshot() against a deterministic baseline, then randomize and watch the diff fail for the right reason.
Coordinate clicks
Data twin
Visual regression
Hard Mode
Open the chart
Ready
TTA Chat AI sandbox
ChatGPT-style chat UI calling an LLM via a Cloudflare Pages Function proxy (/api/chat). Students drive it with Playwright: type a prompt, click data-test="send-button", wait for data-test="message-assistant". Supports BYO API key via the settings drawer.
Chat UI
CF Function
BYO key
Project
Open TTA Chat
Ready
TTACart + AI - interactive 5-demo sandbox
V2 of TTACart with the AI layer live in the browser. Five clickable demos calling the /api/chat proxy: failure RCA, self-healing locator, prompt-to-spec, smart test data, PR reviewer bot. Sticky control bar with model dropdown (8 options), temperature slider, 50k token budget chip + BYO-key drawer.
5 AI demos
8 models
BYO key
Project
Open TTACart + AI
Concepts
Reference pages with code patterns you'll lift into your own framework.
Ready
Test modifiers · hooks · data
Cookbook covering test.skip / slow / fixme, test.step, hooks, describe.serial, data from JSON · CSV · Faker, plus a reusable UtilElementLocator helper.
9 sections
Faker
UtilElementLocator.ts
Concepts
Open page
Ready
JavaScript notes for SDETs
14-section reference covering V8 engine, scoping, operators, control flow, loops, objects/JSON, functions, arrow / IIFE / callbacks, plus 140+ assignment prompts. Hand-drawn diagrams for the tricky bits.
14 topics
SVG sketches
140+ Qs
Concepts
Open page
Ready
Data-driven testing + POM
11 patterns: Faker single / util / loop / domains, inline array, JSON, CSV, XLSX, hooks, POM + DDT, and 5 page-object classes wired through UtilElementLocator. Sample register.csv / register.json downloads + client-side XLSX generator.
Faker
CSV / JSON / XLSX
POM classes
Concepts
Open page
Ready
Advance Playwright framework - build it folder by folder
Step-by-step walkthrough of the TTA Advance Playwright Framework - TypeScript, Page Object Model, custom fixtures, JSON/CSV test data, environment-aware config, a custom HTML reporter, Dockerfile, and a sharded 4-way GitHub Actions workflow with merge-reports. Every snippet copy-pasteable and targets TTA practice pages.
Folder-by-folder
POM + Modules
CI sharding
Concepts
Open page
Ready
Framework + AI (V2) - the AI extension
V2 of the framework tutorial. Adds an 11th box for the AI layer, five deep cards (one per AI feature) with per-feature mermaid diagrams, a multi-model adapter for 7 providers (DeepSeek default + Anthropic / OpenAI / Gemini / Mistral / Ollama / LM Studio) and a privacy + cost guards section. Pairs with the live demo at /playwright/ttacart-ai/.
11 boxes
5 features
7 providers
Concepts
Open page
Ready
Memory management for JavaScript
Stack versus heap, what the garbage collector can and cannot free, the four classic leak sources, Map versus WeakMap, and where a Playwright suite actually leaks. Every claim executed in Node before publishing.
8 sections
3 diagrams
Leak hunting
Concepts
Open page
Ready
Regex 101 for Playwright testers
The complete regular-expressions tutorial: character classes, quantifiers, anchors, flags, groups, lookarounds, every String method that takes a regex, and every place Playwright accepts one (getByText, toHaveURL, filter, route, --grep). Ends with 10 drills and a cheat sheet.
14 sections
10 drills
Playwright surfaces
Concepts
Open page
Local review paths: /playwright/index.html, /playwright/multiple_element_filter.html, /playwright/webtable.html, /playwright/tables/*.html, /playwright/frames/*.html, /playwright/widgets/*.html, /playwright/network/*.html.
Nothing in this batch is committed or deployed until you ask for the upload.