Scrolling method in CypressIO

In CypressIO, while executing we can scroll the loaded website up and down by grabbing the element or by grabbing the scrollable element[scroll bar] on the webpage. There are two types of commands that are used to perform scroll action. They are,

  • scrollIntoView()
  • scrollTo()

scrollIntoView() method

This method is used to scroll the page to the specific element.

Syntax :

//Should get the CSS of the element and to scroll to that element
cy.get().scrollIntoView();
[OR]
cy.get().scrollIntoView(options)

Options that can be passed in the scrollIntoView() are,

Option Default Description
duration 0 Scrolls over the duration (in ms)
easing swing Will scroll with the easing animation[Easing defines the speed at different points in an animation.]
log true Displays the command in the Command log
offset {top: 0, left:0} Amount to scroll after the element has been scrolled into view
timeout defaultCommandTimeout Time to wait for .scrollIntoView() to resolve before timing out

Example program :

describe("scroll down", () => {
  it("should scroll down and up on page", () => {
    Cypress.on("uncaught:exception", (err, runnable) => {
      // returning false here prevents Cypress from
      // failing the test
      return false;
    });
    cy.visit(
      "https://chercher.tech/protractor/dropdowns-protractor#javascript-method-select"
    );
    cy.wait(3000);
    cy.get("#create-select-class").scrollIntoView();
    cy.wait(3000);
    cy.get("#dropdowns-protractor-select").scrollIntoView();
  });
});

Output video :

Example program with options in the scrollIntoview() :

describe("scroll down and up", () => {
  it("should scroll down and up on page", () => {
    Cypress.on("uncaught:exception", (err, runnable) => {
      // returning false here prevents Cypress from
      // failing the test
      return false;
    });
    cy.visit(
      "https://chercher.tech/protractor/dropdowns-protractor#javascript-method-select"
    );
    cy.wait(3000);
    cy.get("#create-select-class").scrollIntoView({ easing: "swing" });
    cy.wait(3000);
  });
});

Output video :

scrollTo () method

The scrollTo() method is used to 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)
  • x: The distance in pixels from the window/element’s left or percentage of the window/element’s width to scroll.
  • y: The distance in pixels from the window/element’s top or percentage of the window/element’s height to scroll.
  • Position: The positions which can be passed are topLeft, top, topRight, left, center, right, bottomLeft, bottom, and bottomRight.
  • Options that can be used in scrollTo() are,
    Option Default Description
    duration 0 Scrolls over the duration (in ms)
    easing swing Will scroll with the easing animation[Easing defines the speed at different points in an animation.]
    log true Displays the command in the Command log
    offset {top: 0, left:0} Amount to scroll after the element has been scrolled into view
    timeout defaultCommandTimeout Time to wait for .scrollTo() to resolve before timing out

Example program: Scrolling without getting any element by giving the position and the option as arguments.

describe("scroll down and up", () => {
  it("should scroll down and up on page", () => {
    Cypress.on("uncaught:exception", (err, runnable) => {
      // returning false here prevents Cypress from
      // failing the test
      return false;
    });
    cy.visit( "https://chercher.tech/protractor/dropdowns-protractor");
    cy.scrollTo("bottom", { duration: 2000 });
  });
});

Output video :



Example program: Scrolling using X and Y as arguments.

describe("scroll down and up", () => {
  it("should scroll down and up on page", () => {
    Cypress.on("uncaught:exception", (err, runnable) => {
      // returning false here prevents Cypress from
      // failing the test
      return false;
    });
    cy.visit("https://chercher.tech/protractor/dropdowns-protractor");
    //Scroll 2000px down
    cy.scrollTo(0, 2000);
  });
});

Output video :

Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions