Asserts that a named subject element's bounding box is fully contained within another named element's bounding box: all four edges of the subject must be at or inside the corresponding edges of the container. This is the natural assertion for containment checks such as a logo inside the header, a call-to-action inside a hero banner, or an icon inside a button.
Note that the comparison is purely geometric: it does not require the subject to be a DOM child of the container, and conversely a DOM child that visually overflows its parent will fail. Names are resolved through the selector registries (CSS first, then XPath) and must be registered first. Both sides accept comma or and separated lists, evaluated as a cartesian product with all failing pairs reported together. The inverse assertion is available as outside of, which checks that the subject fully contains the other element.
Accepted phrasings
Then I see <subject> inside of <others>
Then we see <subject> inside of <others>
Then see <subject> inside of <others>Examples
Then I see logo inside of header
Then I see cta inside of hero
Then I see icon inside of button
Then I see content inside of pageIn a real scenario
Scenario: Header children stay within the site header
Given I define css selectors:
| site header | header.site-header |
| logo | header .site-logo |
| main nav | header nav.primary |
Given I am an anonymous user
When I go to the homepage
Then I see visible site header
And I see logo inside of site header
And I see main nav inside of site header
And I see site header outside of logo