Asserts that a named subject element sits entirely to the right of one or more other named elements: the left edge of the subject must be at or past the right edge of every target. The word the is optional, so both to the right of and to right of work. It is the mirror of the left-of assertion and useful for checking that actions, values, or secondary content appear after their labels or anchors.
All names are resolved through the selector registries (CSS first, then XPath) and must be registered before use; unknown names fail with a did-you-mean suggestion. Both the subject and target sides accept comma or and separated lists, evaluated as a cartesian product with every failing pair listed in one error. Horizontal assertions are viewport sensitive, so lock the breakpoint with Given I am viewing the site on a xl screen when testing responsive layouts.
Accepted phrasings
Then I see <subject> to the right of <others>
Then I see <subject> to right of <others>
Then we see <subject> to the right of <others>
Then see <subject> to right of <others>Examples
Then I see nav to the right of logo
Then I see content to right of sidebar
Then I see search button to the right of search
Then I see username to right of avatarIn a real scenario
Scenario: The search button follows the search box on desktop
Given I define css selectors:
| search | input[type=search] |
| search button | button[type=submit].search |
| logo | header .site-logo |
Given I am viewing the site on a xl screen
When I go to the homepage
Then I see visible search, search button
And I see search button to the right of search
And I see search to the right of logo