Practice Site · QA Lab
UI Elements Playground.
A standalone playground covering almost every UI element: all input types, range and date/colour pickers, sortable and paginated tables, modals, toasts, tooltips, tabs, accordions, dropdown menus, form validation, file upload, drag-and-drop, dynamic loading, iframes and more. Every control has a stable data-testid — ideal for locator practice and automation in any framework.
On this page15 sections
// WHAT YOU'LL PRACTISE
- Resilient locator strategies (role, label, test id, text)
- Interacting with every input type and picker
- Checkboxes, radios, single and multi-select, datalists
- Sortable, filterable and paginated tables
- Modals, toasts and tooltips
- Tabs, accordions and dropdown menus
- Form validation and error states
- File upload and drag-and-drop
- Dynamic content, spinners and progress bars
- iframes, dynamic IDs and editable content
// WHO THIS IS FOR
// APP MODULES
// PRACTICE MISSIONS
Small, focused tasks to warm up before the full lab.
Automate a custom date picker
Locators, UI automation, assertions
→ Playwright / Cypress / Selenium snippetFilter, sort and paginate the data table
Resilient locators, state assertions
→ Table automation specHandle the modal, toast and tooltip
Async handling, auto-waiting
→ Overlay interaction tests// LOCATOR PRACTICE
For each element: the resilient locator to reach for, the brittle one to avoid, and a one-liner in each framework.
Email input
getByLabel("Email address").form > div:nth-child(2) > inputThe label reflects how a user understands the field and survives layout changes.
- Playwright
page.getByLabel("Email address").fill("a@b.com")- Cypress
cy.findByLabelText("Email address").type("a@b.com")- Selenium
driver.findElement(By.cssSelector("[aria-label='Email address']"))
Submit button
getByRole("button", { name: "Submit" }).btn.btn-primary.mt-4Role + accessible name target the button by what it does, not its utility classes.
- Playwright
page.getByRole("button", { name: "Submit" }).click()- Cypress
cy.findByRole("button", { name: "Submit" }).click()- Selenium
driver.findElement(By.xpath("//button[normalize-space()='Submit']"))
Table row by content
getByRole("row").filter({ hasText: "Jordan Lee" })table tr:nth-child(3)Row index breaks on sort, filter or paginate; matching content is stable.
- Playwright
page.getByRole("row", { name: /Jordan Lee/ })- Cypress
cy.contains("tr", "Jordan Lee")- Selenium
driver.findElement(By.xpath("//tr[td[text()='Jordan Lee']]"))
Dynamic-id element
[data-testid="status-line"]#field-8f3a1cThe generated id changes every render; the test id is stable by contract.
- Playwright
page.getByTestId("status-line")- Cypress
cy.get("[data-testid=status-line]")- Selenium
driver.findElement(By.cssSelector("[data-testid='status-line']"))
Checkbox
getByRole("checkbox", { name: "Subscribe" })input[type=checkbox]A bare type selector matches every checkbox; role + name targets the right one.
- Playwright
page.getByRole("checkbox", { name: "Subscribe" }).check()- Cypress
cy.findByRole("checkbox", { name: "Subscribe" }).check()- Selenium
driver.findElement(By.xpath("//label[contains(.,'Subscribe')]/input"))
Button inside an iframe
frameLocator("#demo-frame").getByRole("button")document.querySelector("button")Iframe content needs an explicit frame context; a top-level query never sees it.
- Playwright
page.frameLocator("#demo-frame").getByRole("button", { name: "Go" }).click()- Cypress
cy.iframe("#demo-frame").findByRole("button", { name: "Go" }).click()- Selenium
driver.switchTo().frame("demo-frame"); driver.findElement(By.tagName("button"))
// TEST SCENARIOS
Locator practice
- Target inputs by label, role and data-testid — compare which survive change.
- Locate a table row by its content, not its index.
- Assert the dynamic-id element via its stable data-testid (not the id).
- Reach the button inside the iframe.
Interaction practice
- Fill every input type and read the echo output.
- Select checkboxes, a radio, a single and a multi-select; assert the state line.
- Drag the range slider and assert its value.
- Sort the table, filter it, and page through results.
Async & overlays
- Click Load and wait for the content without a fixed sleep.
- Open the modal and close it with Escape.
- Trigger the toast and assert it appears, then auto-dismisses.
- Hover the tooltip trigger and assert the tooltip is visible.
// REGRESSION CHECKLIST
The checks that would catch every seeded bug — reveal once you've done your own pass.
- Every control is reachable by a stable role / label / test id
- Async content is awaited, never slept on
- Table sort, filter and pagination assert real state
- Overlays (modal / toast / tooltip) open and dismiss correctly
// MANUAL & AUTOMATION TASKS
Manual testing tasks
- Walk every section and note how each element behaves.
- Record the most reliable locator for each control.
- Try keyboard-only interaction across the widgets.
Automation tasks
- Write a test that fills and submits the validation form.
- Automate the table: filter, sort and paginate with assertions.
- Automate the modal open/close and the toast appearance.
- Automate file upload (single and multiple) and the drag-and-drop zone.
- Handle the iframe and assert the button inside it.
- Add all of the above to CI.
// INTERVIEW MODE
Reflection questions to rehearse how you'd talk through testing this app.
// WHAT YOU'LL PRODUCE
// SUGGESTED TOOLS
// AUTOMATION STARTERS
Fork a ready-made framework to automate this app — each sample ships with setup, CI and reporting.
// PORTFOLIO WRITE-UP
Use this as a starting point for your CV, LinkedIn or portfolio — swap in the tools and findings that are actually yours.
I practised automation against a UI elements playground covering inputs, pickers, tables, overlays, navigation widgets, file upload, drag-and-drop and dynamic content. I wrote resilient locators and assertions for each, handled async behaviour and iframes, and ran the suite in CI.
// NEXT RECOMMENDED APP
Buggy Web App
Find, report and retest realistic bugs in a deliberately buggy task-management app — sharpen exploratory testing, bug reporting and regression skills.