cy.scrollTo() in Cypress - Framework Patterns

Framework Mode - cy.scrollTo()

Folder Structure of a Cypress Test Project

  cypress/
  ├── e2e/                 # Test specs
  │   ├── scroll.spec.js   # Tests using cy.scrollTo()
  │   └── otherTests.spec.js
  ├── fixtures/            # Test data files (JSON)
  │   └── example.json
  ├── support/             # Custom commands and reusable code
  │   ├── commands.js      # Custom Cypress commands
  │   └── e2e.js           # Global setup for tests
  ├── videos/              # Test run videos (auto-generated)
  └── screenshots/         # Screenshots on test failure
  cypress.config.js        # Cypress configuration file
  package.json             # Project dependencies and scripts
  

Test Framework Layers

• Test Specs (cypress/e2e/): Contains test files where cy.scrollTo() is used to scroll elements or the page during tests.
• Support Layer (cypress/support/): Holds reusable commands and setup code. You can add custom scroll commands here if needed.
• Fixtures (cypress/fixtures/): Stores test data like JSON files to drive data-driven tests.
• Configuration (cypress.config.js): Defines environment settings, base URLs, browser options.
• Reports & Artifacts: Videos and screenshots saved automatically during test runs.

Configuration Patterns

Use cypress.config.js to manage environments and browser settings.

  import { defineConfig } from 'cypress'

  export default defineConfig({
    e2e: {
      baseUrl: 'https://example.com',
      env: {
        username: 'testuser',
        password: 'testpass'
      },
      setupNodeEvents(on, config) {
        // event listeners
      },
      viewportWidth: 1280,
      viewportHeight: 720
    }
  })
  

Access environment variables in tests with Cypress.env('username').

To test scrolling on different browsers, run Cypress with the desired browser flag.

Test Reporting and CI/CD Integration

• Use built-in Cypress Dashboard or third-party reporters (like Mochawesome) for detailed reports.
• Configure cypress.config.js to save screenshots and videos on failures automatically.
• Integrate Cypress tests into CI/CD pipelines (GitHub Actions, Jenkins, GitLab CI) to run tests on every code push.
• Example: Run npx cypress run --browser chrome in CI to test scrolling behavior in Chrome.

Best Practices for Using cy.scrollTo() in Cypress Framework

• Use explicit selectors: Always target specific elements for scrolling to avoid flaky tests.
• Wait for elements: Ensure elements are visible or loaded before scrolling to them.
• Use custom commands: Wrap common scroll actions in reusable commands in cypress/support/commands.js.
• Test on multiple viewports: Verify scrolling works on different screen sizes using Cypress viewport commands.
• Keep tests independent: Each test should scroll only what it needs to avoid side effects.

Self Check Question

Where would you add a new custom command that scrolls smoothly to the bottom of a page in this Cypress framework structure?

Key Result

Organize Cypress tests with clear folder layers, config for environments, reusable commands, and integrated reporting for reliable scroll testing.

Practice

1. What is the main purpose of cy.scrollTo() in Cypress testing?

easy

A. To move the page view to a specific position for testing elements

B. To click on a button automatically

C. To wait for an element to appear

D. To type text into an input field

Solution

1. Step 1: Understand the function's role

   cy.scrollTo() is used to scroll the page to a certain position.

2. Step 2: Identify its testing use

   This helps test elements that only appear after scrolling.

3. Final Answer:

   To move the page view to a specific position for testing elements -> Option A

4. Quick Check:

   Scroll page = Move view [OK]

Hint: Think: scrolling moves the page view to test hidden elements [OK]

Common Mistakes:

• Confusing scrollTo with click or type commands
• Thinking scrollTo waits for elements
• Assuming scrollTo changes element state

2. Which of the following is the correct syntax to scroll to the bottom of the page using cy.scrollTo()?

easy

A. cy.scrollTo('down')

B. cy.scrollTo('bottom')

C. cy.scrollTo('end')

D. cy.scrollTo('bottomRight')

Solution

1. Step 1: Recall valid position names

   Valid positions include 'top', 'bottom', 'left', 'right', etc. 'bottom' scrolls to the page bottom.

2. Step 2: Check each option

   'down' and 'end' are invalid; 'bottomRight' is a valid position in Cypress.

3. Final Answer:

   cy.scrollTo('bottomRight') -> Option D

4. Quick Check:

   Scroll bottomRight = 'bottomRight' [OK]

Hint: Use standard position names like 'top', 'bottom', or 'bottomRight' in quotes [OK]

Common Mistakes:

• Using invalid position names like 'down' or 'end'
• Forgetting quotes around position strings
• Trying to use combined positions incorrectly

3. Given the code snippet:

cy.scrollTo(0, 500);
cy.get('#footer').should('be.visible');

What does cy.scrollTo(0, 500) do before checking the footer visibility?

medium

A. Scrolls to the top-left corner

B. Scrolls horizontally 500px and vertically 0px down

C. Scrolls horizontally 0px and vertically 500px down

D. Scrolls to the bottom of the page

Solution

1. Step 1: Understand scrollTo(x, y) parameters

   The first number is horizontal (x), second is vertical (y) scroll in pixels.

2. Step 2: Apply values from code

   Here, x=0 means no horizontal scroll, y=500 means scroll down 500 pixels vertically.

3. Final Answer:

   Scrolls horizontally 0px and vertically 500px down -> Option C

4. Quick Check:

   scrollTo(x=0, y=500) = vertical 500px down [OK]

Hint: First number is horizontal, second is vertical pixels [OK]

Common Mistakes:

• Mixing up x and y values
• Assuming scrollTo scrolls to bottom automatically
• Thinking scrollTo(0, 500) scrolls horizontally

4. Identify the error in this Cypress code:

cy.scrollTo(bottom);
cy.get('.menu').should('be.visible');

medium

A. Missing quotes around 'bottom' in scrollTo argument

B. Incorrect selector '.menu' used

C. Missing semicolon after scrollTo

D. scrollTo cannot be used before get()

Solution

1. Step 1: Check scrollTo argument syntax

   Position names like 'bottom' must be strings in quotes.

2. Step 2: Verify other code parts

   Selector '.menu' is valid, semicolons are optional in JS, and scrollTo can be used before get().

3. Final Answer:

   Missing quotes around 'bottom' in scrollTo argument -> Option A

4. Quick Check:

   Position names need quotes [OK]

Hint: Always put position names in quotes in scrollTo() [OK]

Common Mistakes:

• Forgetting quotes around position strings
• Thinking semicolons are mandatory
• Assuming scrollTo must come after get()

5. You want to scroll smoothly to the top-right corner of a page and then check if a button with id #submit is visible. Which of the following code snippets correctly achieves this?

hard

A. cy.scrollTo('topRight', 1000); cy.get('#submit').should('be.visible');

B. cy.scrollTo('topRight', { duration: 1000 }); cy.get('#submit').should('be.visible');

C. cy.scrollTo({ x: 'top', y: 'right' }, { smooth: true }); cy.get('#submit').should('be.visible');

D. cy.scrollTo('top', 'right', { smooth: true }); cy.get('#submit').should('be.visible');

Solution

1. Step 1: Understand correct scrollTo syntax for smooth scroll

   Use position string like 'topRight' and options object with duration for animation.

2. Step 2: Evaluate each option

   A uses correct syntax with position string and options object. B passes duration as second argument incorrectly. C uses invalid x/y strings and option name. D passes multiple strings incorrectly.

3. Final Answer:

   cy.scrollTo('topRight', { duration: 1000 }); cy.get('#submit').should('be.visible'); -> Option B

4. Quick Check:

   Position string + options object = correct [OK]

Hint: Use position string and options object for smooth scroll [OK]

Common Mistakes:

• Passing duration as a separate argument instead of options object
• Using multiple position strings instead of one combined string
• Using invalid option names like 'smooth'