In today’s modern websites, scrolling is no longer just a basic interaction; it has become a vital part of the user experience, especially on pages that load content progressively or contain long, information-rich sections.
Carefully testing scroll behaviour helps ensure that content appears smoothly and users don’t feel lost or interrupted while navigating.
It’s a small detail… but a big key to a seamless experience.

When I scroll

Use this step when you want to simulate a scroll action on the page during your automated testing scenario.
It can be helpful to test lazy-loaded elements, infinite scroll areas, or to simply bring specific elements into view.

These are the scroll steps you can use to control the page movement during testing.

When I scroll down

When I scroll up

When I scroll to top

When I scroll to the bottom

When I scroll down

Scrolls down the page by a fixed or custom number of pixels.

Syntax:

When I scroll down
When I scroll down <number>
When we scroll down <number>
When scrolling down <number>

When I scroll up

Scrolls up the page by a fixed or custom number of pixels.

Syntax:

When I scroll up
When I scroll up <number>
When we scrolling up <number>
When scrolling up <number>

When I scroll to top

Scrolls to the very top of the current page.

Syntax:

When I scroll to top
When I scroll to the top
When scrolling to the top of the page

When I scroll to the bottom

Scrolls to the very bottom of the current page using the full document height.

Syntax:

When I scroll to the bottom
When we scroll to bottom
When scrolling to the bottom of the page

Real Testing Context
Here is a real example of how scroll steps are used in an automated functional acceptance test to verify content appearance while navigating the UNICEF "Changing Childhood" website.

Feature: Check the go to sources page
  As an anonymous user
  I want to be able to visit the home page and navigate to the go to sources section
  So that I can verify the content appears correctly as I scroll
  Scenario: Check validate scroll behaviour and content loading on go to sources page
    Given I am on the homepage
     When I navigate to "/go-to-sources"
     Then I should see "What's your go-to source for news and information?"
     When I press "#rcc-confirm-button" by attribute
      And I scroll down 5400
     Then I should see "The gap is especially wide in generations’ use of social media."
     When I scroll down 3700
     Then I should see "The situation is very different in low-income countries, where many lack internet access. About 21% of young people in these countries say they don’t have a go-to information source at all."
     When I scroll to top
      And I scroll down
      And I scroll to the bottom
      And I scroll up
      And I scroll up 600
     Then I should see "How do you think a reliance on social media platforms"

Watch the recorded video of the robot while running the automated functional testing feature

Display the results in the form of a report 

You can see that all steps have been completed successfully

Conclusion
Scrolling, though a quiet part of the user experience, carries great weight in shaping comfort and impression, and testing it carefully isn’t just a technical task but a way of caring for the little details that make a big difference, because a good digital experience isn’t read all at once, it’s built line by line and scroll by scroll.

And let’s be honest , no one enjoys chasing content that hides as they scroll… like a cheeky game of hide-and-seek! 🙈👀

Learn more about Step Definitions in Webship-js

Visit the documentation site:- https://webship.co/docs