Modeling a page Containing Different Tabs.

We just model the entire page, with all fields, and we click on the tab (if we're not already on that tab) before we set each field. Our tabs are independent though, i.e. you don't need to complete tab1 before moving on to tab2

that said, we generate our page object models so we don't need to manually write the code for clicking on the tab before filling out the field

In our case, there is a page object model and then the tabs are like components that you intialize in that page object. Something like this:

export class SomePage {
  readonly firstTab = new OneTab(this.page)
  readonly secondTab = new SecondTab(this.page)
  ...locators that are in page but not in tabs

  constructor(private readonly page: Page) {}
}

export class FirstTab {
  ...locators

  constructor(private readonly page: Page) {}
}

@tphillips8117 thanks for your input. but you know the challenge that I'm facing is that each tab contains a lot of information and at some point it will become chaotic, modelling the entire page's locators in only one POM.

@skorp32 thanks for your input. I've been thinking to the same approach. If I'm not mistaken about your explanation. I should have all tabs' POM already implemented aside?

up to you, could be aside, could be in separate files I actually put them in separate files

Yeah, In a separate files is more practical.

But how are you going to passe this.page to your tabs readonly firstTab =new OneTab(this.page) in typescript

whereas they are not inside of your constructor() function yet?

constructor(private readonly page: Page)

don't need to put in constructor body

once it is transpiled to js, it makes sense and typescript doesn't complain