Skip to main content

​
Overview

The Scroll step scrolls within the page or specific scrollable containers. Use it to reveal content below the fold, navigate through long pages, test infinite scroll, or interact with scrollable modals and panels.

​
When to Use Scroll

Use Scroll when you need to:
  • Reveal hidden content: Scroll down to bring elements into view before interacting with them
  • Test infinite scroll: Verify that scrolling loads more content dynamically
  • Navigate long pages: Move through articles, documentation, or data tables
  • Test horizontal scrolling: Scroll through carousels, timelines, or wide tables
  • Interact with scrollable containers: Scroll within modals, sidebars, or overflow containers

​
How It Works

Scroll finds an element (or the page body) and scrolls it by a specified number of pixels in a chosen direction (up, down, left, right). The scroll is smooth and triggers all the same events real scrolling would, making it work with lazy-loading content and scroll-based triggers.

​
Using the Scroll Step

When you add a Scroll step, you’ll configure:

​
Choose Direction

  • Down: Scroll downward (most common)
  • Up: Scroll upward
  • Right: Scroll to the right (for horizontal content)
  • Left: Scroll to the left

​
Set Distance

Enter the number of pixels to scroll. Common values:
  • 300-500 pixels for moderate scrolling
  • 1000+ pixels for long scrolls
  • Smaller values (100-200) for precise positioning

​
Target the Container

  • Use body to scroll the entire page
  • Use a CSS selector to scroll within a specific container
  • Target scrollable divs, modals, or panels

​
Real-World Examples

​
Scrolling to Reveal Content

Step 1: Navigate
  URL: https://example.com/products

Step 2: Scroll
  Direction: Down
  Pixels: 500
  Locator: body

Step 3: Click
  Locator: button[data-product='laptop-pro']
Why this works: Scroll down to bring a product button into view before clicking it.

​
Testing Infinite Scroll

Step 1: Navigate
  URL: https://example.com/blog

Step 2: Scroll
  Direction: Down
  Pixels: 1000
  Locator: body

Step 3: Wait for Element
  Locator: .loading-spinner

Step 4: Wait for Element
  Locator: .blog-post:nth-child(20)

Step 5: Check Visibility
  Locator: .blog-post:nth-child(20)
  Assertion: Is visible
Why this works: Scroll to trigger infinite scroll loading and verify new content appears.

​
Scrolling Within a Modal

Step 1: Click
  Locator: button[data-action='view-terms']

Step 2: Scroll
  Direction: Down
  Pixels: 800
  Locator: .modal-content

Step 3: Check Visibility
  Locator: button[data-action='accept-terms']
  Assertion: Is visible

Step 4: Click
  Locator: button[data-action='accept-terms']
Why this works: Scroll within a modal to reach the bottom where the accept button is located. 
Step 1: Scroll
  Direction: Right
  Pixels: 400
  Locator: .image-carousel

Step 2: Check Visibility
  Locator: img[alt='Product Image 3']
  Assertion: Is visible
Why this works: Scroll right through a horizontal carousel to view more images.

​
Best Practices

​
Choose the Right Target

  • Use body for page-level scrolling
  • Target specific containers for modals, panels, or scrollable divs
  • Ensure the element is actually scrollable (has overflow content)

​
Pick Appropriate Distances

  • Start with 300-800 pixels for most scenarios
  • Adjust based on your content and viewport size
  • Test on different screen sizes
  • Use multiple smaller scrolls instead of one huge scroll for better control

​
Account for Dynamic Content

  • Add Wait for Element after scrolling if content loads dynamically
  • Allow time for scroll animations to complete
  • Watch for lazy-loaded images or content

​
Verify Scroll Results

Always check that scrolling had the intended effect:
  • Use Check Visibility to verify content appeared
  • Use Click to interact with newly visible elements
  • Check that scroll-triggered events fired correctly

​
Troubleshooting

​
Element Not Scrollable

Symptom: Scroll step runs but nothing happens Solution:
  • Verify the element has scrollable content (content exceeds container size)
  • Check CSS overflow properties (overflow: auto or overflow: scroll)
  • Ensure the element has defined dimensions smaller than its content
  • Try targeting a different container or use body

​
Scroll Distance Issues

Symptom: Scrolls too far or not far enough Solution:
  • Adjust the pixel value based on actual content length
  • Test on different screen sizes and viewports
  • Use browser dev tools to measure actual distances
  • Break large scrolls into multiple smaller steps

​
Content Doesn’t Load

Symptom: Scroll completes but expected content doesn’t appear Solution:
  • Add Wait for Element to wait for lazy-loaded content
  • Check if your app has scroll event throttling or debouncing
  • Verify scroll-triggered events are firing correctly
  • Test manually to confirm the behavior works