Scrolling method in CypressIO

Table of content

Scrolling method in CypressIO

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 :

Scrolling method in CypressIO