Jennifer Mann
3.7 KiB
title, comments, description
| title | comments | description |
|---|---|---|
| scrollto | true |
Scroll to a specific position in the window or in the element found in the previous command. The DOM element or window must be in a "scrollable" state prior to the scroll happening.
| Returns | the window or DOM element that was scrolled |
| Timeout | cy.scrollTo will retry for the duration of the defaultCommandTimeout |
cy.scrollTo( position )
Scroll to a specific position in the window or in the element found in the previous command. Valid positions are topLeft, top, topRight, left, center, right, bottomLeft, bottom, and bottomRight.
cy.scrollTo( x, y )
You can pass an x and y coordinate in pixels which will calculate the distance from the top left corner of the element and scroll to the calculated coordinate. The coordinates can be a number or a string with 'px'.
cy.scrollTo( width %, height % )
You can pass a string with the percentage of the element's width and height to scroll to that position.
Options
Pass in an options object to change the default behavior of cy.scrollTo.
cy.scrollTo( position, options ) cy.scrollTo( x, y, options ) cy.scrollTo( width %, height %, options )
| Option | Default | Notes |
|---|---|---|
duration |
0 |
Scrolls over the duration (in ms) |
easing |
swing |
Will scroll with the easing animation |
timeout |
defaultCommandTimeout |
Total time to retry the scroll |
log |
true |
whether to display command in command log |
Position Usage
Scroll to the bottom of the window
cy.scrollTo("bottom")
Scroll to the center of the list
cy.get("#movies-list").scrollTo('center')
Coordinate Usage
Scroll 500px down the list
cy.get("#infinite-scroll-list").scrollTo(0, 500)
Scroll the window 500px to the right
cy.scrollTo("500px")
Percentage Usage
Scroll 25% down the element
cy.get(".user-photo").scrollTo('0%', '25%')
Options Usage
Use linear easing animation to scroll
cy.get(".documentation").scrollTo('top', { easing: 'linear'} )
Scroll to the right over 2000ms
cy.get("#slider").scrollTo('right', { duration: 2000} )
Notes
Snapshots
Cypress does not reflect the accurate scroll positions of any elements within snapshots. If you want to see the actual scrolling behavior in action, we recommend using cy.pause() to walk through each command or watching the video of the test run.
Command Log
Scroll to the bottom of the window then scroll the element to the "right"
cy.scrollTo("bottom")
cy.get("#scrollable-horizontal").scrollTo("right")
The commands above will display in the command log as:
When clicking on scrollTo within the command log, the console outputs the following:
