Extending current class with class containing locators of reusable components in playwright

Question

I have a Class A (page object model) of page A. I have a Class B (page object model) of page B and so on...

I have another Class R that doesn't belong a specific page but it has list of locators to some of the reusable components of my application.

I have two questions to ask:

1. Will it be a good practice to say extend Class A or Class B with Class R and reuse the locators in Class R if required for the purpose of reusability? If yes do you suggest exposing getters in Class R for exposing it's locators? If no can you suggest the best practice?

2. Suppose in Class R there are locators related to a modals. Locators like title of modal, content of the modal and buttons in the modals. Now any page that have an action that opens up a modal would need these locators to ensure that the modal elements are visible. So instead of every class inheriting Class R and itself making those assertions(which is repeating set of assertions in every class file inheriting Class R for modal assertions) with the help of inherited locators of the modal from Class R. If I create a method in Class R say modalBasicValidations() to do these basic checks and expose it, then every inheriting class can then use it. Is it a good practice? Any suggestions feedback thoughts?

Any other thoughts or any suggestions on best practices, any references etc.

@VishalAggarwal if possible could you please share some reference that I can see to see the pattern of such test — utkarsh-k, Aug 23 '23 at 18:55
https://en.m.wikipedia.org/wiki/Composition_over_inheritance#:~:text=Composition%20over%20inheritance%20(or%20composite,from%20a%20base%20or%20parent — Vishal Aggarwal, Aug 23 '23 at 19:00

score 0 · Answer 1 · answered Aug 24 '23 at 02:42

Prefer composition over inheritance

Composition is preferred over inheritance because it is more flexible and easier to modify and we can avoid over tangled and complex inheritance hierarchies.

A simple generic (selenium) example where page classes contain an object of component class. In this way we can build stronger encapsulation than inheritance with greater flexibility to modify later.

Composition also promotes smaller, more focused classes and smaller inheritance hierarchies.

class HomePage {
  constructor(driver) {
    this.driver = driver;
    this.uiComponents = new CommonUIComponents(driver);
  }

  performHomePageActions() {
    this.uiComponents.selectFromListBox("#categoryList", "Books");
    this.uiComponents.checkCheckbox("#promoCheckbox");
    // Other page-specific actions...
  }
}

class ContactPage {
  constructor(driver) {
    this.driver = driver;
    this.uiComponents = new CommonUIComponents(driver);
  }

  performContactPageActions() {
    this.uiComponents.selectFromListBox("#countryList", "United States");
    this.uiComponents.checkCheckbox("#subscribeCheckbox");
    // Other page-specific actions...
  }
}

Extending current class with class containing locators of reusable components in playwright

1 Answers1

Prefer composition over inheritance