The Then I see [subject] outside of [other] step asserts that the bounding box of a named element fully contains the bounding box of another named element. Both names must be registered in the CSS or XPath selector registry before this step runs. The step resolves each name, scrolls both elements into view, reads their absolute page coordinates via locator.boundingBox(), and passes only when the subject's top-left corner is at or above and to the left of the other's top-left corner, and the subject's bottom-right corner is at or below and to the right of the other's bottom-right corner.
Multiple subjects and targets can be supplied as comma- or and-separated lists. All pairs are checked and every failure is collected before the step throws, so one error report shows all mismatches at once. This is the logical inverse of inside of: if element A is inside of element B, then element B is outside of element A. Use this step when you want to confirm that a container element visually wraps a child, for example that a page wrapper fully encloses the main content area.
Accepted phrasings
Then I see [subject] outside of [other]
Then we see [subject] outside of [other]
Then see [subject] outside of [other]
Examples
Then I see header outside of logo
Then I see hero outside of cta
Then I see form outside of label
Then we see page outside of content
In a real scenario
Scenario: Page shell wraps all inner regions
Given I define css selectors:
| page | #page-wrapper |
| header | header.site |
| content | main.main-content |
| footer | footer.site |
When I go to "https://example.org/"
Then I see visible page, header, content, footer
And I see page outside of header
And I see page outside of content
And I see page outside of footer