Complete Playwright & Selenium Testing Playground

Master automation testing with real-world scenarios and interactive elements

Start Practicing

📝 Form Testing & Input Validation

Login Form

Please enter your username and password to login.

Username: admin
Password: password

Registration Form

🎯 Interactive Elements & Controls

Button Interactions

Dynamic Content Loading

Alerts & Popups

Autocomplete Input

Dynamic Data Table

Name ↕ Email ↕ Role ↕ Status ↕ Actions
Priya Sharma priya.sharma@example.com Admin Active
Rajesh Kumar rajesh.kumar@example.com User Active
Anjali Patel anjali.patel@example.com Manager Inactive
Arun Singh arun.singh@example.com User Active
Meera Reddy meera.reddy@example.com Developer Active

🎨 Drag & Drop and Advanced Interactions

Drag and Drop Interface

Drag Items From Here

Item 1
Item 2
Item 3
Item 4

Drop Items Here

File Upload

📁 Click or drag files here to upload

Sliders & Range Controls

✨ Modern UI Components

Practice with modern UI patterns found in today's web applications.

Tab Navigation

User Profile

Name: John Doe

Email: john.doe@example.com

Role: Senior QA Engineer

Toggle Switches

Sub-toggles are disabled until the Master Switch is turned ON.

OTP / PIN Input

Enter the 6-digit verification code. (Hint: 1 2 3 4 5 6)

Toast Notifications

Trigger different toast types. Each auto-dismisses after 4 seconds.

Progress Bars & Loading States

Design 85%
Development 60%
Testing 30%

Multi-Step Checkout Form

1
Personal
2
Address
3
Payment
4
Review

Step 1: Personal Information

Accordion / FAQ

🌟 Shadow DOM Testing

Practice accessing elements within Shadow DOM — a common challenge in modern web applications.

Simple Shadow DOM

This content is outside the shadow DOM

Nested Shadow DOM

This content is outside the nested shadow DOM

Shadow DOM Form

Shadow DOM form will be created here

🚀 Advanced Testing Scenarios

Iframe Interaction

Window Handling

AJAX & Asynchronous Loading

Context Menu

Right-click here for custom context menu

Infinite Scroll

📋 Practice Test Cases

Real-world test scenarios written in plain English. Implement them using Playwright, Selenium, Cypress, or any automation tool of your choice.

🔐 Login & Authentication

  1. Enter username "admin" and password "password", click Login, and verify the success message "Login successful!" appears.
  2. Enter username "admin" and a wrong password, click Login, and verify the error says "Invalid password!"
  3. Enter a wrong username with correct password "password", click Login, verify error says "Invalid username!"
  4. Leave both fields empty and submit — verify a validation error appears.
  5. Check the "Remember me" checkbox, verify it is checked, then uncheck it and verify it is unchecked.

📝 Registration Form

  1. Fill First Name "Alice", Last Name "Smith", Email "alice@test.com", select Country "India", check "Coding" and "Testing" interests, write a bio, and click Register.
  2. Select "Male" radio button then select "Female" — verify only "Female" is selected.
  3. Check all three interests (Coding, Testing, Design) and verify all three remain checked simultaneously.
  4. Enter an invalid email like "notanemail" and try to submit — verify the browser shows a validation error.
  5. Enter a phone number, click elsewhere, and verify the value persists in the phone field.

📊 Data Table Operations

  1. Verify the table initially contains exactly 5 rows of user data.
  2. Click "Add Row" and verify a new row is appended, making the total 6.
  3. Type "Priya" in the search box and verify only Priya Sharma's row is visible.
  4. Type "inactive" in the search box and verify only Anjali Patel's row appears.
  5. Click the "Select All" header checkbox and verify all 5 row checkboxes become checked.
  6. Select two rows, click "Delete Selected", confirm the dialog, and verify those rows are removed.
  7. Click "Edit" on Rajesh Kumar, verify the modal shows his name pre-filled, change his role to "Manager", save, and verify the table updated.
  8. Click "Delete" on Meera Reddy, click Cancel on the confirmation dialog, and verify she is still in the table.
  9. Click the "Name" column header and verify rows are sorted alphabetically.

⚡ Dynamic Content & Waits

  1. Click "Load Content" and verify a loading spinner appears, then disappears and the content block becomes visible with a timestamp.
  2. After loading content, click "Hide Content" and verify the block is no longer visible.
  3. Click "Load Data via AJAX", wait for the spinner to disappear, and verify a response with a Response ID is shown.
  4. Scroll to the bottom of the Infinite Scroll container and verify new items are automatically appended.

💬 Alerts, Modals & Dialogs

  1. Click "Show Alert", accept the popup, and verify "Alert was shown" text appears on the page.
  2. Click "Show Confirm" and accept — verify "Confirm result: Yes". Repeat and dismiss — verify "Confirm result: No".
  3. Click "Show Prompt", type "Playwright", and verify "Prompt result: Playwright" appears.
  4. Click "Show Modal", verify it opens with "Test Modal" heading, click the × button, and verify the modal closes.

🖱️ Button Interactions

  1. Click "Click Me" once and verify "Button clicked!" message appears.
  2. Double-click "Double Click" and verify "Button double-clicked!" appears.
  3. Right-click the "Right Click" button and verify "Button right-clicked!" appears (not the browser context menu).
  4. Verify "Disabled Button" appears grayed out and is not clickable. Click "Enable/Disable" to enable it — verify it looks active. Click again — verify it is disabled again.

🎨 Drag and Drop

  1. Drag "Item 1" from the source area and drop it into the drop zone — verify it appears there.
  2. Drag all four items into the drop zone one by one and verify all four are present.
  3. While dragging an item over the drop zone, verify the drop zone shows a highlighted visual state.

🎚️ Sliders & Date Pickers

  1. Move the Volume slider to maximum and verify the displayed value shows "100".
  2. Move the Volume slider to minimum and verify the displayed value shows "0".
  3. Set the date picker to "2026-12-25" and verify the field shows the correct date.
  4. Select a color with the color picker and verify the input value updates to the new hex code.

🔍 Autocomplete Search

  1. Type "java" and verify the dropdown shows "JavaScript" and "Java".
  2. Type "play", click "Playwright" in the suggestions, and verify the input is filled and "Selected: Playwright" shows below.
  3. Type "xyz123" and verify the dropdown shows "No suggestions found".
  4. Type "react", use the Down Arrow key to navigate to "React", press Enter, and verify it is selected.
  5. While the dropdown is open, press Escape and verify it closes.

📑 Tab Navigation

  1. Verify the "Profile" tab is active by default and shows Name, Email, Role.
  2. Click "Settings" tab — verify Settings panel (with Language and Timezone dropdowns) is shown and Profile panel is hidden.
  3. Click "Activity" tab and verify the Recent Activity list shows 4 items.
  4. Click "Billing" tab, verify "Pro Plan" and "$29/month" are visible, and click "Upgrade Plan".

🔄 Toggle Switches

  1. Verify all four sub-toggles (Notifications, Dark Mode, Analytics, Two-Factor Auth) appear visually disabled and cannot be interacted with initially.
  2. Turn ON the Master Switch and verify all four sub-toggles become enabled and interactive.
  3. With Master Switch ON, toggle "Email Notifications" ON and verify the toggle shows the ON (colored) state.
  4. Toggle "Dark Mode" ON and verify the page background and section colors change to a dark theme.
  5. Turn OFF the Master Switch and verify all sub-toggles are disabled again.

🔢 OTP / PIN Input

  1. Type "1" in the first OTP box and verify focus automatically moves to the second box.
  2. Fill all 6 OTP boxes (1–6), entering one digit at a time, and verify auto-focus advances after each digit.
  3. Enter OTP "123456", click "Verify Code", and verify a success message appears.
  4. Enter incorrect OTP "000000", click "Verify Code", and verify an error message appears.
  5. Fill boxes partially, click "Clear", and verify all 6 boxes are empty and focus is on the first box.
  6. Type a digit in OTP box 3, press Backspace — verify box 3 clears and focus moves back to box 2.

🔔 Toast Notifications

  1. Click "Success Toast" and verify a green toast notification appears at the top-right corner.
  2. Click "Error Toast" and verify a red toast appears with an error message.
  3. Click "Warning Toast" and verify an amber/yellow toast appears.
  4. Verify a toast automatically disappears after ~4 seconds without user interaction.
  5. Click the × button on an active toast and verify it dismisses immediately.
  6. Trigger "Success Toast" and "Error Toast" in quick succession and verify both toasts are visible simultaneously, stacked vertically.

📈 Progress Bars

  1. Click "Start Upload" and verify the progress bar starts animating from 0% toward 100%.
  2. Wait for the bar to reach 100% and verify the label shows "100" and a completion message appears.
  3. Click "Reset" and verify the progress bar returns to 0% and the label shows "0".
  4. Verify the static progress bars show approximate widths: Design ~85%, Development ~60%, Testing ~30%.

🛒 Multi-Step Checkout

  1. Verify only Step 1 (Personal Information) is visible when the section loads.
  2. Click "Next: Address" with empty fields and verify an error message about required fields appears.
  3. Fill First Name "John", Last Name "Doe", Email "john@test.com", click Next, and verify Step 2 (Address) is now shown.
  4. Click "Back" from Step 2 and verify Step 1 still shows "John", "Doe", and the email.
  5. Complete Steps 1–3, reach Step 4, and verify the order summary shows the name and email from Step 1.
  6. In Step 4, click "Place Order" without checking Terms — verify an error is shown.
  7. Check Terms, click "Place Order", and verify the success screen shows an order number starting with "ORD-".

🪗 Accordion

  1. Verify all 5 accordion items are collapsed when the page loads.
  2. Click the first accordion header and verify its body content expands and becomes visible.
  3. Click an expanded accordion item again and verify it collapses.
  4. Open accordion item 1, then click item 2 — verify item 2 opens and item 1 closes automatically.

🌟 Shadow DOM

  1. Click "Shadow Button" inside the Simple Shadow DOM and verify the alert "Button inside Shadow DOM clicked!" appears.
  2. Type text into the input inside the Simple Shadow DOM and verify the text is visible in that field.
  3. Click "Nested Shadow Button" inside the Nested Shadow DOM and verify the correct alert appears.
  4. Fill the Shadow DOM Form (name + email) and click "Submit Shadow Form" — verify the green success message appears inside the shadow DOM.

🖼️ Iframe & Window Handling

  1. Switch context to the iframe, click "Click me in iframe", handle the alert, and verify the action succeeded.
  2. Switch to the iframe, type text into the iframe input field, and verify it appears there.
  3. Click "Open New Window", switch to it, verify the heading "New Window" is present, click "Close Window", and switch back to the main page.
  4. Click "Open New Tab", verify the browser opens a new tab, then close it and verify you are back on the main page.

🖱️ Context Menu

  1. Right-click the context area and verify the custom menu appears with options Copy, Paste, and Delete.
  2. Open the context menu and click "Copy" — verify an alert confirms the "Copy" action was triggered.
  3. Open the context menu then click anywhere else on the page — verify the context menu disappears.