All challenges

Every native input type, a form that echoes back what you typed, and native HTML5 validation messages.

A parent/child checkbox tree with indeterminate state and select-all.

A radio group including a disabled option.

Add, edit and delete rows, tick rows by the text in another cell, and sort columns — currency, dates and natural IDs across pages.

Click, double-click and right-click handlers, plus a dynamic-id button.

Simple, dynamic, new-tab, broken and redirecting links — plus a link with no text and one with junk whitespace.

Working vs. intentionally broken <img> sources.

Lazy-loaded images, a responsive srcset image, a figure with caption, and a clickable image map.

Clickable inline SVG icon buttons, an SVG shape, and an animated SVG.

Elements hidden via display:none, visibility:hidden, opacity:0, off-screen — and a button covered by an overlay.

A breadcrumb trail, a simple pager, a paginated data table (page size, ellipsis, jump-to-page, search, sort) and load-more.

Upload a file and see its details; download a generated file.

An id/class that changes, a button enabled after a delay, an input unlocked by clicking another element, a shifting color.

Every Playwright locator (getByRole, getByText, getByLabel, getByTestId, filter, frames, shadow DOM…) and its Cypress equivalent, with snippets that run against the page.

Whitespace and text nodes, pseudo-elements, a comment in the DOM, multi-language text, axes and not(), an XPath quiz and a live locator tester.

A real login flow: validation errors, a locked-after-attempts state, and a success redirect.

One large real-world form: text, radios, checkboxes, dependent dropdowns, tags, file upload, submit summary.

A 3-step form with a progress indicator and per-step validation.

Native alert/confirm/prompt, a timed alert, and small/large modal dialogs.

Open a new tab and a new window from a click.

A single iframe, nested iframes and a cross-origin (sandboxed) iframe to switch context into.

Expand/collapse panels, only one open at a time.

A tabbed panel switcher.

Native select, searchable single-select, and multi-select tag autocomplete.

A calendar date picker and a date-time input.

A range slider with live value, and a start/stop progress bar.

Hover tooltips, a nested dropdown menu, a dropdown that closes on blur, and a right-click context menu.

An on/off toggle switch and a star rating widget.

A 6-box OTP input with auto-advance, and a live password strength meter.

Drag to reorder a list.

Click (and shift/ctrl-click) to multi-select grid items.

A box you can resize, with and without constraints.

Drag a box into an accept zone and a revert zone.

Elements that appear and disappear on click — practice re-querying the DOM.

Captures and displays the last key you pressed.

Drag the puzzle piece to the end to "verify" — a slide-to-unlock pattern.

Elements rendered after a spinner finishes, and a loader that disappears in one second.

A product list that reacts to every kind of server failure — practice page.route and cy.intercept: 500s, slow and timed-out responses, empty lists, broken JSON, dropped connections and checking requests.

Text and images that change every time you refresh the section.

An auto-advancing image carousel with manual controls.

A feed that loads more items as you scroll down.

A horizontally scrolling card gallery.

A mouse-driven canvas drawing pad with a clear button.

An HTML5 video player and an audio player with native controls.

Toast messages that appear and auto-dismiss.

Open, nested and closed shadow roots, closed-inside-open, SVG inside a shadow root, an iframe in a shadow root and shadow roots in an iframe.

A contentEditable WYSIWYG editor with formatting buttons.

A modal that appears shortly after page load, to practice dismissing overlays.

Copy to clipboard, and read/write localStorage, sessionStorage and cookies.

Find 15 planted accessibility problems — axe catches 11, the keyboard finds the rest — then compare with the fixed version. axe-core and keyboard tests for Playwright and Cypress.

Screenshot a product card as a baseline, plant one of 8 visual bugs (a 2px shift, a colour change, a broken image…) and catch it with Playwright or Cypress — including masking, freezing time and thresholds.

What real HTTP Basic Auth needs (and a client-side stand-in you can practice against here).