Data driven solutions for your business

Nuxt 3 + Tailwind CSS Edition - Practice your test automation skills with comprehensive controls.

Register Student

Test Automation Features

{{ feature.title }}

{{ feature.description }}

Student Registration

Full registration form with text, date, select, color picker, textarea.

Back to Home

Student Information

{{ studentForm.statement.length }}/500 characters

Parent/Guardian Information

Teacher Registration

Nested iframes with form controls.

Back to Home

Shadow Student

Form controls inside Shadow DOM.

Back to Home

Student Details

Parent Details

Parent Details

Tables in Iframe, Shadow DOM, and Standard HTML.

Back to Home

Father's Details (Iframe)

Mother's Details (Shadow DOM)

Child Details (Standard Table)

Child Name Age Grade
{{ child.name }} {{ child.age }} {{ child.grade }}

File Upload Playground

Drag & drop, browse button, standard input, multiple files, image preview.

Back to Home

1. Drag & Drop Zone

Drag and drop a file here, or click to select

{{ dragFileName }}

2. Text Box + Browse Button

3. Standard HTML Input

4. Multiple Files Upload

Selected: {{ multipleFileNames.join(', ') }}

5. Image Upload with Preview

Preview

File Downloads

Word, PDF, Text, CSV, Image downloads.

Back to Home

{{ dl.filename }}

{{ dl.label }}

Alert Playground

Native dialogs, delayed alerts, unload protection.

Back to Home

Native Dialogs

Result: {{ alertResult }}

Window Events

When enabled, browser will warn before leaving page.

Native System

Error Simulation

Console logs, JS exceptions, network errors.

Back to Home

Console Output

JS Exceptions

Network Errors

Links Playground

New tab, modal, popup window, stacked links.

Back to Home
Open New Tab (Same Page) Open Login Modal Open Popup Window Open Full Browser Window

-- Stacked Links --

Link {{ i + 4 }}

Image Gallery

Gallery with tooltips, carousel, downloadable images.

Back to Home

1. Gallery with Tooltips

{{ img.title }}

2. Carousel

3. Downloadable Images

Data Tables

Paginated table with 100 records.

Back to Home

Student Records

Page {{ currentTablePage }} of {{ totalTablePages }}
ID {{ sortDirection === 'asc' ? '▲' : '▼' }} Name {{ sortDirection === 'asc' ? '▲' : '▼' }} Email Grade Status Actions
{{ record.id }} {{ record.name }} {{ record.email }} {{ record.grade }} {{ record.status }}

Employee Data Grid

{{ gridSelectedIds.length }} selected
ID {{ gridSortDirection === 'asc' ? '▲' : '▼' }}
Name {{ gridSortDirection === 'asc' ? '▲' : '▼' }}
Email {{ gridSortDirection === 'asc' ? '▲' : '▼' }}
Department {{ gridSortDirection === 'asc' ? '▲' : '▼' }}
Salary {{ gridSortDirection === 'asc' ? '▲' : '▼' }}
Status {{ gridSortDirection === 'asc' ? '▲' : '▼' }}
Actions
{{ employee.id }}
{{ employee.name }}
{{ employee.email }}
{{ employee.department }}
${{ employee.salary.toLocaleString() }}
{{ employee.status }}
Showing {{ (currentGridPage - 1) * 5 + 1 }} to {{ Math.min(currentGridPage * 5, filteredGridData.length) }} of {{ filteredGridData.length }} entries
{{ currentGridPage }} of {{ totalGridPages }}

Student Table

Student Name Parent Name Age Profile Link Action Edit / Delete
View Profile

Miscellaneous Components

Sliders, toggles, progress bars, modals, alerts, menus, tabs, media, spinners, breadcrumbs, accordions.

Back to Home

1. Sliders / Range Controls

2. Toggle Switches

Dark Mode
Notifications

3. Progress Bars

Download Progress {{ miscProgressDownload }}%
Upload Progress {{ miscProgressUpload }}%

4. Modal / Dialog

5. Alerts / Notifications

6. Menu / Dropdown

Edit Duplicate Archive Delete

7. Tabs

Tab 1 Content

This is the content for the first tab. It contains some sample text to demonstrate the tab functionality.

Tab 2 Content

This is the content for the second tab. Different content is shown when you switch tabs.

Tab 3 Content

This is the content for the third tab. Each tab panel can contain any type of content.

8. Video / Audio

9. Spinner / Loader

Loading...
Processing...

10. Breadcrumb

11. Accordion

Welcome to the getting started section. Here you'll find all the information you need to begin using our platform effectively.

Explore our comprehensive feature set including sliders, toggles, progress bars, modals, alerts, menus, tabs, media players, spinners, breadcrumbs, and accordions.

Find answers to frequently asked questions about our components and how to use them in your test automation projects.

12. Lists

Ordered List

Simple Ordered List
  1. First item
  2. Second item
  3. Third item
  4. Fourth item
  5. Fifth item
Nested Ordered List
  1. Parent Item 1
    1. Child item a
    2. Child item b
    3. Child item c
  2. Parent Item 2
    1. Child item a
    2. Child item b
  3. Parent Item 3
    1. Child item a
    2. Child item b

Unordered List

Simple Unordered List
  • Apple
  • Banana
  • Orange
  • Mango
  • Grape
Nested Unordered List
  • Fruits
    • Apple
    • Banana
    • Cherry
  • Vegetables
    • Carrot
    • Broccoli
    • Spinach

Div-based List Group

Active Item
Regular Item
Another Item
Disabled Item
Success Item
Danger Item
Warning Item

13. Tree View

File Explorer

  • 📁 Documents
    • 📁 Reports
      • 📄 Q1 Report
      • 📄 Q2 Report
      • 📄 Q3 Report
    • 📁 Templates
      • 📄 Invoice Template
      • 📄 Letter Template
    • 📁 Archives
      • 📄 2023 Archive
      • 📄 2024 Archive
  • 📁 Images
    • 🖼 Logo.png
    • 🖼 Banner.jpg
    • 🖼 Icon.svg
  • 📁 Downloads
    • 💾 Setup.exe
    • 📄 README.txt

Selection Info

Selected Node:

{{ treeSelectedNode ? treeNodeNames[treeSelectedNode] : 'None' }}

Node ID:

{{ treeSelectedNode || '-' }}

Type:

{{ treeSelectedNode ? (treeNodeNames[treeSelectedNode] && ['Documents', 'Reports', 'Templates', 'Archives', 'Images', 'Downloads'].includes(treeNodeNames[treeSelectedNode]) ? 'Folder' : 'File') : '-' }}

Instructions:

  • Click the arrow to expand/collapse folders
  • Click on any item to select it
  • Selected items are highlighted in indigo

14. Radio Button Group

Select Gender

Selected: {{ miscGender || 'None' }}

15. External Link

16. Checkbox Group

Selected: {{ Object.entries(miscCheckboxes).filter(([_, v]) => v).map(([k]) => k.charAt(0).toUpperCase() + k.slice(1)).join(', ') || 'None' }}

Dialog Title

This is a sample dialog/modal component. You can add any content here including forms, images, or other components.

{{ toast.title }}
{{ toast.message }}

Login

Link Login

This modal was opened from a link click.