Abstraction with classes in CypressIO

In cypress, we can also create classes and share the contents with the help of inheritance. It is an important topic because it is mostly used in the automation framework. Let us understand how to create and inherit classes in cypress with the help of a simple program.

Example program:

  • In this program, there are two classes namely BasePage which is the superclass, and HomePage which is the subclass.
  • The super class[BasePage] contains the method static loadHomePage() and static waitForSomeTime(number).
    • The static loadHomePage() is used to visit the URL of the page
    • The waitForSomeTime() method halts the program for a certain period of time, based on the parameter passed and the parameter is in milliseconds.
  • The subclass HomePage contains two static methods namelyscrollToBottom()andscrollToTop()and these methods are inherited from the BasePage using the extends keyword.
  • The last it block calls the methods present in both the classes.
class BasePage {
  static loadHomePage() {
    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"
    );
  }
  static waitForSomeTime(number) {
    cy.wait(number);
  }
}
class HomePage extends BasePage {
  static scrollToBottom() {
    cy.get("#create-select-class").scrollIntoView();
  }
  static scrollToTop() {
    cy.get("#dropdowns-protractor-select").scrollIntoView();
  }
}
describe("Abstraction with classes", () => {
  it("should scroll down and up the page", () => {
    HomePage.loadHomePage();
    HomePage.scrollToBottom();
    HomePage.waitForSomeTime(5000);
    HomePage.scrollToTop();
    HomePage.waitForSomeTime(3000);
  });
});

Output :

abstraction-with-classes-cypress

Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions