Build CRUD, GraphQL, assertion, collection, and failure-mode tests around the canonical base.
https://app.uassert.com/api/users
Choose a realistic workflow, inspect its selectors, and turn interactions into repeatable automated tests. No setup or account required.
0 of 52 sections explored
Start with any practice section below.Practice validation, OTP, uploads, dates, and reliable form state.
Open a tool without leaving your current workflow.
Practice track
Assert native constraints, submission feedback, and a known success path.
[data-testid="login-form"][data-testid="login-email"][data-testid="login-password"][data-testid="login-submit"][data-testid="login-result"]Test single-character focus movement, keyboard correction, paste, and completion state.
[data-testid="otp-section"][data-testid="otp-inputs"][data-testid="otp-1"][data-testid="otp-2"][data-testid="otp-3"][data-testid="otp-4"][data-testid="otp-5"][data-testid="otp-6"][data-testid="otp-status"][data-testid="otp-verify"][data-testid="otp-clear"]Enter verification code:
Enter 6-digit code
Observe formatting and card-brand feedback without losing the entered digits.
[data-testid="credit-card-section"][data-testid="cc-number"][data-testid="card-type"][data-testid="cc-expiry"][data-testid="cc-cvc"][data-testid="cc-name"]Compare a formatted phone field with an international country-code control.
[data-testid="phone-section"][data-testid="phone-country"][data-testid="phone-number"]Practice track
Practice an ARIA combobox with filtering, arrow-key navigation, and selection.
[data-testid="autocomplete-section"][data-testid="autocomplete-input"][data-testid="autocomplete-dropdown"][data-testid="autocomplete-selected"]Selected: None
Add, de-duplicate, and remove tokenized values through keyboard or pointer input.
[data-testid="tags-section"][data-testid="tags-container"][data-testid="tag-input"][data-testid="add-tag-btn"][data-testid="suggest-selenium"][data-testid="suggest-cypress"][data-testid="suggest-playwright"]Assert valid, invalid, empty, required, and character-count states.
[data-testid="text-validation-section"][data-testid="val-fullname"][data-testid="val-fullname-msg"][data-testid="val-email"][data-testid="val-email-msg"][data-testid="val-bio"][data-testid="val-bio-count"][data-testid="val-url"]0/200
Verify strength criteria, visibility state, and confirmation matching.
[data-testid="password-strength-section"][data-testid="pwd-str-input"][data-testid="pwd-str-toggle"][data-testid="pwd-str-bars"][data-testid="pwd-str-label"][data-testid="pwd-str-confirm"][data-testid="pwd-match-msg"]Enter a password
Practice track
Cover multi-choice, single-choice, checked counts, and label activation.
[data-testid="checks-radios-section"][data-testid="checkbox-group"][data-testid="chk-html"][data-testid="chk-js"][data-testid="chk-python"][data-testid="chk-java"][data-testid="chk-qa"][data-testid="chk-devops"][data-testid="chk-selected-count"][data-testid="radio-group"][data-testid="radio-junior"][data-testid="radio-mid"][data-testid="radio-senior"][data-testid="radio-lead"]Select Skills (checkboxes)
Selected: 0
Experience Level (radio)
Exercise single-select, multi-select, defaults, and high-priority values.
[data-testid="dropdowns-section"][data-testid="select-country"][data-testid="select-languages"][data-testid="select-priority"]Assert boolean preferences and changing numeric range outputs.
[data-testid="toggles-sliders-section"][data-testid="toggle-notifications"][data-testid="toggle-darkmode"][data-testid="toggle-autosave"][data-testid="slider-volume"][data-testid="slider-brightness"][data-testid="slider-price"]Receive email alerts
Switch UI theme
Save drafts automatically
Practice track
Use date, time, month, week, and color controls rendered by the browser.
[data-testid="pickers-section"][data-testid="picker-date"][data-testid="picker-time"][data-testid="picker-datetime"][data-testid="picker-month"][data-testid="picker-week"][data-testid="picker-color"][data-testid="color-hex-label"]Test stepper controls, min/max boundaries, decimals, and keyboard entry.
[data-testid="number-inputs-section"][data-testid="num-quantity"][data-testid="num-price"][data-testid="num-age"][data-testid="input-disabled"][data-testid="input-readonly"]Cover browse, drag-and-drop, type and size rejection, and file removal.
[data-testid="file-upload-section"][data-testid="file-drop"][data-testid="file-input"][data-testid="file-browse"][data-testid="file-list"]Drag & drop files here or
JPG, PNG, PDF, DOC — max 10MB
No files selected
| ID | Name | Role | Actions |
|---|
Click a task name to edit it in place (Enter saves, Esc cancels). Edits: 0
| ID | Task | Owner | Status | Progress |
|---|
Click the chevron to expand an order and reveal its line-item detail. Expanded: 0
| Order | Customer | Date | Total | Status |
|---|
Filter by status tabs, spot the priority chips and progress bars.
| Invoice | Product | Qty × Price | Status | Priority | Fulfilment |
|---|
Expand folders to reveal nested files — practice depth-aware selectors.
| Name | Type | Size |
|---|
Ticks: 0 · Paused
| Symbol | Price | Change | Last update |
|---|
Switch the table between its loading skeleton, empty state, and populated state — classic state-assertion practice.
Click to rate
Last event:
—
Click count: 0
Key
—
Code
—
Modifiers
—
Events fired: 0
Drag items to reorder:
Current order: 1,2,3,4,5
Hover over the boxes:
Focus / blur (tab through):
Last: —
Drag items from left to the drop zone:
Drop items here
Dropped: 0 items
Scrollable container:
Scroll item 1
Scroll item 2
Scroll item 3
Scroll item 4
Scroll item 5
Scroll item 6
Scroll item 7
Scroll item 8
Scroll item 9
Scroll item 10
Scroll position: 0px
Resizable element (drag corner):
Window size:
Hover for tooltips:
Click for popover:
This is popover body content that appears on click.
Loaded User
user@test.com
Standard
Thin
Quarter
Icon
Success!
Your changes have been saved.
Info
New features available.
Warning
Please review before continuing.
Error
Something went wrong.
seconds remaining
Scroll down to load more items...
Items loaded: 0
Click "Add Element" to create dynamic elements
Element count: 0
No active polling job
Attempts: 0
Buttons switch between idle, loading, success, and error states.
No live events yet
Scheduled Maintenance
System update planned for tonight at 11:00 PM UTC.
New Release Available
Version 2.1 introduces enhanced recorder support and improved selectors.
Lazy-loaded images with descriptive alt text — assert on alt, naturalWidth and lazy-load behavior.
Use picture/srcset to serve art-directed images per breakpoint.
Test play/pause, currentTime, buffering and the ended event.
Test playback, seeking and volume controls.
Compose mock requests, validate contracts, generate automation, and run repeatable API collections without leaving the browser.
Deterministic REST and GraphQL simulations using the app.uassert.com API base URL.
The enabled parameter is merged into the endpoint without mutating the saved request.
Valid JSON is added to generated automation and the simulated request.
Credentials remain local to this browser simulation and are never sent to a server.
Body is included for POST, PUT, and PATCH requests.
// Ready. Send a request or run the collection.
Response headers will appear after a request.
sessionStorage vs localStorage · TTL expiry · cross-tab sync (open a second tab!).
sessionStorage (per-tab)
0
Survives reload, dies with the tab.
localStorage (persistent)
0
Persists across tabs & sessions.
TTL expiry (20s)
(none)
Cross-tab sync (BroadcastChannel)
Account ****4521
Account ****7892 · 4.5% APY
Card ****3345 · Limit $10,000
Amazon Purchase
Dec 15 · Checking
Salary Deposit
Dec 14 · Checking
Restaurant
Dec 13 · Credit Card
Gas Station
Dec 12 · Credit Card
Freelance Payment
Dec 11 · Checking
Rent Payment
Dec 1 · Checking
Monthly Payment
$489
Total Interest
$4,358
Total Repayment
$29,358
| Period | Account | Opening | Closing | Status | |
|---|---|---|---|---|---|
| Dec 2024 | Checking | $8,200.00 | $12,450.00 | Ready | |
| Nov 2024 | Checking | $6,850.00 | $8,200.00 | Ready | |
| Dec 2024 | Credit Card | -$1,420.00 | -$2,150.00 | Pending | — |
Cart is empty
Order History
No orders yet
Shipping
Payment
Review
Done
First name is required
Last name is required
Valid email is required
Address is required
Required
Required
5-digit ZIP
Valid 16-digit card number required
Invalid
Required
Required
Thank you for your purchase.
Order #ORD-000000
Confirmation email sent to
Selected: None
Characters: 0
reCAPTCHA
Solve:
Select all squares with
Practice writing resilient selectors and waits. These elements randomly appear, disappear, move, or go stale — exactly like flaky elements in real apps.
These buttons randomly hide for 1-3 seconds then reappear.
This button randomly changes its position.
This element gets re-rendered on each click (new DOM node, same testid). Tests must re-query.
Element v1
dom-id: 1
Trigger elements that appear after random delays (1-5s). Practice wait strategies.
No delayed elements yet
Estimated Monthly Premium
$0
CLM-2024-001
Auto - Fender bender
CLM-2024-002
Home - Water damage
CLM-2024-003
Auto - Windshield
Monthly Payment
$0
No items
Change: $0.00
A simulated WebSocket: connect, watch a stock ticker and a chat feed stream in, then enable flaky mode to see random drops and auto-reconnects — just like a flaky real-time backend. Practice connection-state assertions and polling waits.
Connection log — press Connect to begin.
Ticks: 0
Connect to start receiving messages.
The most-tested flow in real apps, simulated client-side: an OAuth2/SSO dance, a rotating TOTP code, token expiry → 401 → refresh, and remember-me storage.
Idle — not authenticated
Protected resource: 200 OK — account summary loads.
This authenticator code rotates every 30 seconds — typing takes time, so test the race.
Not started — sign in first
After expiry the protected resource returns 401 until you refresh.
Uncheck to use in-memory (sessionStorage-like) storage — reload wipes it. Watch the Storage line in the SSO card.
Demo token saved under ts_auth_demo. Reset All Data clears it.
Practice the two awkward test areas: setInputFiles with size/type validation and progress, and download assertions (filename + content). Everything is simulated in-browser.
Drag & drop files here or
JPG, PNG, PDF, DOC, TXT, CSV — max 10MB
Upload history
No uploads yet
Suggested filename: invoice-sample.pdf
Capture a baseline, switch between 3 mutations (shifted element, changed color, removed text), and run a pixel diff that highlights changed regions — the same idea as Percy / Applitools / toHaveScreenshot, running entirely in your browser.
Baseline
No baseline yet
Baseline (captured)
Capture a baseline to start diffing.
—
Raise the tolerance and watch a real diff failure become a pass — exactly how flaky screenshot tests get muted.
Practice asserting on CSS animations (play-state, duration, animationend) and the accessibility rule: honor prefers-reduced-motion. Toggle the simulation and watch animations disable — exactly what tests should verify.
Slide-in card (2s, 1 iteration)
Ready — press Play.
Spinner
Pulse dot
Real apps ship @media (prefers-reduced-motion: reduce) rules. This section simulates that preference — tests should assert animations actually stop.
prefers-reduced-motion: no-preference — animations run normally.
What to assert
reduce: computed animation-name = none (or duration 0s).animationend should NOT fire under reduced motion.running / paused via animation-play-state..am-slide { animation: slide 2s ease; }
.am-slide.am-paused { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
.am-slide, .am-spinner, .am-pulse { animation: none !important; }
}
The am-reduced class on the section simulates the media query for this lab.
Now playing: —
—
Tracks use small embedded WAV clips so playback works offline. Test play/pause, seek, volume, shuffle order and repeat — click a playlist row to switch tracks.
Screen readers announce changes to aria-live regions automatically. Assert on the region text, not the visual toast.
polite (role="status") - non-urgent
assertive (role="alert") - urgent
Toasts mount in #toastContainer (top-right, role="status"). Practice stacking, auto-dismiss timing, and manual close.
What to assert
Real-world pattern: assert on the live region (what a screen reader hears) rather than toast CSS. Toasts animate out - poll until gone.
Turn Inspect mode ON, then click any element in the app (e.g. a button, input, link) to see exactly what a screen reader announces: its role, accessible name, state, and keyboard position.
Turn on Inspect mode and click any element — or press "Try a demo element".
Cheat sheet
Practice: find an element with no accessible name, or a div that should be a button. That's what automated a11y audits flag.
Simulated security scenarios: CORS read failures, cookie flags (HttpOnly / SameSite), CSP violations, and token-storage best practices. Learn what each control blocks — and how to assert it in a test.
—
—
—
—
Practice the permission prompt: grant or deny, then read a position or watch it move.
No permission asked yet.
—
A blob-based worker counts in the background and posts messages — the page never blocks. Try Stop to terminate it.
Worker not started.
—
IntersectionObserver
—
ResizeObserver
—
MutationObserver
—
Request fullscreen on the box below. Note: sandboxed previews may block it — a graceful fallback message teaches why user-gesture rules exist.
Fullscreen target
Not in fullscreen.
Simulate the three Core Web Vitals and practice budget assertions (LCP < 2.5s, CLS < 0.1, INP < 200ms). Learn what degrades each metric — the gap between "it works" and "it’s good enough".
A hero image that loads after a delay.
LCP: —
—
A banner appears above content, pushing it down — layout shift you can measure.
CLS: 0.000
—
A button whose handler blocks the main thread.
INP: — budget 200ms
—
Run measurements to build the report
Switch languages (EN / DE / AR) and watch the layout flip to RTL for Arabic. Notice the deliberately broken translation (a missing key renders as [missing:…]) and the over-truncated long string. Lesson: assert on translation keys, not literal text.
Welcome
Hello, world!
Items in cart
Total
Date
Long string (over-truncates in RTL):
Formatted with Intl for the current locale — tests that hard-code "1,234,567.89" will break in DE/AR.
Number: 1,234,567.89
Date: —
Switch to DE → "1.234.567,89" and a German date. Switch to AR → Eastern Arabic numerals.
The flakiest class of real bugs — timing. Each widget shows the wrong behavior and gives you the right way to test it: fast clicks, out-of-order async writes, debounced search, and click-before-hydration.
Rapid double-clicks: 0 duplicate submissions
The button disables during the 900ms request — click it twice fast to see the guard fail if you bypass it.
No saves yet
Save fast (150ms) then slow (900ms): the slow one resolves after and overwrites — "submit A then B, B wins".
Only the final keystroke fires after a 500ms debounce — assert the last query, not each keystroke.
Clicks before hydration are silently dropped — the classic "works locally, breaks in CI" bug.
Negative testing: crash components on purpose, watch error fallbacks, and practice page.on('pageerror') / page.on('console') patterns. Everything here is safe — it only affects this section.
Crashes: 0
Each throw fires a pageerror — catch it with page.on('pageerror').
Listen with page.on('console') and assert the message.
The onerror fallback swaps in a placeholder — assert the fallback, not the failure.
Restores crash counter, image, and console status — the "recover from chaos" pattern.
Beyond the basics: closed shadow roots, nested shadow hosts, a cross-origin iframe simulation, and dynamically injected styles — the DOM patterns that break naive selectors.
shadowRoot is null — only piercing automation can reach inside.
An open shadow host containing another shadow host. The button inside is reachable via piercing selectors only.
A srcdoc frame simulates the cross-origin lesson — in a real cross-origin iframe, contentDocument access throws.
Watch me get highlighted by injected CSS.
Practice mutation handling: the injected <style> and class appear after click.
A printable invoice with print-specific styling, plus a deliberately broken screen-only element that should NOT appear in print. Open the print preview (or print to PDF) and assert on what’s visible.
Invoice
INV-2024-0042
Acme Corp
123 Test St
| Item | Qty | Price |
|---|---|---|
| Test Automation Suite | 2 | $99.99 |
| Runner License | 1 | $199.00 |
Screen-only note — hidden in print.
BROKEN: this screen-only element forgot its print:hidden — it will print.
Drag & resize practice: a sortable list (mouse drag), a resizable box (drag corner and arrow keys), and a compound slider (two inputs sum live).
Order: alpha,bravo,charlie,delta
Size: 320 × 120
Sum: 80
| ID | Name | Age | Dept | Status | BP | Room |
|---|
Upcoming
No appointments
No bookings yet — book a hotel.
Order is empty
What does data-testid help you do?
| Asset | Price | 24h | Cap | Vol |
|---|
| ID | Route | Status | Progress | ETA |
|---|
Click Track on any shipment to see its timeline.
Select a shipment to track.
No test cases match. Create one with "New Case".
Each step runs against the real app via the Test Runner interpreter — click Run and it navigates to the section and executes live. Cases persist in your browser.
A mock GitHub Actions / GitLab pipeline that runs your last real test run (from the Test Runner) through install → lint → unit → e2e → report, then gates the deploy on the flake rate — exactly where E2E sits and why flaky suites block shipping.
E2E runs the real Test Runner suite. If any test failed in your last run, the pipeline stops at E2E — just like CI.
Flake rate = tests that both passed and failed across your run history. Over 20% blocks the deploy.
Click to list
Click a button
Clear every registered Studio preference, progress record, session value, offline database, and cache. You will review the complete list before anything is removed, and Studio verifies the reset after reload.
Export all your progress (goals, runner history, challenges, bug hunt, test cases, recorded steps, theme) as a JSON file — and import it back here or on another device. Download a CSV progress report for instructors or CI.
Earn XP by exploring sections, completing goals, solving challenges, finding bugs, running test cases and suites. Complete 15 achievements to collect every badge — and keep your daily streak alive!
This section contains deliberate accessibility bugs. Your job: find all 6 challenges using a screen reader, an automated checker (axe / Wave), or keyboard alone. Each card violates WCAG in a specific way — nothing here is labeled "bug".
Good practice: run your favorite a11y scanner against #section-a11y and see what it catches.
What does this button do? A screen-reader user won't know.
This image has no alt text — what would a screen reader announce?
A placeholder is not a label.
Can you read this? Check the ratio.
This text is hard to read.
Clickable with a mouse — is it keyboard accessible?
What does this checkbox control?
Pick a target element, pick an assertion, hit Evaluate — the exact same interpreter the Test Runner uses checks it against the live DOM. Change the element's state with the buttons and watch the same assertion flip from PASS to FAIL. The curated examples below include deliberate failures — that's the point. Learn the difference between exist and visible, why contain ≠ have.text, why a placeholder is not a value, and how negations (not.*) work.
Toggle ON to seed 12 real bugs across the industry & practice sections — then navigate, spot the bug, and click the buggy element to report it. Track found/total and reset anytime.
Each challenge seeds a bug. Open the section, write an assertion that detects it (it should FAIL while the bug is live), then press Fix the bug and watch your assertion PASS. Solved challenges earn a badge.
Rules of thumb for writing tests that survive refactors, run fast, and never flake. Click a category to browse, or type to search (also reachable via Ctrl+K → "Best Practices").
No practices match your search.
Describe a workflow, component, error, or paste a data-testid. Get a live example and framework-ready code without leaving Studio.
Choose the closest task. You can switch domains or frameworks at any time.
These focused guides open the live feature, list stable selectors, and include production-shaped examples.
Build CRUD, GraphQL, assertion, collection, and failure-mode tests around the canonical base.
https://app.uassert.com/api/users
Open Help from a header or card and keep the exact domain and selector contract in view.
data-testid="header-help-docs"
Starter cases load quietly; title and step validation runs only after an explicit save.
tc-new → tc-save
Pick what failed. The runbook keeps the fix observable, reproducible, and tied to a real Studio contract.
Guidance is generated from the controls that exist now—not from a screenshot that can drift out of date.
Choose a framework once. Domain examples and all 107 reference guides update with it.
Each path opens live labs and keeps a browser-local checklist. Resume whenever you return.
Groups are collapsed by default to reduce noise. Every guide includes exact selectors, practical advice, and copyable code.
Start with self-service guidance, then take a concise environment and reproduction summary to the community or uAssert team.
Copy version, route, selected domain, browser capabilities, viewport, theme, and saved-run counts.
data-testidRemove credentials and private fixture data before sharing.
Built for QA engineers, SDETs, and RPA Developers — a complete ecosystem for learning and practicing test automation.
Looking to learn Test Automation or Robotic Process Automation (RPA)? Dive into high-quality video tutorials, quizzes, and automation tool courses (like TagUI and Taskt).
Already know the basics and want to practice? Our multi-domain testing playground offers 100+ complex web elements designed to hone your scripts without bot blockers.
Foundation — 18 core sections
Forms, tables, interactions, banking, e-commerce, checkout and the power tools.
Hardening — accessibility & quality
0 contrast failures, labeled inputs, focus traps, mobile-clean, the Accessibility training section.
The loop — runner, report, playground
In-browser test runner, CI-style report with flake detection, assertion playground, help hub.
Real-world & breadth
WebSocket, auth/sessions, uploads, visual regression, Web-Vitals, i18n/RTL, race lab, chaos, deeper DOM, print, sortable/resizable — 41 sections.
What’s next?
Guided challenges, bug-hunt mode, a CI pipeline visualizer, shareable test links and more.
Jump into the sandbox and write your first suite in under a minute — no setup, no sign-up.
Browser-local · All data stays in your browser.