Then I see "subject" not over "others"

The Then I see [subject] not over [other] step is the negation of the overlap assertion. It passes when the two named elements do not intersect in screen coordinates, or when the subject has a lower z-index stacking value than the other element. This is useful for verifying that a dismissible element has been fully hidden and no longer obscures content, or that two distinct regions of the page do not bleed into each other after a layout change.

The step uses the same geometry engine as the positive over assertion, running a cartesian check across all comma- or and-separated subject and target names. If any pair still overlaps with an equal or higher z-index on the subject side, the step fails and reports all failing pairs together. Register names with Given I define css selectors: or When I add "[name]" selector for "[css]" css selector before this step.

Accepted phrasings

Then I see [subject] not over [other]
Then we see [subject] not over [other]
Then see [subject] not over [other]

Examples

Then I see header not over content
Then I see nav not over sidebar
Then I see footer not over content
Then we see logo not over search

In a real scenario

Scenario: Notification banner dismisses cleanly without overlapping the nav
  Given I define css selectors:
    | nav          | nav.primary-nav   |
    | notification | .notification-bar |
    | content      | main              |
  When I go to "https://example.org/"
  Then I see notification over nav
  When I click dismiss-notification
  Then I don't see notification
  And I see nav not over content

Related steps

Back to Selectors Steps