Scroll

​

Overview

​

Form Fields

​

Form Configuration

​

Direction Dropdown

• 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