In Playwright POM how do you use page$$ in the constructor to avoid multiple hard coded selectors?

Question

I am trying to follow the page object model using Playwright but I cant find a way to use the page.$$ in the constructor to get the 'menuitem' element/array and then reuse that locator in any functions I create. It looks like the only way to do it is to hard code the menuitem selector path into any functions that may need it (see 'countMenuItems' function below which works). Does anyone have any hints to help me move forwards without having to hard code the a selector each time?

 exports.MainPage = class MainPage extends BasePage {

  constructor(page) {
    super(page);   
    this.relativeurl = "";  
    this.header = page.locator(".topbar"); 
    
    //this does not work
    //this.menuitem = page.$$('.menu-item .menu-item__label');
  }

  async navigate() {
    await super.navigate(this.relativeurl);
  }  

  async countMenuItems(){
    //click menu  
    //this does work
    let items = await this.page.$$('.menu-item .menu-item__label');          
    return items.length
  } 
}

I have just recently moved from using Protractor as my automation tool of choice where this kind of thing was fairly straight forward where you used element.all but struggling a bit with playwright. Any help much appreciated as I would prefer to only have to declare element once in pom.

Answer 1

create locator variables first

 exports.MainPage = class MainPage extends BasePage {
   readonly menuitem: Locator;
 }
constructor(page){
  this.menuitem = page.$$('.menu-item .menu-item__label');
  .....
}

Use locator instead of $$. https://playwright.dev/docs/next/locators

https://playwright.dev/docs/next/api/class-page#page-query-selector

Answer 2

Locators are basically Public Class Fields so I would suggest to declare outside constructor. The core idea is to declare the value once so that if needs to be changed later , can be done only in a single place to keep it DRY.

How about this as below?

     exports.MainPage = class MainPage extends BasePage {
      menuitem ='.menu-item .menu-item__label'
    
      constructor(page) {
        super(page);   
       
      }
    async countMenuItems(){
        let items = await this.page.$$(menuitem);          
        return items.length
      } 
}