Test Automation Playground

Buttons

Click any button to see output...

Loading Dialog

Loading duration (seconds):

Click button to show loading dialog...

Label Change Dialog

Current Label: Welcome to QA Testing!

Click button to open dialog and change the label text...

Element States Testing

Enabled/Disabled Buttons

Visible/Hidden Elements

This element is visible by default

Read-only Input

Required Input (with asterisk) *

Selection States

Selected Checkbox

Unselected Checkbox

Input with Custom Attributes Max length: 20 characters

Interact with elements to test their states...

Date & Time Pickers

Date Picker

Selected date will appear here...

Date & Time Picker

Selected date & time will appear here...

Time Picker

Selected time will appear here...

Month Picker

Selected month will appear here...

Week Picker

Selected week will appear here...

Live Clock

00:00:00

Loading...

UTC

Select Timezone

Time Format

12-hour (AM/PM)

24-hour

Clock is running in real-time...

Random Result Testing

Click the button below to trigger a random outcome (Success, Error, or Warning). This simulates unpredictable API responses or system behaviors.

Click button to see random result...

Statistics:

Success: 0 | Error: 0 | Warning: 0

Links & Hyperlinks

Basic Links

Simple Link External Link (Opens in New Tab) Anchor Link (Jump to Buttons Section) Visited Link (Styled) Disabled Link

Links with Different Protocols

📧 Email Link (mailto:) 📞 Phone Link (tel:) 💬 SMS Link (sms:) ⬇️ Download Link

Links with Different Styles

Primary Link Secondary Link Success Link Danger Link Link Styled as Button

Navigation Link List

Click any link to see output...

Pagination

Page 1 Content

Showing 1-5 of 50 items

...

Items per page:

Navigate through pages...

Accordion / Collapsible Panels

Section 1: Personal Information ▼

Section 2: Address Details ▼

Section 3: Payment Information (Pre-expanded) ▲

This section is expanded by default. Payment methods, billing information, and transaction details would be displayed here.

Section 4: Additional Notes ▼

Click headers to expand/collapse sections...

Auto-complete / Search Suggestions

Search Countries:

Try typing: United, Canada, Japan, Germany, Australia, etc.

Start typing to see suggestions...

Multi-Step Form (Wizard)

1

Account

2

Profile

3

Confirmation

Step 1: Account Information

Username:

Email:

Password:

Complete the form step by step...

Multi-Select Dropdown

Select Multiple Skills (Hold Ctrl/Cmd): Hold Ctrl (Windows) or Cmd (Mac) to select multiple. JavaScript and Node.js are pre-selected.

Select skills to see output...

Toggle Switches

Email Notifications (Enabled)

SMS Notifications (Disabled)

Dark Mode (Enabled)

Toggle switches to see state changes...

Toast Notifications

Auto-dismiss duration (seconds):

Click buttons to show toast notifications (they appear in top-right corner)...

Star Rating System

Rate this product:

☆ ☆ ☆ ☆ ☆

Not rated yet

Rate our service (Pre-rated 4 stars):

★ ★ ★ ★ ☆

Rating: 4 out of 5 stars

Hover and click stars to rate...

Copy to Clipboard

Text to Copy:

Click button to copy text...

Scrollable Elements

Scrollable Content

Scroll down to see more content and test the "Scroll to Top" button...

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

You've reached the bottom! ✓

Scroll position: 0px

Image Elements

Working Image

Broken Image (404)

Loading...

Image Placeholder

Images loaded...

Color Picker

Choose a Color: #3b82f6

Selected color: #3b82f6

📱 Laptop Computer

📚 Mystery Novel

👕 T-Shirt

📱 Smartphone

📚 Cookbook

👖 Jeans

Showing all 6 items

Badges & Status Indicators

Notification Badges:

Status Pills:

● Active ● Pending ● Inactive ● Processing

Badge and status indicators displayed...

Double-Entry Validation Fields

New Password: Confirm Password:

Email Address: Confirm Email:

Fill in both fields to see validation...

Character Counter

Bio (Maximum 100 characters):

0 / 100 characters

Tweet (280 characters):

280 characters remaining

Start typing to see character count...

Select Category:

Select Subcategory:

Select Product:

Keyboard Shortcuts

Available Shortcuts:

Ctrl + S - Trigger Save Action
Ctrl + K - Trigger Search
Esc - Close Notifications

Press keyboard shortcuts to test (make sure this page has focus)

Try pressing Ctrl+S or Ctrl+K...

Form Elements

Text Input

Email Input

Password Input

Number Input

Dropdown Select

Combobox (Type to filter)

Apple

Banana

Cherry

Date

Elderberry

Fig

Grape

Honeydew

Checkboxes

Java (Pre-checked)

Python

JavaScript

C# (Disabled)

Radio Buttons

Beginner

Intermediate (Pre-selected)

Advanced

Expert (Disabled)

Textarea

✓ Form submitted successfully! (This message appears after submission)

Alerts & Modals

Success: Operation completed successfully!

Error: Something went wrong!

Warning: Please review your input!

Tables

ID	Name	Email	Role

1	John Doe	john@example.com	Admin
2	Jane Smith	jane@example.com	User
3	Bob Johnson	bob@example.com	Manager

Table actions will appear here...

Dynamic Content

This element can be shown/hidden dynamically

Drag & Drop

Drag Item 1

Drag Item 2

Drop items here

Sliders & Progress

Slider: 50%

0%

Tabs

Tab 1 Content

This is the content of tab 1. You can test switching between tabs.

Tab 2 Content

This is the content of tab 2. Different content for testing.

Tab 3 Content

This is the content of tab 3. Yet another tab for your tests.

Dropdowns & Tooltips

File Upload

No file selected