SoftwareTestPilot
Free · Element Library

QA Automation Practice Elements — Playwright, Selenium, Cypress

Welcome to the free QA automation testing practice hub from SoftwareTestPilot. Every page below is an isolated, real-world component built for selenium practice, playwright practice, and Cypress drills — dropdowns, dynamic tables, iframes, shadow DOM, file uploads, auth flows and more. Unlike toy demos, each ui automation practice lab ships with stable user-facing locators, a reference script for each framework, an estimated time-to-complete, and (in many cases) a deliberate hidden defect to catch. Use the filters below to focus by category, difficulty, or framework, then click any card to open the dedicated lab page. Bookmark the ones you struggle with and keep coming back — the library is updated regularly with new elements suggested by working QA engineers.

Category
Difficulty
Framework
Showing 12 of 12 elements
  • Inputsbeginner

    Text Input Fields

    Practice text input automation in Playwright, Selenium, and Cypress. Type, clear, and assert on single-line and multi-line text fields with stable, user-facing locators.

    PlaywrightSeleniumCypress
    8 minPractice this element
  • Interactionbeginner

    Buttons & Clicks

    Hands-on button automation practice for Playwright and Selenium — single clicks, double clicks, disabled states, and accessible-name based locators.

    PlaywrightSeleniumCypress
    6 minPractice this element
  • Inputsbeginner

    Checkboxes & Radio Buttons

    Selenium and Playwright practice lab for checkboxes and radio buttons — toggling, asserting checked state, and handling grouped inputs cleanly.

    PlaywrightSeleniumCypress
    7 minPractice this element
  • Inputsbeginner

    Native Dropdown (Select) Element

    Practice dropdown select in Playwright & Selenium — selectOption, selectByVisibleText, and multi-select handling on a native <select> element.

    PlaywrightSeleniumCypress
    8 minPractice this element
  • Interactionintermediate

    Custom (Non-Native) Dropdown

    Automate custom React/Vue dropdowns that aren't real <select> elements. Click-to-open, keyboard navigation, and option assertions in Playwright and Cypress.

    PlaywrightCypress hidden bug
    12 minPractice this element
  • Interactionintermediate

    Drag & Drop

    Drag and drop automation practice in Playwright and Selenium — HTML5 native drag events, source-target dispatch, and assertion of drop targets.

    PlaywrightSelenium
    12 minPractice this element
  • Timingintermediate

    Dynamic Waits & Auto-Waiting

    Practice handling dynamic content and auto-waits in Playwright, Selenium, and Cypress. Replace sleep() with explicit expects and condition-based waits.

    PlaywrightSeleniumCypress hidden bug
    15 minPractice this element
  • Advanced-DOMadvanced

    Iframes & Cross-Frame Content

    Iframe automation practice — switch frames in Selenium, use frameLocator in Playwright, and cy.iframe in Cypress to automate secure payment-style embeds.

    PlaywrightSeleniumCypress
    14 minPractice this element
  • Advanced-DOMadvanced

    Shadow DOM Elements

    Shadow DOM automation practice for Playwright and Selenium — pierce open shadow roots, locate web components, and assert against encapsulated UI.

    PlaywrightSeleniumCypress
    16 minPractice this element
  • Dataintermediate

    Dynamic / Shifting Tables

    Practice automating dynamic tables whose columns and rows re-order on refresh. Anchor by header text and row identity instead of brittle position selectors.

    PlaywrightSeleniumCypress hidden bug
    14 minPractice this element
  • Formsintermediate

    File Upload Inputs

    File upload automation practice in Playwright, Selenium, and Cypress — setInputFiles, hidden inputs, drag-and-drop uploaders, and progress assertions.

    PlaywrightSeleniumCypress
    10 minPractice this element
  • Formsadvanced

    Multi-Step Auth & OTP Flow

    End-to-end auth automation practice — username/password step, six-digit OTP, simulated network verification, and POM-friendly fixture setup.

    PlaywrightSeleniumCypress hidden bug
    18 minPractice this element
FAQ

Frequently asked questions

What is the QA Automation Practice Element Library?
A free collection of isolated UI components — dropdowns, iframes, shadow DOM, dynamic tables, file uploads, auth flows and more — designed for hands-on Playwright, Selenium, and Cypress automation practice.
Is this Selenium and Playwright practice site free?
Yes. All practice elements load instantly in your browser, work without an account, and ship with reference scripts for Playwright, Selenium, and Cypress.
How do I use these UI automation practice labs?
Pick an element, open its page, and copy the starter script for your framework. Each lab includes a target component, common locator strategies, and at least one hidden bug to catch.
Which frameworks are supported?
Playwright (TypeScript), Selenium WebDriver (JavaScript), and Cypress. Manual exploratory steps are provided for every lab too.
Why do some elements have a 🐞 badge?
Those labs contain an intentional defect — a race condition, a silent failure, or a flaky listener. Catching it sharpens the bug-reporting and debugging muscles that real QA jobs hire for.