cy.scrollTo() in Cypress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to scroll the page to the bottom using Cypress.

Cypress

cy.scrollTo([1])

Drag options to blanks, or click blank then click option'

A"bottom"

B"top"

C"right"

D"left"

Attempts:

3 left

💡 Hint

Common Mistakes

Using "top" scrolls to the top, not bottom.

Using directions like "left" or "right" scroll horizontally.

Using "bottom" scrolls the page to the bottom.

2fill in blank

medium

Complete the code to scroll the element with id 'content' to the top.

Cypress

cy.get('#content').scrollTo([1])

Drag options to blanks, or click blank then click option'

A"bottom"

B"right"

C"center"

D"top"

Attempts:

3 left

💡 Hint

Common Mistakes

Using "bottom" scrolls to the bottom instead.

Using "center" scrolls to the middle, not top.

The "top" option scrolls the element to its top.

3fill in blank

hard

Fix the error in the code to scroll to the right side of the page.

Cypress

cy.scrollTo([1])

Drag options to blanks, or click blank then click option'

A"bottom"

B"right"

C"left"

D"top"

Attempts:

3 left

💡 Hint

Common Mistakes

Using "left" scrolls to the left side.

Using "bottom" scrolls vertically down.

The correct direction to scroll horizontally to the right is "right".

4fill in blank

hard

Fill both blanks to scroll the element with class 'box' to the center horizontally and vertically.

Cypress

cy.get('.box').scrollTo([1], [2])

Drag options to blanks, or click blank then click option'

A"center"

B"top"

C"left"

D"bottom"

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing "top" or "bottom" with horizontal scroll.

Using different values for horizontal and vertical when centering.

Using "center" for both horizontal and vertical scroll positions centers the element.

5fill in blank

hard

Fill all three blanks to scroll the element with id 'panel' to the bottom right corner smoothly.

Cypress

cy.get('#panel').scrollTo([1], [2], { easing: [3] })

Drag options to blanks, or click blank then click option'

A"right"

B"bottom"

C"linear"

D"top"

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping vertical and horizontal directions.

Using "top" instead of "bottom" for vertical scroll.

Using invalid easing values.

Scroll horizontally to "right", vertically to "bottom", and use "linear" easing for smooth scrolling.