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.