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

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