Element Steps

Element interactions: focus, scroll into view, dispatch events, count, position. The atoms for fine grained UI verification.

Step phrasings in this group

The book sidebar lists each individual step page under this group.

Then the element "#footer" should appear after the element "#main"

Assert element A is positioned vertically below element B (greater Y).

Then the text "Sign in" should appear after the text "Welcome"

Assert text A appears after text B in the document body's text order.

Then the element "a" with the attribute "href" and the value "/about" should exist

Assert at least one element matching <selector>[<attr>="<value>"] exists.

Then the element "a" with the attribute "href" and the value containing "/about" should exist

Assert at least one element with attribute value containing a substring exists.

Then the element "a" with the attribute "href" and the value "/admin" should not exist

Assert NO element matches <selector>[<attr>="<value>"].

Then the element "a" with the attribute "href" and the value containing "/old" should not exist

Assert NO element has attribute value containing a substring.

Then the element "#header" should be at the top of the viewport

Assert an element is positioned within the top 100 px of the viewport.

Then the element ".hero" should be centered in the viewport

Assert an element is horizontally centered in the viewport (±10% tolerance).

When I click on the element "#sign-in"

Click an element addressed by CSS selector.

When I trigger the JS event "click" on the element "#cta"

Dispatch a synthetic JavaScript event on a CSS-addressed element.

When I scroll to the element "#footer"

Scroll a CSS-addressed element into view (uses Playwright's auto-scroll).

When I hover over the element ".tooltip-trigger"

Hover the mouse pointer over a CSS-addressed element.

When I focus on the element "#email"

Move keyboard focus to a CSS-addressed element.

Then the element "#dashboard" should be displayed

Wait for a CSS-addressed element to become visible (display !== none, etc.).

Then the element "#loading-spinner" should not be displayed

Assert a CSS-addressed element is hidden or absent.

Then the element "#hero" should be displayed within a viewport

Assert an element is fully inside the current viewport rectangle.

Then the element "#hero" should be displayed within a viewport with a top offset of 60 pixels

Assert an element is fully inside the viewport, allowing a top offset.

Then the element "#footer" should not be displayed within a viewport with a top offset of 60 pixels

Assert an element is NOT inside the viewport (top-offset variant).

Then the element "#footer" should not be displayed within a viewport

Assert an element is NOT inside the viewport rectangle.