Scrolls a specific element to its vertical bottom by setting scrollTop = el.scrollHeight on the element matched by the given CSS selector. A scroll event is then dispatched on the element so that listeners - such as virtual scroll implementations - are notified of the position change. This step targets the element's own internal scroll position, not the page window, making it suitable for panels, drawers, modals, and any other independently scrollable container.
A common use case is reaching a "Save" or "Submit" button that sits at the bottom of a long form inside a modal or sidebar. The selector is double-quoted and may be any valid CSS selector. If the element's content does not overflow its height, scrollTop remains at zero and the step has no visible effect but does not fail.
Accepted phrasings
When I scroll to bottom of "#sidebar"
When we scroll to bottom of "#off-canvas"
When scrolling to bottom of "#main-container"
And I scroll to bottom of ".panel--results"Examples
When I scroll to bottom of "#off-canvas"
And we scroll to bottom of "#sidebar"
When scrolling to bottom of "#main-container"
And I scroll to bottom of ".settings-drawer"In a real scenario
Scenario: The save button in the side panel is reachable after filling in options
Given I am a logged in user
When I go to "/layout-builder"
And I open the section settings panel
And I select the "Light" background color
And I scroll to bottom of "#settings-panel"
And I click "Save section"
Then I should see "Section saved"