Skip to content

scrollto.md

Latest commit

 

History

History
181 lines (111 loc) · 4.17 KB

scrollto.md

File metadata and controls

181 lines (111 loc) · 4.17 KB
title scrollTo

Scroll to a specific position.

Syntax

cy.scrollTo(position)
cy.scrollTo(x, y)
cy.scrollTo(position, options)
cy.scrollTo(x, y, options)

// ---or---

.scrollTo(position)
.scrollTo(x, y)
.scrollTo(position, options)
.scrollTo(x, y, options)

Usage

{% fa fa-check-circle green %} Correct Usage

cy.scrollTo(0, 500)                     // Scroll the window 500px down
cy.get('.sidebar').scrollTo('bottom')   // Scroll 'sidebar' to its bottom

{% fa fa-exclamation-triangle red %} Incorrect Usage

cy.title().scrollTo('My App')  // Errors, 'title' does not yield DOM element

Arguments

{% fa fa-angle-right %} position (String)

A specified position to scroll the window or element to. Valid positions are topLeft, top, topRight, left, center, right, bottomLeft, bottom, and bottomRight.

{% imgTag /img/api/coordinates-diagram.jpg "cypress-command-positions-diagram" %}

{% fa fa-angle-right %} x (Number, String)

The distance in pixels from window/element's left or percentage of the window/element's width to scroll to.

{% fa fa-angle-right %} y (Number, String)

The distance in pixels from window/element's top or percentage of the window/element's height to scroll to.

{% fa fa-angle-right %} options (Object)

Pass in an options object to change the default behavior of cy.scrollTo().

Option Default Description
log true {% usage_options log %}
duration 0 Scrolls over the duration (in ms)
easing swing Will scroll with the easing animation
timeout {% url defaultCommandTimeout configuration#Timeouts %} {% usage_options timeout .scrollTo %}

Yields {% helper_icon yields %}

{% yields same_subject cy.scrollTo %}

Examples

Position

Scroll to the bottom of the window

cy.scrollTo('bottom')

Scroll to the center of the list

cy.get('#movies-list').scrollTo('center')

Coordinates

Scroll 500px down the list

cy.get('#infinite-scroll-list').scrollTo(0, 500)

Scroll the window 500px to the right

cy.scrollTo('500px')

Scroll 25% down the element's height

cy.get('.user-photo').scrollTo('0%', '25%')

Options

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

Actionability

cy.scrollTo() is an "action command" that follows all the rules {% url 'defined here' interacting-with-elements %}.

Scopes

cy.scrollTo() acts differently whether it's starting a series of commands or being chained off of an existing.

When starting a series of commands:

This scrolls the window.

cy.scrollTo('bottom')

When chained to an existing series of commands:

This will scroll the <#checkout-items> element.

cy.get('#checkout-items').scrollTo('right')

Snapshots

Snapshots do not reflect scroll behavior

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 {% url .pause() pause %} to walk through each command or {% url 'watching the video of the test run' screenshots-and-videos#Videos %}.

Rules

Requirements {% helper_icon requirements %}

{% requirements scrollability .scrollTo %}

Timeouts {% helper_icon timeout %}

{% timeouts assertions .scrollTo %}

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:

{% imgTag /img/api/scrollto/command-log-scrollto.png "command log for scrollTo" %}

When clicking on scrollTo within the command log, the console outputs the following:

{% imgTag /img/api/scrollto/console-log-scrollto.png "console.log for scrollTo" %}

See also

  • {% url .scrollIntoView() scrollintoview %}