cy.scrollTo() in Cypress - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does cy.scrollTo() do in Cypress?

cy.scrollTo() scrolls the page or an element to a specific position.

It helps test how content behaves when scrolled.

beginner

How do you scroll to the bottom of the page using cy.scrollTo()?

Use cy.scrollTo('bottom') to scroll to the bottom.

intermediate

What are some position options you can pass to cy.scrollTo()?

You can use positions like 'top', 'bottom', 'left', 'right', or coordinates like { left: 0, top: 100 }.

intermediate

Can cy.scrollTo() scroll a specific element instead of the whole page?

Yes! You can chain it to an element like cy.get('selector').scrollTo('bottom') to scroll that element.

beginner

Why is scrolling important to test in web applications?

Scrolling tests check if content loads or behaves correctly when users scroll, like lazy loading or sticky headers.

What does cy.scrollTo('top') do?

A Scrolls to the top of the page or element

B Scrolls to the bottom of the page

C Scrolls to the left side

D Scrolls to the right side

cy.scrollTo('top') moves the scroll position to the top.

How do you scroll an element with selector .container to the bottom?

A cy.scrollTo('bottom', '.container')

B cy.scrollTo('.container', 'bottom')

C cy.get('.container').scrollTo('bottom')

D cy.get('.container').scroll('bottom')

You first get the element, then call scrollTo on it.

Which of these is a valid coordinate to scroll to using cy.scrollTo()?

A [100, 200]

B 100, 200

C (100, 200)

D { left: 100, top: 200 }

Coordinates must be passed as an object with left and top keys.

What happens if you call cy.scrollTo() without arguments?

A Throws an error

B Scrolls to the bottom-right corner

C Scrolls to the top-left corner

D Does nothing

Position is a required argument for cy.scrollTo(); calling without it throws an error.

Why might you want to use cy.scrollTo() in a test?

A To change the URL

B To check if elements appear when scrolled into view

C To click buttons faster

D To reload the page

Scrolling helps test dynamic content or visibility triggered by scrolling.

Explain how to use cy.scrollTo() to scroll a specific element to a certain position.

Think about chaining commands in Cypress.

Describe why testing scrolling behavior is important in web applications.

Consider what users see when they scroll.