Module 1
Form Controls
Eight focused lessons on the controls every form-based test touches — from text inputs through to elements that appear only after an asynchronous call.
Text Inputs
Radio Buttons
Checkboxes
Toggle Switches
Enable Notifications
Get notified about test runs and results.
Email Alerts
Receive a daily summary by email.
Auto Save
Automatically save your progress as you go.
Multi Selects
Tip: Hold Ctrl/Cmd to select multiple. Puma and Zara appear twice — same label, different value.
Tooltip
The tooltip is only in the DOM while the trigger is hovered or focused — so a test has to hover first, then assert.
Hover the button (or focus it with Tab).
Tooltip state: hidden
Show / Hide Elements
The target starts visible. Hide applies the hidden attribute, so the field genuinely leaves the accessibility tree — not just the screen. Every click is acknowledged in the log below, including a click that changes nothing.
Target state: visible
No clicks yet.
Module 2
Dropdowns
Native selects and the four custom dropdown patterns you meet most often in real applications.
Static Dropdowns
Real <select> elements — the browser draws the open list, so there is nothing in the DOM to click.
Verify default dropdown values are in sorted order.
Bootstrap Dropdown
Custom dropdown — not built using the HTML <select> element. It is a div / ul / li structure, so selectOption() cannot touch it.
Selected: —
Auto Suggestive Dropdown
Enter at least 2 characters to see suggestions.
Try typing: , , ,
Searchable Custom Dropdown
Selected: None
- Click the box — the options open straight away.
- Type to filter the list.
- ↑ ↓ move through the options.
- Enter opens the list, or selects the highlighted option.
- Esc closes the list.
- Backspace removes the last tag — only when the box is empty.
Dynamic Dependent Dropdown
Select a country → State becomes enabled → Select a state → City becomes enabled. Each list is fetched after the one above it changes, so a test waits for enabled and populated, not just enabled.
Loading states…
Loading cities…
Selected: —
Module 3
File Handling
Complete file upload, download, and FileChooser automation lab.
Standard File Inputs
The element every upload on this page comes down to — first with one file, then with many.
Single File Upload
Selected File: —
Workflow: Choose File → Upload → Verify Filename
Multiple File Upload
File Count: 0
Selected Files: —
Workflow: Choose Files → Upload → Verify All Filenames
Upload Challenges
The same <input type="file">, reached two different ways. Read the badges: one is direct assignment, the other is an event.
Hidden Input Upload Challenge
Direct assignmentQuestion: the input is hidden. How will you upload a resume?
Accepted Format: PDF only (.pdf)
Selected:
Workflow: Inspect Hidden Input → setInputFiles() → Validate Extension → Verify Success/Error Message
FileChooser Event Challenge
filechooser eventQuestion: the file input is dynamically triggered. How will you upload files?
Accepted: PDF, PNG, JPG, TXT · Maximum: 5 Files
File Count: 0
Selected Files: —
Workflow: waitForEvent('filechooser') → click() → setFiles([...]) → Validate File Count → Verify Filenames
Downloads
Four real GEN X EVO assets, plus a PDF that can be downloaded or opened in a new tab.
Download Manager Challenge
genxevo-profile-course-guide.pdf
Instructor profile and course guide. Two routes on purpose — download it, or open it in a new tab.
genxevo-course-template-day.csv
Course catalogue as CSV — download, modify, re-upload, validate.
genxevo-profile-information.txt
Plain-text profile summary — easy to assert on line by line.
Workflow: Download → Save As → Verify File Exists → Cleanup · New tab: Open → Verify URL → Download from the viewer
End-to-End Workflow
Everything above, in one round trip, in a lab that opens in its own tab.
Excel Upload/Download Playground
Workflow: Download → Modify → Upload → Validate → Reset
Module 4
Tables
Four progressive exercises — from fundamentals to a full end-to-end automation assignment.
Static Web Table
Practice focus: the markup never changes, so read rows and cells with confidence — then prove Gold + Silver + Bronze really equals Total Medals.
| Country | Sport | Gold | Silver | Bronze | Total Medals |
|---|---|---|---|---|---|
| USA | Swimming | 10 | 7 | 5 | 22 |
| China | Table Tennis | 8 | 3 | 2 | 13 |
| India | Shooting | 3 | 4 | 2 | 9 |
| Japan | Wrestling | 5 | 2 | 1 | 8 |
| Australia | Swimming | 6 | 4 | 3 | 13 |
| United Kingdom | Cycling | 4 | 5 | 2 | 11 |
Dynamic Table
Practice focus: Regenerate shuffles both the rows and the column order, so resolve the column from its header text at run time rather than trusting an index.
Column order and values regenerate on each click.
Pagination Table
Practice focus: only the current page of records exists in the DOM — search, sort or page your way to a row before you assert anything about it.
| Artist | Country | Genre | Grammy Awards | Albums Sold (M) |
|---|
Showing 1 to 10 of 62 entries
Table Assignment — Flight Booking Portal
Step 1 — Choose your route
Step 2 — Available flights
| # | Airline | Duration | Stops | Price (USD) | Action |
|---|
Step 3 — Passenger details
🛫 Automation Scenario
Objective: Book the cheapest available flight and verify the booking confirmation.
Your Automation Tasks
- ✓ Select departure city
- ✓ Select destination city
- ✓ Search available flights
- ✓ Read all available prices
- ✓ Identify the cheapest flight
- ✓ Book that flight
- ✓ Enter passenger information
- ✓ Complete the booking
- ✓ Verify booking confirmation
Module 5
Dialogs & Interactions
Dialogs, mouse gestures, and waiting for elements that appear after a delay.
Alerts & Popups
Practice native window.alert(), confirm(), prompt() — dialogs that block page execution and cannot be inspected in the DOM.
Scenario 1
Simple Alert
Alert result:
Dialog Type:
Dialog Message:
Action:
Scenario 2
Confirmation Alert
Confirmation result:
Dialog Type:
Dialog Message:
Action:
Scenario 3
Prompt Alert
Prompt result:
Dialog Type:
Dialog Message:
Default Value:
Action:
⚠️ Note
Playwright automatically dismisses dialogs if no listener is registered. Always register page.on('dialog') before the action that triggers the dialog.
🖱️ Mouse Actions
Hover, right click, double click, drag and drop, and slider handles — the gestures a mouse-driven test has to reproduce.
Right Click Menu
Selected:
Hint: click({ button: 'right' })
Double Click Copy
Hint: dblclick() → validate copied value
Drag & Drop
Matched: 0 / 3
Hint: dragTo() — or — mouse.down() → move() → up()
Single Value Slider
Hint: move slider handle and validate displayed value
Dual Price Slider
Price Range: $41 - 300
Hint: locate both handles separately and move each handle independently
⌨️ Keyboard Actions
Shortcuts, focus order, modifier keys and clipboard work — driven entirely from the keyboard.
Keyboard Mission Lab
Practice real keyboard workflows, shortcuts, focus handling, copy/paste scenarios, and sequential user interactions.
Step 1 — Department Selector
Selected Department: —
Workflow: focus() → ArrowDown → Enter → validate selection
Keyboard Mission Progress
- ☐ Department Selected
- ☐ Secret Key Typed
- ☐ Text Copied
- ☐ Summary Generated
Step 2 — Secret Key Challenge
Type PLAYWRIGHT sequentially, one character at a time.
Progress: 0/10 characters
Waiting for input…
Workflow: pressSequentially() → validate → expect()
Step 3 — Copy/Paste Challenge
Waiting for copy…
Workflow: focus() → Ctrl+A → Ctrl+C → Tab → Ctrl+V → expect()
Step 4 — Generate Summary
Enabled once Department, Secret Key, and Copy steps are complete.
Workflow Result
Complete Step 4 to see your results here.
Workflow Completed
Department:
Secret Key:
Copy Status:
🎉 Keyboard Mission Completed
📜 Scrolling
Scrolling a container versus scrolling the page, and content that only loads once you reach it.
Scrolling Challenges
Practice scrolling inside containers and infinite lazy loading pages.
Scrollable Employee Directory
Practice locating hidden items inside a scrollable container.
Target Employee: EMP-125
Selected Employee: None
Infinite Scroll Playground
Open a dedicated Book Store Catalog page with continuous lazy loading.
Target: Load all books and detect end of catalog.
Module 6
Browser Context, Tabs & Windows
Real tabs, real popups, real events — practice detecting, switching between, and closing them.
New Tab vs New Window
Open Documentation Tab
Practice Note: wait for a new tab to open, then read and close it.
Tabs Open : 0
Open External Window
Practice Note: wait for a popup window, then read and close it.
Windows Open : 0
Activity Log
Live activity feed for both tabs and windows
No activity yet.
Browser Context Handling
Practice detecting and switching between multiple tabs and windows.
Single Random Tab
Practice Note: verify the opened tab's URL.
Last Opened : —
Single Random Window
Practice Note: verify the opened window's URL.
Last Window : —
Multiple Tabs at Once
Practice Note: open and verify several tabs at once.
Opens Selenium, WebdriverIO and Cypress documentation in separate tabs.
Tabs Opened : 0
Multiple Windows at Once
Practice Note: open and verify several windows at once.
Opens VS Code, Eclipse and PyCharm download pages in separate windows.
Windows Opened : 0
Parent ↔ Child Communication
Practice interacting with a popup window and verifying the result once it closes.
Status: Not Logged In
User: —
Automation Workflow
-
1
Click "Open Login Window"
-
2
Wait until popup opens
-
3
Switch automation focus to popup
-
4
Enter Email
-
5
Enter Password
-
6
Click Login
-
7
Wait for popup to close
-
8
Return to Parent Page
-
9
Verify logged in user
Module 7
Frames & Embedded Content
Practice handling iframe elements, nested frames, and frame-switching techniques encountered in enterprise applications.
Frame Counting
A live travel dashboard embedding two independent widgets.
Try it: read inside Frame 1, then Frame 2, switching between them and back out to this page.
Iframes on this dashboard: —
Payment Gateway Frame
A modern checkout form embedded inside an iframe — just like real payment gateways.
Test Card Information
Dataset 1
Card Holder
JOHN SMITH
Card Number
4111 1111 1111 1111
Expiry
12/29
CVV
123
Status
Approved
Available Balance
₹1,25,000
Dataset 2
Card Holder
ALEX JOHNSON
Card Number
5555 5555 5555 4444
Expiry
08/28
CVV
456
Status
Insufficient Balance
Available Balance
₹120
Payment Result
Payment Status: —
Balance: —
Result: Fill the form and click Pay Now
💡 Most payment gateways use iframes to isolate sensitive card data.
Advanced Frame Handling
Practice nested frames, child frames, dynamic iframes, and frame discovery techniques.
Nested Frames
An enquiry form whose Travel Preference section lives inside its own nested iframe.
Students Should Automate
Parent Frame → Child Frame → Back to Parent → Submit → Validate success message
Dynamic Frame
Iframes can appear, reload, or change at runtime.
Loading complaint form…
Students Should Automate
- ✓ Dynamic iframe
- ✓ Fill mandatory fields
- ✓ Dropdown selection
- ✓ Submit
- ✓ Success validation
Module 8
Calendars & Date Pickers
Six progressive exercises — from native HTML inputs with real business rules to dual calendars and enterprise date fields.
Native HTML5 Date Input
Date of birth must be at least 18 years ago. Passport expiry must be after the issued date and within 10 years of it. Type an invalid value — the page validates, it does not stop you.
Selected: —
Selected: —
Selected: —
Enter an issued date and an expiry date.
idle
jQuery UI Datepicker
Selected Date: —
Dropdown-Based Datepicker
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|
Selected Date: —
Multi-Calendar
Selected Journey: Click any date to begin
Dual Calendar
Past dates are not selectable. Minimum stay 2 nights. Maximum booking 30 days. A rejected check-out is not applied — assert the message.
Select a check-in date to begin.
Enterprise Date Inputs
Scenario 1 — Simple Textbox Input
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|
Value: —
Scenario 2 — European Date Format
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|
Formatted: —
Scenario 3 — Text Month Format
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|
Value: —
Readonly Date Field
This field simulates an existing date already stored in an enterprise application. Users cannot type directly because the field is readonly.
🔒 Existing value retrieved from the system. Automation engineers typically interact with the calendar popup — in some legacy applications, the readonly attribute may be removed using JavaScript for automation purposes.
Hybrid Date Field (Type or Calendar Selection)
Type a date directly or click the 📅 icon to open a calendar popup — both inputs update the same field. Typed values must be mm/dd/yyyy and a real calendar date.
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|
Value: —
Module 9
Advanced UI Elements
Practice automating complex visual components frequently used in enterprise dashboards and modern web applications.
Interactive SVG Bar Chart
A monthly sales dashboard. Hover a bar for details, click a bar to select it.
Hover a bar to see its value
Selected: none
Automation Objectives
- ✓ Count bars
- ✓ Find highest value
- ✓ Find lowest value
- ✓ Click highest bar
- ✓ Verify tooltip
- ✓ Validate updated values
Interactive SVG Pie Chart
Traffic sources by channel. Hover a slice to expand it, click to select.
- Organic Search — 35%
- Direct — 25%
- Social Media — 20%
- Referral — 20%
Hover a slice to see details
Selected Slice: none
Automation Objectives
- ✓ Hover slice
- ✓ Click slice
- ✓ Verify category
- ✓ Validate percentage
- ✓ Verify tooltip
Interactive Seat Booking Map
A theatre-style seat map. Click an available seat to select it, click again to release it.
Available: 12 · Occupied: 3
Selected Seats: none
Automation Objectives
- ✓ Count available
- ✓ Count occupied
- ✓ Select seat
- ✓ Verify color change
- ✓ Validate summary
Interactive SVG World Map
A simplified world map. Hover a region for its name, click to select it.
Hover a region to see its name
Selected Country: none
Automation Objectives
- ✓ Hover country
- ✓ Click country
- ✓ Verify tooltip
- ✓ Verify selected country
- ✓ Validate highlighted region
Module 10
Labs & Real-World Automation
Explore complete automation labs covering authentication, security, browser internals, network behaviour, real-world applications, and advanced automation scenarios.
Each card opens a standalone application or lab in a new tab. This page stays open behind it.
Automation Challenge Arena
Game-based automation challenges, including Memory Matrix and SVG Spell Bee.
Open ArenaCAPTCHA Lab
Work through challenge-token flows and understand where automation legitimately stops.
Open LabCommerce
A complete storefront-to-checkout journey backed by a real API and real order data.
Open AppHTTP Status Lab
Drive and assert on the full range of HTTP status codes and retry behaviour.
Open LabCineVerse
A full cinema-booking application — browse films, pick seats, and complete a booking.
Open AppOAuth Platform
A standards-based OAuth2 / OIDC authorization server with its own isolated identity system.
Open App