cy.scrollTo() in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the effect of this Cypress command?

Consider the following Cypress test code snippet:

cy.get('#content').scrollTo('bottom')

What will this command do during test execution?

Cypress

cy.get('#content').scrollTo('bottom')

A Scrolls the element with id 'content' to its bottom edge.

B Scrolls the entire page to the bottom regardless of the element.

C Scrolls the element with id 'content' to the top edge.

D Throws an error because 'bottom' is not a valid argument.

💡 Hint

Think about what element is targeted and what 'bottom' means in scrolling context.

The command targets the element with id 'content' and scrolls it to its bottom edge. It does not scroll the whole page. 'bottom' is a valid position argument for cy.scrollTo().

❓ assertion

intermediate

Which assertion correctly verifies the scroll position after cy.scrollTo()?

After executing cy.get('#box').scrollTo(0, 100), which assertion correctly checks that the vertical scroll position is 100 pixels?

Cypress

cy.get('#box').scrollTo(0, 100)

A cy.get('#box').should('have.css', 'scrollTop', '100px')

B cy.get('#box').should('have.value', 100)

C cy.get('#box').should('have.attr', 'scrollTop', '100')

D cy.get('#box').should('have.prop', 'scrollTop', 100)

💡 Hint

Scroll position is a property, not a CSS style or attribute.

The scrollTop property holds the vertical scroll position as a number. Using 'have.prop' with 'scrollTop' and value 100 correctly asserts the scroll position.

🔧 Debug

advanced

Why does this scrollTo command fail to scroll?

Given the code:

cy.get('.scrollable').scrollTo('right')

The element does not scroll. What is the most likely reason?

Cypress

cy.get('.scrollable').scrollTo('right')

A The element selector '.scrollable' is incorrect and matches no elements.

B The 'right' argument is invalid; it should be 'end'.

C The element has no horizontal scrollbar because content width fits inside the container.

D cy.scrollTo() only works on the window object, not elements.

💡 Hint

Check if the element can actually scroll horizontally.

If the content inside the element fits within its width, no horizontal scrollbar appears, so scrolling to 'right' has no effect.

🧠 Conceptual

advanced

What is the difference between cy.scrollTo('top') and cy.scrollTo(0, 0)?

In Cypress, what is the difference between these two commands?

cy.scrollTo('top')

and

cy.scrollTo(0, 0)

A 'top' scrolls vertically only; (0,0) scrolls horizontally and vertically to top-left corner.

B 'top' scrolls the page; (0,0) scrolls the element.

C 'top' is invalid and causes error; (0,0) is the correct way to scroll to top.

D 'top' scrolls to the top edge; (0,0) scrolls to the top-left corner. Both are equivalent.

💡 Hint

Consider horizontal and vertical scroll axes.

'top' scrolls vertically to the top but keeps horizontal scroll unchanged. (0,0) scrolls both horizontally and vertically to the top-left corner.

❓ framework

expert

How to ensure cy.scrollTo() waits for smooth scrolling to finish before next command?

You want to scroll an element smoothly and then perform assertions only after scrolling finishes. Which approach ensures Cypress waits correctly?

A Use cy.scrollTo('bottom', { easing: 'linear' }) and immediately run assertions after.

B Use cy.scrollTo('bottom', { duration: 1000 }) and chain .then() to run assertions after scrolling.

C Use cy.scrollTo('bottom') without options; Cypress always waits for scrolling to finish.

D Use cy.scrollTo('bottom', { duration: 1000 }) and add cy.wait(1000) before assertions.

💡 Hint

Think about how Cypress handles commands with duration and chaining.

When using duration option, Cypress waits for the scroll animation to finish before continuing. Chaining .then() ensures assertions run after scrolling completes.