The Then I see [subject] over [other] step asserts that a named element visually overlaps another element and has an equal or higher computed z-index stacking value. The step resolves both names from the selector registry, reads absolute bounding boxes via locator.boundingBox(), and checks two conditions: the rectangles intersect in both axes, and the subject's computed z-index (walking up the DOM to the nearest positioned ancestor) is less than or equal to the other element's z-index. This captures the common case where a floating or fixed element such as a modal, dropdown, or sticky header appears on top of page content.
Both subjects and targets accept comma- or and-separated lists, producing a cartesian check across all pairs. The step does not wait for the subject to become visible; ensure elements are already rendered before asserting overlap. Note that the z-index comparison uses computed styles rather than CSS property values, so inherited and stacking-context-relative values are respected.
Accepted phrasings
Then I see [subject] over [other]
Then we see [subject] over [other]
Then see [subject] over [other]
Examples
Then I see modal over content
Then I see dropdown over nav
Then I see sticky header over content
Then we see cookie banner over footer
In a real scenario
Scenario: Confirmation dialog appears over the main content area
Given I define css selectors:
| content | main.main-content |
| modal | .dialog-modal |
| overlay | .dialog-overlay |
When I go to "https://example.org/settings"
And I click delete button
Then I see visible modal, overlay
And I see overlay over content
And I see modal over overlay