Scroll

​

Overview

The Scroll step allows you to scroll within specific elements or the entire page. You can control the scroll direction and distance, making it useful for testing long pages, scrollable containers, and pagination scenarios.

​

Form Fields

​

Form Configuration

​

Direction Dropdown

Available scroll directions:

• Down (default) - Scroll downward
• Up - Scroll upward
• Right - Scroll to the right
• Left - Scroll to the left

​

Pixels Field

• Numeric input for scroll distance
• Enter positive numbers (e.g., 500, 1000)
• Larger values scroll further in the specified direction

​

Locator Field

• Text input field for entering CSS selectors
• Supports element picker for visual selection
• Can target specific scrollable containers or use body for page scrolling

​

Examples

​

Scroll Down Page

• Direction: Down
• Pixels: 500
• Locator: body

​

Scroll Up in Container

• Direction: Up
• Pixels: 300
• Locator: .scrollable-container

​

Scroll Right in Carousel

• Direction: Right
• Pixels: 400
• Locator: .image-carousel

​

Scroll Left in Timeline

• Direction: Left
• Pixels: 200
• Locator: [data-testid='timeline']

​

Scroll Down in Modal

• Direction: Down
• Pixels: 600
• Locator: .modal-content

​

Best Practices

​

Locator Selection

• Use body to scroll the entire page
• Target specific scrollable containers with precise selectors
• Ensure the element is actually scrollable (has overflow content)
• Prefer data-testid attributes for better test stability

​

Scroll Distance

• Use moderate scroll distances (300-800 pixels) for most scenarios
• Consider viewport size when determining scroll distance
• Test scroll distances on different screen sizes
• Use smaller increments for precise positioning

​

Direction Strategy

• Down/Up for vertical scrolling (most common)
• Left/Right for horizontal scrolling (carousels, timelines)
• Consider natural scroll direction of your content
• Test both directions if implementing bi-directional scrolling

​

Timing Considerations

• Allow time for scroll animations to complete
• Some content may load dynamically during scrolling
• Consider smooth scrolling behavior in modern browsers

​

Common Issues

​

Element Not Scrollable

• Verify the target element has scrollable content (content exceeds container size)
• Check CSS overflow properties (overflow: auto, overflow: scroll)
• Ensure the element has defined dimensions that are smaller than its content

​

Scroll Distance Problems

• Very large scroll values may exceed content boundaries
• Very small values may not produce visible scrolling
• Test scroll distances based on actual content length

​

Locator Issues

• Verify the locator targets the correct scrollable element
• Some elements may appear scrollable but delegate scrolling to parent containers
• Check for nested scrollable containers

​

Performance Considerations

• Large scroll distances may impact test performance
• Consider breaking large scrolls into smaller increments
• Some applications may have scroll event debouncing

​

Use Cases

​

Page Navigation

• Scroll down to reveal more content
• Navigate through long articles or documentation
• Test infinite scroll implementations

​

Container Scrolling

• Scroll within modals or dialogs
• Navigate through data tables with many rows
• Test sidebar or panel scrolling

​

Horizontal Scrolling

• Navigate image carousels or galleries
• Scroll through horizontal timelines
• Test wide data tables or charts

​

Content Discovery

• Scroll to reveal lazy-loaded content
• Test pagination triggers during scroll
• Navigate through filtered content lists

​

Related Steps

• Wait for Element - For waiting on content that loads during scroll
• Check Visibility - For verifying elements become visible after scroll
• Click - For interacting with elements revealed by scrolling