Practise filling text, password, email, phone inputs and a textarea, then submitting and resetting a real form.

Practise single click, double click, right click, disabled buttons, a button that enables after 3s, and a self-relabelling button.

Practise toggling checkboxes, a select-all that controls them, radio groups, and a checkbox that reveals hidden text.

Practise standard select, multi-select, a custom div-based dropdown, and a select populated from state.

One element per common locator strategy plus a deeply nested tree for XPath axis practice.

Practise waiting for elements to appear/disappear, text changes, a counter, and dynamically injected content.

Practise explicit waits: a spinner that becomes Loaded, delayed text, an animated progress bar, and a delayed AJAX response.

Practise reading rows, sorting by name, filtering with search, and paginating (page size 3).

Practise handling native JS dialogs: alert, confirm and prompt.

Practise opening a modal, closing via the X or close button, and closing by clicking the overlay.

Practise switching into an iframe context before interacting with the form inside it.

Practise piercing a shadow root: the input and button live inside a custom element's shadow DOM.

Practise native HTML5 drag and drop: drag the source onto the drop zone.

Practise hovering a menu item to reveal a submenu (Actions class hover/move-to-element).

Practise triggering and reading a tooltip that appears on hover.

Practise uploading a file and verifying the selected file name appears.

Practise triggering a file download (practice.txt) and asserting on the downloaded file.

Practise locating elements that are in the DOM but hidden via CSS, and revealing hidden content.

Practise scrolling a far-away element into view before asserting on it.

Practise switching between window/tab handles after opening a new one.

Practise a login flow. Demo credentials: username admin, password admin123.

Practise StaleElementReferenceException: the target node is replaced (new key), so a previously located reference is no longer attached.

Practise adding and removing items and asserting on the changing list length.

Practise waiting through a simulated network delay before the response text appears.

Practise handling flaky outcomes: this button passes or fails roughly 50/50 each run.

Practise sending keys: type here and watch the last key; Arrow Up/Down change the counter. Try Enter, Tab and arrows.

Practise moving a range slider and reading its live value.

Practise selecting a date and asserting the echoed value. Use both the native HTML5 date input and the custom interactive calendar dialog picker.

Practise resizing an element by dragging its bottom-right handle.

Practise advanced XPath axes and CSS combinators on a deeply nested, multi-sibling tree.

Type in the search field to trigger a live suggestions dropdown. Practice waiting for dynamic options and selecting an item from an async list.

Right-click the target area to open a custom context menu. Practice using page.click({ button: 'right' }) and selecting menu options.

Click the copy button to capture the snippet to your clipboard. Practise reading the clipboard with Playwright's page.evaluate() or browser context grants.

Navigate a 3-step form wizard: Personal Info → Account Setup → Review. Practice state validation across multiple steps and Next/Back button interactions.

Use the native color picker to select a colour. Practice automating input[type=color] using Playwright's page.fill() with hex values like #ff6600.

Practise switching between multiple levels of nested iframes. An outer frame contains an inner frame — you must switch context twice to reach the deepest element.

Practise navigating complex table structures: a main data table with an expandable nested inner table per row. Use XPath row indexing and CSS nth-child selectors.

Practise page-level interactions: changing document title, reloading/refresh tracking, and handling multiple pages.

Practise scraping: identify, iterate, and count 100+ unique links on the page.

Practise infinite scrolling: scroll the container to auto-load new items and verify dynamically added DOM elements.

Practise waiting for asynchronous input: the search query triggers matching results after a 500ms pause.

Practise network interception: typing each character fires a separate simulated API request instantly.

Practise switching between tab panels, including a disabled tab that should never become active.

Practise expanding/collapsing accordion panels — multiple panels can be open at the same time.

Practise a checkbox visually rendered as an iOS-style toggle switch — automate it the same way as a checkbox (`.check()`/`.click()`), not by clicking a raw slider pixel.

Practise waiting for a transient toast to appear and auto-dismiss after 3 seconds (or dismiss it manually) — an element that exists only briefly.

Practise cascading selects: choosing a Country repopulates State, which repopulates City. Each downstream select stays disabled until its parent has a value.

Practise a 6-box OTP input: typing a digit auto-advances focus to the next box; Backspace on an empty box moves focus back. Correct demo code is 123456.

Practise a contenteditable-based editor: select text, apply Bold/Italic/Underline formatting, and read back the resulting HTML — a different automation model than a plain input or textarea.

Practise an interactive file-tree: expand/collapse folders, and check a parent node to cascade-select all its children.

A self-contained nav bar that shows full links above a 640px container width, and collapses to a hamburger menu below it. Resize your browser (or use Playwright's setViewportSize) to see it switch.

Practise a click-triggered popover (unlike Section 15's hover-only tooltip): it stays open until you click its own close button, click outside it, or press Escape.