Scroll to Click

Clicking an element that is not currently visible in the viewport requires scrolling. Sometimes the element itself is inside a scrollable container. Other times a parent container must be scrolled first to bring the child container into view. A robust test must handle all these cases.

Scenario

• Find each target button and click it.
• Some buttons require scrolling the page, some require scrolling a container, and some require scrolling a parent first.
• One button only appears when you hover over its parent element.
• After clicking a button it turns green and shows "Clicked!".
• Click all four buttons to complete the challenge.

Playground

Case 1 — Page Scroll

The button below is placed far down the page so it is out of the initial viewport.

Case 2 — Container Scroll

The button is hidden inside a scrollable container. You need to scroll within the container to reach it.

Case 3 — Nested Scroll (Parent + Child)

The button is inside a nested scrollable structure. First scroll the outer container to reveal the inner one, then scroll the inner container to find the button.

Case 4 — Hover to Reveal

The button below is hidden until you hover over its parent row — similar to action buttons in email clients that only appear on hover.