Scrolls a specific element back to its horizontal start. The step takes one required parameter: a CSS selector in double quotes that identifies the scrollable element. The step sets the element's own horizontal scroll position to zero, leaving the page scrollbar and every other container untouched.
Use this for content that scrolls inside its own container: carousels, wide tables wrapped in an overflow container, horizontally scrolling card lists, and similar widgets. The selector must match an element on the page; if it matches nothing the step fails once the locator times out. Only the first matching element is scrolled, so prefer an id or a sufficiently specific selector.
Accepted phrasings
When I scroll to start of "#off-canvas"
When we scroll to start of "#sidebar"
When scrolling to start of "#main-container"The step also works with And as a continuation keyword inside a When block.
Examples
When I scroll to start of "#off-canvas"
And we scroll to start of "#sidebar"
When scrolling to start of "#main-container"In a real scenario
Scenario: The hero slider can be returned to its first slide area
Given I am an anonymous user
When I go to the homepage
And wait
Then the element ".carousel.hero-slider" should be displayed
When I scroll to end of ".carousel-inner"
And I wait 2s
And I scroll to start of ".carousel-inner"
And I wait 2s
Then the element ".carousel-item.active" should be displayed