Table of content

• Abstraction with classes in cypress
• Test Hooks
• Tags in cypress

In cypress, we can also create classes and how to 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 super class and HomePage which is the sub class.
• The super class[BasePage] contains the method static loadHomePage() and static wait(number).static loadHomePage() is used to visit the URL of the page and in the wait() method a parameter named number is passed.
• The subclass HomePage contains two static methods namely scrollToBottom() and scrollToTop() and this method is inherited using the extends keyword.
• Finally the 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 wait(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.wait(5000);
    HomePage.scrollToTop();
    HomePage.wait(3000);
  });
});

Output :

In cypress, we can also decide what test should be performed before all the testcases or before each test case and even after all the test cases or after each of the test cases.There are four types of hooks in cypress namely,

• before(): This hook runs before all tests inside describe block.
• after(): This hook runs after all tests inside describe block.
• beforeEach() : This hook runs before each it block in the describe block.
• afterEach(): This hook runs after each it block in the describe.

Let us understand the hooks with the help of an example.

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 wait(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", () => {
  before(function () {
    //runs before all tests inside describe
    //example:setup the test data or  seed/reset the database
    HomePage.loadHomePage();
  });
  after(function () {
    //runs after all tests inside describe block
    //example: Test cleanup or clean cookies or local storage
    //not used often
    Cypress.Cookies.debug(true);
    // clear cookies again after visiting 
  });
  beforeEach(function () {
    //runs before each it block in the describe
    HomePage.wait(5000);
  });
  afterEach(function () {
    //runs after each it block in the describe
    HomePage.wait(3000);
  });
  it("should scroll down and up the page", () => {
    HomePage.scrollToBottom();
    HomePage.scrollToTop();
  });

Output :

Cypress also provides two types of tags namely .skip and .only.

• .skip is used to skip the particular it block while executing.
• .only is used to execute only the it block in which this tag is present.

Let us learn how to use these tags with the help of a simple example.

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");
  }
  static wait(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", () => {
  before(function () {
    //runs before all tests inside describe
    //example:setup the test data or  seed/reset the database
    HomePage.loadHomePage();
  });
  after(function () {
    //runs after all tests inside describe block
    //example: Test cleanup or clean cookies or local storage
    //not used often
    cy.clearLocalStorage();
    // clear cookies again after visiting to remove
    // any 3rd party cookies picked up such as cloudflare
  });
  beforeEach(function () {
    //runs before each it block in the describe
    HomePage.wait(5000);
  });
  afterEach(function () {
    //runs after each it block in the describe
    HomePage.wait(3000);
  });
  it.skip("should scroll down and up the page", () => {
    HomePage.scrollToBottom();
    HomePage.scrollToTop();
  });
  it.only("2nd IT block", () => {
    HomePage.scrollToBottom();
    HomePage.wait(5000);
    HomePage.scrollToTop();
    HomePage.wait(3000);
  });
  it("3rd IT block", () => {
    HomePage.scrollToBottom();
  });
});

Output :

Recommended Readings

• Hooks and Tags in CypressIO
• Screenshots and videos in CypressIO
• Plugins in CypressIO
• Dashboard services in CypressIO
• Fixtures and $ function in cypress
• Custom commands in Cypress
• Fixtures in Cypress
• Commands in cypress