Can I extend a class object property without having to redeclare them re-assign values in TS

40 Views Asked by At

Using the page object model in playwright w/TypeScipt , I am building page objects for similar pages with forms that share some elements but have different inputs than each other.

I have created a base page with a form object that has some basic elements, title, save button, cancel button etc. and I want to use this object property extended into the other pages and add to them.

class BasePage{
  pageTitle: Locator
  addButton: Locator
  table: Locator

  form: {
    title: Locator
    saveButton: Locator
    cancelButton: Locator
  }
  constructor(page: Page, context: BrowserContext) {
    super(page, context)
    this.pageTitle = page.locator('h1:not([class])')
    this.addButton = page.getByLabel('Add Product')
    this_table = page.locator('table')


    this.form = {
      title: page.locator('h5'),
      saveButton: page.getByRole('button', { name: 'submit-button' }),
      cancelButton: page.getByRole('button', { name: 'cancel-button' }),
    }
  }
}

I want to be able to utilizes the form object properties and extend then in another page class that extend the BasePage class but not have to redeclare the properties or values like so:

class PageOne extends BasePage{
// v I want to extend and use all the object properties without re-declaring & re-assigning the same values v
  form: { 
    //? extended properties from Base Page
    nameInput: Locator
    ageInput: Locator
  }
  constructor(page: Page, context: BrowserContext) {
    super(page, context)
    this._form = {
      //? values assigned from Base Page
      nameInput: page.getByLabel('Name'),
      ageInput: page.getByLabel('Age'),
    }
  }
}

When I try to access the Pages form properties, it will only show the ones I have declared in the PageOne class only. I would like to avoid redeclaring theses properties in each page that uses the BasePage if I can help it.

0

There are 0 best solutions below