Asserts that a named subject element is rendered above one or more other named elements, using absolute page coordinates: the assertion passes when the top edge of every target is at or below the bottom edge of the subject. Both the subject and the targets are resolved through the selector registries, so each name must be registered first via Given I define css selectors:, When I add ... css selector, an XPath registration, or a loaded selector JSON file. If a name is unknown, the step fails with a suggestion of the closest registered name.
Both sides accept lists: separate multiple names with commas or the word and. The step then checks every subject against every target (a full cartesian product) and reports all failing pairs at once. Each element is scrolled into view if needed; an element with no bounding box (hidden or detached) fails the assertion with a clear message.
Accepted phrasings
Then I see <subject> above <others>
Then we see <subject> above <others>
Then see <subject> above <others>Examples
Then I see header above footer
Then I see nav above content, footer
Then I see hero above sidebar and footer
Then I see heading, subline above list, footerIn a real scenario
Scenario: The homepage landmarks are stacked in the expected order
Given I define css selectors:
| site header | header.site-header |
| main nav | nav.primary |
| main content | main |
| footer | footer |
Given I am an anonymous user
When I go to the homepage
Then I see visible site header
And I see site header above main nav, main content and footer
And I see main nav above main content