Asserts that a named subject element sits entirely to the left of one or more other named elements: the right edge of the subject must not pass the left edge of any target. The word the is optional, so both to the left of and to left of are accepted. This is the go-to assertion for horizontal layout checks such as logo before navigation, label before input, or sidebar before content.
Names are resolved through the per-scenario selector registries (CSS first, then XPath), so they must be registered before use. Both sides accept comma or and separated lists, checked as a full cartesian product with all failures reported at once. Keep in mind that horizontal ordering usually depends on the viewport width: a column layout that holds on desktop may stack on a phone, so pair this step with a breakpoint step like Given I am viewing the site on a xl screen when the layout is responsive.
Accepted phrasings
Then I see <subject> to the left of <others>
Then I see <subject> to left of <others>
Then we see <subject> to the left of <others>
Then see <subject> to left of <others>Examples
Then I see logo to the left of nav
Then I see sidebar to left of content
Then I see label to left of input
Then I see back button to the left of forward buttonIn a real scenario
Scenario: The desktop header lays out logo, nav and search left to right
Given I define css selectors:
| logo | header .site-logo |
| main nav | header nav.primary |
| search | header input[type=search] |
Given I am viewing the site on a xl screen
When I go to the homepage
Then I see visible logo, main nav and search
And I see logo to the left of main nav, search
And I see main nav to the left of search