Lit + Shoelace QA Playground

Practice your test automation skills with Shoelace web components and Lit framework. Modern, accessible, and powerful.

Shoelace 2.x

Lit

Tailwind CSS

Web Components

Start Registration

Forms

Text fields, selects, checkboxes, and date pickers

Tables

Paginated data tables with 100 records

Modals

Dialogs, drawers, and login forms

Uploads

Drag-drop, browse, and image preview

Miscellaneous

Sliders, toggles, tabs, media, and more

Student Registration

Complete registration form with various input types

Back to Home

Student Information

Male

Female

Other

Kindergarten

Grade 1-3

Grade 4-6

Grade 7-9

Grade 10-12

House Color

0/500 characters

Parent/Guardian Information

Cancel

Submit Application

Teacher Registration

Form controls isolated via nested iframes

Back to Home

Submit Teacher Application

Shadow Student

Form controls isolated in Shadow DOM

Back to Home

Student Details (Shadow DOM)

Parent Details (Shadow DOM)

Submit Shadow Form

Parent Details

Tables in different contexts: iframe, Shadow DOM, and standard HTML

Back to Home

Father's Details (Iframe)

Mother's Details (Shadow DOM)

Children Details (Standard Table)

Child Name	Age	Grade	Status
Emily Johnson	10	5th Grade	Active
Michael Johnson	7	2nd Grade	Active
Sarah Johnson	5	Kindergarten	Pending

File Uploads

Various file upload methods for testing

Back to Home

1. Drag & Drop Zone

Drag and drop a file here, or click to select

2. Text Box + Browse Button

Browse...

3. Standard HTML Input

4. Multiple Files Upload

5. Image Upload with Preview

Preview

File Downloads

Download various file types for testing

Back to Home

Assignment.docx

Microsoft Word

Download

Report.pdf

PDF Document

Download

Notes.txt

Plain Text

Download

Grades.csv

CSV Data

Download

Photo.jpg

JPEG Image

Save Image

Page.html

HTML Document

Download

Alert Playground

Test various browser dialogs and alerts

Back to Home

Native Dialogs

alert()

confirm()

prompt()

Delayed Alerts

Alert after 1s

Alert after 2s

Alert after 3s

Window Events

Enable Unload Protection

Shows confirmation when leaving page

Shoelace Alert Components

Success! Your action was completed successfully.

Info: This is an informational message.

Warning! Please review this important notice.

Error! Something went wrong.

This alert can be dismissed by clicking the X.

Toast Notifications

Success Toast

Error Toast

Info Toast

Error Simulation

Trigger console errors, JS exceptions, and network errors

Back to Home

Console Messages

console.log()

console.warn()

console.error()

JS Exceptions

ReferenceError

TypeError

SyntaxError (eval)

RangeError

Network Errors

404 Not Found

500 Server Error

CORS Error

Timeout Error

Error Output Log

// Error messages will appear here...

Clear Log

Links Playground

Test different link behaviors and window handling

Back to Home

Link 1 - Open in New Tab

Link 2 - Open Login Modal

Link 3 - Open Popup Window

Link 4 - Open Full Browser Window

-- Stacked Links --

Link 5 Link 6 Link 7 Link 8 Link 9 Link 10

Image Gallery

Gallery with tooltips, carousel, and downloadable images

Back to Home

1. Gallery with Tooltips

2. Image Carousel

3. Downloadable Images

Download as JPG

Download as PNG

Data Tables

Paginated table with 100 records

Back to Home

Student Records

Page 1 of 10

ID	Name	Email	Grade	Status	Actions

Showing 1-10 of 100 records

Employee Data Grid

0 selected

Clear Selection

ID

Name

Email

Dept

Salary

Status

Actions

Showing 1-5 of 50 employees

Student Table

Hide Columns

Student Name	Parent Name	Age	Profile Link	Action
Emma Thompson	Robert Thompson	14	View Profile	Edit
Liam Johnson	Sarah Johnson	15	View Profile	Edit
Olivia Williams	Michael Williams	13	View Profile	Edit
Noah Brown	Jennifer Brown	16	View Profile	Edit
Ava Davis	David Davis	14	View Profile	Edit
Ethan Miller	Lisa Miller	15	View Profile	Edit
Sophia Wilson	James Wilson	13	View Profile	Edit
Mason Moore	Patricia Moore	16	View Profile	Edit
Isabella Taylor	Christopher Taylor	14	View Profile	Edit
Lucas Anderson	Amanda Anderson	15	View Profile	Edit

Miscellaneous Components

Various UI components for testing

Back to Home

1. Slider/Range

Volume

Value: 50

Brightness

Value: 75

2. Toggle Switches

Dark Mode

Notifications

3. Progress Bars

Download Progress

Upload Progress

4. Modal/Dialog

Open Dialog

5. Alerts/Notifications

Success Alert

Error Alert

6. Menu/Dropdown

7. Tabs

Tab 1

Tab 2

Tab 3

This is the content for Tab 1. You can put any content here.

This is the content for Tab 2. Different content goes here.

This is the content for Tab 3. More unique content here.

8. Video/Audio

Video Player

Audio Player

9. Spinner/Loader

Loading content...

10. Breadcrumb

11. Accordion

This is the content of the first accordion section. It contains information about getting started with the application.

This section describes the main features of the application. Each feature is designed to enhance user experience.

Frequently asked questions and their answers are provided in this section to help users resolve common issues.

12. Lists

Ordered List

Simple Ordered List

First item
Second item
Third item
Fourth item
Fifth item

Nested Ordered List

Parent Item 1
1. Child Item 1a
2. Child Item 1b
3. Child Item 1c
Parent Item 2
1. Child Item 2a
2. Child Item 2b
Parent Item 3
1. Child Item 3a
2. Child Item 3b

Unordered List

Simple Unordered List

Apple
Banana
Cherry
Date
Elderberry

Nested Unordered List

Fruits
- Apple
- Orange
- Mango
Vegetables
- Carrot
- Broccoli
- Spinach

Div-based List Group

Shoelace Menu List

Active Item

Regular Item

Another Item

Disabled Item

Success Item

Danger Item

Warning Item

13. Tree View

File Explorer

Documents

Reports

Templates