A sandbox built for automation practice
Every element below is stable and documented. Point Selenium, Playwright, Cypress — whatever you're learning — at this page and practise against real widgets instead of reading about them.
How to use this page
Each widget below is live. Interact with it manually first, then open Show locators & code to see its ids, CSS and XPath selectors alongside a working Selenium (Java) and Playwright (TypeScript) snippet.
The ids on this page are treated as a stable contract — we do not rename them casually, so scripts you write today keep working.
Radio Button Example
Three radio buttons sharing a single group name. Selecting one updates the result line — useful for practising click, selection state assertions, and grouped-element collection.
Selected: none
Suggession Class Example
Type at least one letter to reveal a dynamic suggestion list. The options only exist in the DOM after typing, which makes this the standard exercise for explicit waits and dynamic-element handling.
Dropdown Example
A native HTML select element — deliberately not a custom component — so you can practise Selenium's Select class (selectByVisibleText, selectByValue, selectByIndex) and Playwright's selectOption().
Selected: none
Checkbox Example
Three independent checkboxes with a live count. Practise multi-select, isSelected() assertions, and collecting elements by attribute selector.
Checked count: 0
Switch Window Example
Opens a separate browser window via window.open(). Practise capturing window handles, switching to the child window, asserting on it, then switching back to the parent.
Switch Tab Example
An anchor with target="_blank" that opens a new browser tab. Same handle-switching practice as the window example, but triggered by a link rather than window.open().
Switch To Alert Example
Triggers genuine browser alert and confirm dialogs — not custom modals — so you can practise driver.switchTo().alert() and Playwright's dialog handler, including accept vs dismiss.
Last dialog: none
Web Table Example
A standard HTML table of courses and prices. Practise row and column traversal, extracting cell text by index, and asserting on computed values such as the total price.
| Instructor | Course | Price |
|---|---|---|
| Aarav Menon | Selenium WebDriver with Java | $30 |
| Divya Rao | Playwright End-to-End Testing | $35 |
| Kabir Shah | REST API Testing with RestAssured | $25 |
| Meera Nair | Cypress Automation Essentials | $20 |
| Rohan Iyer | Manual Testing Foundations | $0 |
| Sana Qureshi | AI-Assisted Test Automation | $35 |
Web Table Fixed header
A scrollable table whose header stays pinned while the body scrolls. Practise scrolling inside a container, summing a column, and verifying your total against the displayed one.
| Name | Position | City | Amount |
|---|---|---|---|
| Ananya Rao | QA Engineer | Bengaluru | 32 |
| Rohit Malhotra | SDET | Pune | 41 |
| Sneha Iyer | Automation Lead | Chennai | 55 |
| Aditya Verma | DevOps Engineer | Hyderabad | 38 |
| Priya Nair | Data Engineer | Kochi | 44 |
| Karan Mehta | QA Analyst | Mumbai | 29 |
| Divya Sharma | Test Architect | Delhi | 61 |
| Vikram Singh | Performance Tester | Noida | 36 |
Total amount: 336
Mouse Hover Example
A menu that only appears while the trigger is hovered or keyboard-focused. Practise the Actions class in Selenium and hover() in Playwright — a plain click will not reveal it.
iFrame Example
A same-origin iframe embedding a small page. Elements inside a frame are invisible to the driver until you switch into it — practise switchTo().frame() and Playwright's frameLocator().