Examples catalog

Examples

Browse UI and automation examples organized by topics: forms, tables, locators, dynamics and more.

Simple Login Form

Practice simple login form UI.

Beginner
Forms & Validation

Login With Show/Hide Password

Practice login with show/hide password UI.

Intermediate
Forms & Validation

Login With Remember Me

Practice login with remember me UI.

Intermediate
Forms & Validation

Register Form (Basic)

Practice register form (basic) UI.

Intermediate
Forms & Validation

Forgot Password Form

Practice forgot password form UI.

Intermediate
Forms & Validation

Reset Password Form

Practice reset password form UI.

Intermediate
Forms & Validation

Contact Form

Practice contact form UI.

Intermediate
Forms & Validation

Newsletter Subscribe Form

Practice newsletter subscribe form UI.

Intermediate
Forms & Validation

Required Fields Validation

Practice required fields validation UI.

Intermediate
Forms & Validation

Email Format Validation

Practice email format validation UI.

Intermediate
Forms & Validation

Password Strength Meter

Practice password strength meter UI.

Intermediate
Forms & Validation

Real-time Inline Validation

Practice real-time inline validation UI.

Intermediate
Forms & Validation

Server-side Validation Simulation

Practice server-side validation simulation UI.

Intermediate
Forms & Validation

Form Error Summary

Practice form error summary UI.

Intermediate
Forms & Validation

Dependent Fields (country city)

Practice dependent fields (country city) UI.

Intermediate
Forms & Validation

Conditional Fields

Practice conditional fields UI.

Intermediate
Forms & Validation

Multi-step Form (3 steps)

Practice multi-step form (3 steps) UI.

Intermediate
Forms & Validation

Multi-step Form With Validation

Practice multi-step form with validation UI.

Intermediate
Forms & Validation

Form Autosave Draft

Practice form autosave draft UI.

Intermediate
Forms & Validation

Billing/Shipping Duplicate Form

Practice billing/shipping duplicate form UI.

Intermediate
Forms & Validation

Invoice Line Items

Practice invoice line items UI.

Intermediate
Forms & Validation

Multi-column Form Layout

Practice multi-column form layout UI.

Intermediate
Forms & Validation

Text / Email / Password Inputs

Practice text / email / password inputs UI.

Intermediate
Inputs & Widgets

Checkbox Group

Practice checkbox group UI.

Intermediate
Inputs & Widgets

Radio Button Group

Practice radio button group UI.

Intermediate
Inputs & Widgets

Dropdown Select Basic

Practice dropdown select basic UI.

Intermediate
Inputs & Widgets

Multi-select Dropdown

Practice multi-select dropdown UI.

Intermediate
Inputs & Widgets

Searchable Dropdown

Practice searchable dropdown UI.

Intermediate
Inputs & Widgets

Date Picker

Practice date picker UI.

Intermediate
Inputs & Widgets

Date Range Picker

Practice date range picker UI.

Intermediate
Inputs & Widgets

Time Picker

Practice time picker UI.

Intermediate
Inputs & Widgets

Range Slider (single)

Practice range slider (single) UI.

Intermediate
Inputs & Widgets

Range Slider (double)

Practice range slider (double) UI.

Intermediate
Inputs & Widgets

Autocomplete Textbox

Practice autocomplete textbox UI.

Intermediate
Inputs & Widgets

Autocomplete Async

Practice autocomplete async UI.

Intermediate
Inputs & Widgets

Input With Character Counter

Practice input with character counter UI.

Intermediate
Inputs & Widgets

Input Mask (Phone)

Practice input mask (phone) UI.

Intermediate
Inputs & Widgets

Input Mask (Credit Card)

Practice input mask (credit card) UI.

Intermediate
Inputs & Widgets

Currency Input

Practice currency input UI.

Intermediate
Inputs & Widgets

Floating Label Inputs

Practice floating label inputs UI.

Intermediate
Inputs & Widgets

Textarea Auto-grow

Practice textarea auto-grow UI.

Intermediate
Inputs & Widgets

Basic Buttons

Practice basic buttons UI.

Beginner
Buttons & Interaction

Disabled Button States

Practice disabled button states UI.

Intermediate
Buttons & Interaction

Loading Button

Practice loading button UI.

Intermediate
Buttons & Interaction

Debounced Button

Practice debounced button UI.

Intermediate
Buttons & Interaction

Toggle Active Button

Practice toggle active button UI.

Intermediate
Buttons & Interaction

Like / Favorite Toggle

Practice like / favorite toggle UI.

Intermediate
Buttons & Interaction

Split Button

Practice split button UI.

Intermediate
Buttons & Interaction

Button with Confirm Tooltip

Practice button with confirm tooltip UI.

Intermediate
Buttons & Interaction

Button Reveals Hidden Section

Practice button reveals hidden section UI.

Intermediate
Buttons & Interaction

Floating Action Button

Practice floating action button UI.

Intermediate
Buttons & Interaction

Back-to-top Button

Practice back-to-top button UI.

Intermediate
Buttons & Interaction

JS Alert

Practice js alert UI.

Intermediate
Alerts / Toasts / Modals

JS Confirm

Practice js confirm UI.

Intermediate
Alerts / Toasts / Modals

JS Prompt

Practice js prompt UI.

Intermediate
Alerts / Toasts / Modals

Inline Alerts

Practice inline alerts UI.

Intermediate
Alerts / Toasts / Modals

Toast Notification

Practice toast notification UI.

Intermediate
Alerts / Toasts / Modals

Toast With Action

Practice toast with action UI.

Intermediate
Alerts / Toasts / Modals

Toast Queue

Practice toast queue UI.

Intermediate
Alerts / Toasts / Modals

Basic Modal

Practice basic modal UI.

Beginner
Alerts / Toasts / Modals

Modal With Form

Practice modal with form UI.

Intermediate
Alerts / Toasts / Modals

Modal Focus Trap

Practice modal focus trap UI.

Intermediate
Alerts / Toasts / Modals

Nested Modal

Practice nested modal UI.

Intermediate
Alerts / Toasts / Modals

Navigation Menu

Practice navigation menu UI.

Intermediate
Navigation & Layout

Sidebar Collapsible

Practice sidebar collapsible UI.

Intermediate
Navigation & Layout

Breadcrumb Navigation

Practice breadcrumb navigation UI.

Intermediate
Navigation & Layout

Tabs Component

Practice tabs component UI.

Intermediate
Navigation & Layout

Accordion

Practice accordion UI.

Intermediate
Navigation & Layout

Stepper

Practice stepper UI.

Intermediate
Navigation & Layout

Pagination Component

Practice pagination component UI.

Intermediate
Navigation & Layout

Scrollspy Navigation

Practice scrollspy navigation UI.

Intermediate
Navigation & Layout

Sticky Header

Practice sticky header UI.

Intermediate
Navigation & Layout

Sticky Sidebar

Practice sticky sidebar UI.

Intermediate
Navigation & Layout

Static Table

Practice static table UI.

Intermediate
Tables & Data Lists

Sortable Table

Practice sortable table UI.

Intermediate
Tables & Data Lists

Searchable Table

Practice searchable table UI.

Intermediate
Tables & Data Lists

Pagination Table

Practice pagination table UI.

Intermediate
Tables & Data Lists

Table Checkbox Selection

Practice table checkbox selection UI.

Intermediate
Tables & Data Lists

Editable Table

Practice editable table UI.

Intermediate
Tables & Data Lists

Row Action Table

Practice row action table UI.

Intermediate
Tables & Data Lists

Filterable Table

Practice filterable table UI.

Intermediate
Tables & Data Lists

Expandable Row Table

Practice expandable row table UI.

Intermediate
Tables & Data Lists

MasterDetail Table

Practice masterdetail table UI.

Intermediate
Tables & Data Lists

Sticky Header Table

Practice sticky header table UI.

Intermediate
Tables & Data Lists

Sticky Column Table

Practice sticky column table UI.

Intermediate
Tables & Data Lists

Financial Table

Practice financial table UI.

Intermediate
Tables & Data Lists

Column Reordering

Practice column reordering UI.

Intermediate
Tables & Data Lists

Column Resizing

Practice column resizing UI.

Intermediate
Tables & Data Lists

Virtualized Table

Practice virtualized table UI.

Intermediate
Tables & Data Lists

Tree View Table

Practice tree view table UI.

Intermediate
Tables & Data Lists

Card List View

Practice card list view UI.

Intermediate
Tables & Data Lists

Avatar List

Practice avatar list UI.

Intermediate
Tables & Data Lists

Notification List

Practice notification list UI.

Intermediate
Tables & Data Lists

AZ Filter List

Practice az filter list UI.

Intermediate
Tables & Data Lists

Single File Upload

Practice single file upload UI.

Intermediate
Files & Media

Multiple File Upload

Practice multiple file upload UI.

Intermediate
Files & Media

Upload Validation

Practice upload validation UI.

Intermediate
Files & Media

Upload Progress Bar

Practice upload progress bar UI.

Intermediate
Files & Media

Drag & Drop Upload

Practice drag & drop upload UI.

Intermediate
Files & Media

Image Preview

Practice image preview UI.

Intermediate
Files & Media

CSV Upload & Preview

Practice csv upload & preview UI.

Intermediate
Files & Media

PDF Download

Practice pdf download UI.

Intermediate
Files & Media

Broken Image Demo

Practice broken image demo UI.

Intermediate
Files & Media

Lazy Loaded Images

Practice lazy loaded images UI.

Intermediate
Files & Media

Avatar Upload & Crop

Practice avatar upload & crop UI.

Intermediate
Files & Media

Image Comparison Slider

Practice image comparison slider UI.

Intermediate
Files & Media

Lightbox Viewer

Practice lightbox viewer UI.

Intermediate
Files & Media

Replace File

Practice replace file UI.

Intermediate
Files & Media

Dynamic Text Update

Practice dynamic text update UI.

Intermediate
Dynamic UI

Add/Remove DOM Items

Practice add/remove dom items UI.

Intermediate
Dynamic UI

Dynamic Enable/Disable Controls

Practice dynamic enable/disable controls UI.

Intermediate
Dynamic UI

Content Appears After Delay

Practice content appears after delay UI.

Intermediate
Dynamic UI

Loading Skeleton

Practice loading skeleton UI.

Intermediate
Dynamic UI

Random List Generator

Practice random list generator UI.

Intermediate
Dynamic UI

Infinite Scroll

Practice infinite scroll UI.

Intermediate
Dynamic UI

Load More Button

Practice load more button UI.

Intermediate
Dynamic UI

Polling Example

Practice polling example UI.

Intermediate
Dynamic UI

Tab Content Lazyload

Practice tab content lazyload UI.

Intermediate
Dynamic UI

Scroll-trigger Animation

Practice scroll-trigger animation UI.

Intermediate
Dynamic UI

Countdown Timer

Practice countdown timer UI.

Intermediate
Dynamic UI

Progressive Reveal

Practice progressive reveal UI.

Intermediate
Dynamic UI

Price Calculator

Practice price calculator UI.

Intermediate
Dynamic UI

Weather Widget

Practice weather widget UI.

Intermediate
Dynamic UI

Random Profile Card

Practice random profile card UI.

Intermediate
Dynamic UI

Drag-to-resize Panels

Practice drag-to-resize panels UI.

Intermediate
Dynamic UI

Draggable Cards

Practice draggable cards UI.

Intermediate
Dynamic UI

Reorderable List

Practice reorderable list UI.

Intermediate
Dynamic UI

Grid/List View Toggle

Practice grid/list view toggle UI.

Intermediate
Dynamic UI

Dashboard Widgets

Practice dashboard widgets UI.

Intermediate
Dynamic UI

Typewriter Animation

Practice typewriter animation UI.

Intermediate
Dynamic UI

Real-time Feed

Practice real-time feed UI.

Intermediate
Dynamic UI

Live Sorting

Practice live sorting UI.

Intermediate
Dynamic UI

Step Progress Indicator

Practice step progress indicator UI.

Intermediate
Dynamic UI

Hidden Element (display:none)

Practice hidden element (display:none) UI.

Intermediate
Difficult DOM

Invisible Element (opacity:0)

Practice invisible element (opacity:0) UI.

Intermediate
Difficult DOM

Off-screen Element

Practice off-screen element UI.

Intermediate
Difficult DOM

Overlay Covered Element

Practice overlay covered element UI.

Intermediate
Difficult DOM

Random IDs

Practice random ids UI.

Intermediate
Difficult DOM

Dynamic Classes

Practice dynamic classes UI.

Intermediate
Difficult DOM

Icon-only Buttons

Practice icon-only buttons UI.

Intermediate
Difficult DOM

Deeply Nested DOM

Practice deeply nested dom UI.

Intermediate
Difficult DOM

Shadow DOM

Practice shadow dom UI.

Intermediate
Difficult DOM

Shadow DOM Nested

Practice shadow dom nested UI.

Intermediate
Difficult DOM

Tooltip on Hover

Practice tooltip on hover UI.

Intermediate
Difficult DOM

Hover-only Dropdown

Practice hover-only dropdown UI.

Intermediate
Difficult DOM

Overlay on Scroll

Practice overlay on scroll UI.

Intermediate
Difficult DOM

Dynamic Class Change

Practice dynamic class change UI.

Intermediate
Difficult DOM

Pseudo-element Demo

Practice pseudo-element demo UI.

Intermediate
Difficult DOM

Canvas Click Regions

Practice canvas click regions UI.

Intermediate
Difficult DOM

Complex SVG Buttons

Practice complex svg buttons UI.

Advanced
Difficult DOM

SVG Chart Points

Practice svg chart points UI.

Intermediate
Difficult DOM

Doughnut Chart

Practice doughnut chart UI.

Intermediate
Difficult DOM

Mutation Observer Example

Practice mutation observer example UI.

Intermediate
Difficult DOM

Moving Element Animation

Practice moving element animation UI.

Intermediate
Difficult DOM

Sticky vs Absolute Positions

Practice sticky vs absolute positions UI.

Intermediate
Difficult DOM

Basic iFrame

Practice basic iframe UI.

Beginner
iFrames & Windows

iFrame With Form

Practice iframe with form UI.

Intermediate
iFrames & Windows

iFrame Navigation

Practice iframe navigation UI.

Intermediate
iFrames & Windows

iFrame Dynamic Height

Practice iframe dynamic height UI.

Intermediate
iFrames & Windows

Nested iFrames

Practice nested iframes UI.

Intermediate
iFrames & Windows

iFrame Loading Spinner

Practice iframe loading spinner UI.

Intermediate
iFrames & Windows

Popup Window

Practice popup window UI.

Intermediate
iFrames & Windows

Window Resize Listener

Practice window resize listener UI.

Intermediate
iFrames & Windows

Multi-window Workflow

Practice multi-window workflow UI.

Intermediate
iFrames & Windows

iFrame Scroll Interaction

Practice iframe scroll interaction UI.

Intermediate
iFrames & Windows

LocalStorage CRUD

Practice localstorage crud UI.

Intermediate
Storage & Preferences

SessionStorage CRUD

Practice sessionstorage crud UI.

Intermediate
Storage & Preferences

Cookie CRUD

Practice cookie crud UI.

Intermediate
Storage & Preferences

Theme Persistence

Practice theme persistence UI.

Intermediate
Storage & Preferences

Recently Viewed Items

Practice recently viewed items UI.

Intermediate
Storage & Preferences

Dismissible Banner

Practice dismissible banner UI.

Intermediate
Storage & Preferences

Autosave to LocalStorage

Practice autosave to localstorage UI.

Intermediate
Storage & Preferences

Restore Page State

Practice restore page state UI.

Intermediate
Storage & Preferences

Shopping Cart LocalStorage

Practice shopping cart localstorage UI.

Intermediate
Storage & Preferences

Checklist Persistence

Practice checklist persistence UI.

Intermediate
Storage & Preferences

Fake Login API

Practice fake login api UI.

Intermediate
Network & API

Fake List API

Practice fake list api UI.

Intermediate
Network & API

Slow API Response

Practice slow api response UI.

Intermediate
Network & API

API Error Handling

Practice api error handling UI.

Intermediate
Network & API

Retry API Request

Practice retry api request UI.

Intermediate
Network & API

API Pagination

Practice api pagination UI.

Intermediate
Network & API

API Search

Practice api search UI.

Intermediate
Network & API

Offline Mode Simulation

Practice offline mode simulation UI.

Intermediate
Network & API

API Timeout

Practice api timeout UI.

Intermediate
Network & API

API Cancellation

Practice api cancellation UI.

Intermediate
Network & API

Optimistic UI Update

Practice optimistic ui update UI.

Intermediate
Network & API

Rate Limit Simulation

Practice rate limit simulation UI.

Intermediate
Network & API

Parallel API Requests

Practice parallel api requests UI.

Intermediate
Network & API

Chained API Requests

Practice chained api requests UI.

Intermediate
Network & API

Approval Workflow Mock

Practice approval workflow mock UI.

Intermediate
Network & API

Skip to Content

Practice skip to content UI.

Intermediate
Accessibility

Keyboard-only Navigation

Practice keyboard-only navigation UI.

Intermediate
Accessibility

Focus Ring Demo

Practice focus ring demo UI.

Intermediate
Accessibility

Accessible Modal

Practice accessible modal UI.

Intermediate
Accessibility

ARIA Labels Demo

Practice aria labels demo UI.

Intermediate
Accessibility

High Contrast Mode

Practice high contrast mode UI.

Intermediate
Accessibility

Screen Reader Text

Practice screen reader text UI.

Intermediate
Accessibility

Focus Trap

Practice focus trap UI.

Intermediate
Accessibility

Incorrect ARIA Roles

Practice incorrect aria roles UI.

Intermediate
Accessibility

ARIA-live Error Announce

Practice aria-live error announce UI.

Intermediate
Accessibility

Keyboard Navigation For Grid

Practice keyboard navigation for grid UI.

Intermediate
Accessibility

Page Reload

Practice page reload UI.

Intermediate
Browser Actions

Back/Forward Navigation

Practice back/forward navigation UI.

Intermediate
Browser Actions

Soft Navigation

Practice soft navigation UI.

Intermediate
Browser Actions

Hard Navigation

Practice hard navigation UI.

Advanced
Browser Actions

JS-triggered Navigation

Practice js-triggered navigation UI.

Intermediate
Browser Actions

Open in Same Tab

Practice open in same tab UI.

Intermediate
Browser Actions

Open in New Tab

Practice open in new tab UI.

Intermediate
Browser Actions

Broken Link

Practice broken link UI.

Intermediate
Browser Actions

Redirect After Delay

Practice redirect after delay UI.

Intermediate
Browser Actions

Scroll To Bottom

Practice scroll to bottom UI.

Intermediate
Browser Actions

Scroll To Element

Practice scroll to element UI.

Intermediate
Browser Actions

Element Appears On Scroll

Practice element appears on scroll UI.

Intermediate
Browser Actions

Infinite Scroll Trigger

Practice infinite scroll trigger UI.

Intermediate
Browser Actions

Scroll Inside Container

Practice scroll inside container UI.

Intermediate
Browser Actions

Sticky Element Scroll Test

Practice sticky element scroll test UI.

Intermediate
Browser Actions

Parallax Scroll

Practice parallax scroll UI.

Intermediate
Browser Actions

New Tab Example

Practice new tab example UI.

Intermediate
Browser Actions

Popup Window (controlled)

Practice popup window (controlled) UI.

Intermediate
Browser Actions

Window Resize Event

Practice window resize event UI.

Intermediate
Browser Actions

Window Focus/Blur

Practice window focus/blur UI.

Intermediate
Browser Actions

Blocked Popup

Practice blocked popup UI.

Intermediate
Browser Actions

BeforeUnload Prompt

Practice beforeunload prompt UI.

Intermediate
Browser Actions

Keyboard Enter Submit

Practice keyboard enter submit UI.

Intermediate
Browser Actions

Keyboard ESC Close Modal

Practice keyboard esc close modal UI.

Intermediate
Browser Actions

Hotkeys Example

Practice hotkeys example UI.

Intermediate
Browser Actions

Prevent Default Key Events

Practice prevent default key events UI.

Intermediate
Browser Actions

Textarea Tab Handling

Practice textarea tab handling UI.

Intermediate
Browser Actions

Global Keyboard Listener

Practice global keyboard listener UI.

Intermediate
Browser Actions

Clear LocalStorage

Practice clear localstorage UI.

Intermediate
Browser Actions

Clear Cookies

Practice clear cookies UI.

Intermediate
Browser Actions

Geolocation Permission Mock

Practice geolocation permission mock UI.

Intermediate
Browser Actions

Notification Permission Mock

Practice notification permission mock UI.

Intermediate
Browser Actions

Detect Offline/Online

Practice detect offline/online UI.

Intermediate
Browser Actions

Detect Dark Mode Preference

Practice detect dark mode preference UI.

Intermediate
Browser Actions

Print Page

Practice print page UI.

Intermediate
Browser Actions

Print Section Only

Practice print section only UI.

Intermediate
Browser Actions

Disable Right Click

Practice disable right click UI.

Intermediate
Browser Actions

Disable Copy/Paste

Practice disable copy/paste UI.

Intermediate
Browser Actions

Link with dynamically added target attribute

Practice link with dynamically added target attribute UI.

Intermediate
Browser Actions

Window Close Trigger Button (mock)

Practice window close trigger button (mock) UI.

Intermediate
Browser Actions

Shortcut Cheat Sheet Overlay

Practice shortcut cheat sheet overlay UI.

Intermediate
Browser Actions

Clear SessionStorage Button

Practice clear sessionstorage button UI.

Intermediate
Browser Actions

Browser Zoom Level Simulation (CSS mimic)

Practice browser zoom level simulation (css mimic) UI.

Intermediate
Browser Actions

Page Break Preview Demo

Practice page break preview demo UI.

Intermediate
Browser Actions

PDF Export Mock (non-functional)

Practice pdf export mock (non-functional) UI.

Intermediate
Browser Actions

Block Text Selection Example

Practice block text selection example UI.

Intermediate
Browser Actions

Browser Autofill Simulation

Practice browser autofill simulation UI.

Intermediate
Browser Actions

Cache Simulation (content served from cache)

Practice cache simulation (content served from cache) UI.

Intermediate
Browser Actions

Progressive Enhancement Example (no-JS fallback)

Practice progressive enhancement example (no-js fallback) UI.

Intermediate
Browser Actions