feat(testing): Refactored Page object model

packages/nc-gui/components/smartsheet/Grid.vue

@@ -460,7 +460,7 @@ watch(
 </script>
 
 <template>
-  <div class="relative flex flex-col h-full min-h-0 w-full">
+  <div class="relative flex flex-col h-full min-h-0 w-full" pw-data="grid-load-spinner">
     <general-overlay :model-value="isLoading" inline transition class="!bg-opacity-15">
       <div class="flex items-center justify-center h-full w-full !bg-white !bg-opacity-85 z-1000">
         <a-spin size="large" />

scripts/playwright/pages/Base.ts

@@ -1,19 +1,20 @@
-// playwright-dev-page.ts
-import { Page, expect } from '@playwright/test';
+import { Page, expect, Locator } from "@playwright/test";
 
-export class BasePage {
-  readonly page: Page;
+export default abstract class BasePage {
+  readonly rootPage: Page;
 
-  constructor(page: Page) {
-    this.page = page;
+  abstract get(args: any): Locator;
+
+  constructor(rootPage: Page) {
+    this.rootPage = rootPage;
   }
 
-  async toastWait({message}: {message: string}) {
+  async toastWait ({message}: {message: string}){
     // const toast = await this.page.locator('.ant-message .ant-message-notice-content', {hasText: message}).last();
     // await toast.waitFor({state: 'visible'});
-
+  
     // todo: text of toastr shows old one in the test assertion
-    await this.page.locator('.ant-message .ant-message-notice-content', {hasText: message}).last().textContent()
+    await this.rootPage.locator('.ant-message .ant-message-notice-content', {hasText: message}).last().textContent()
       .then((text) => expect(text).toContain(message));
   }
 }

scripts/playwright/pages/Dashboard/ExpandedForm/index.ts

@@ -0,0 +1,32 @@
+// playwright-dev-page.ts
+import {  Locator } from '@playwright/test';
+import BasePage from '../../Base';
+import { DashboardPage } from '..';
+
+export class ExpandedFormPage extends BasePage {
+  readonly dashboard: DashboardPage;
+  readonly addNewTableButton: Locator;
+
+  constructor(dashboard: DashboardPage) {
+    super(dashboard.rootPage);
+    this.dashboard = dashboard;
+    this.addNewTableButton = this.dashboard.get().locator('.nc-add-new-table');
+  }
+
+  get() {
+    return this.dashboard.get().locator(`.nc-drawer-expanded-form`);
+  }
+
+  async fillField({columnTitle, value}: {columnTitle: string, value: string}) {
+    const field = this.get().locator(`[pw-data="nc-expand-col-${columnTitle}"]`);
+    await field.locator('input').fill(value);
+  }
+  
+  async save() {
+    await this.get().locator('button:has-text("Save Row")').click();
+    await this.get().press('Escape');
+    await this.get().waitFor({state: 'hidden'});
+    await this.toastWait({message: `updated successfully.`});
+    await this.get().locator('[pw-data="grid-load-spinner"]').waitFor({ state: 'hidden' });
+  }
+}

scripts/playwright/pages/Dashboard/Grid/Cell/SelectOptionCell.ts

@@ -1,20 +1,27 @@
 import { expect } from "@playwright/test";
 import { CellPageObject } from ".";
+import BasePage from "../../../Base";
 
-export class SelectOptionCellPageObject {
+export class SelectOptionCellPageObject extends BasePage {
   readonly cell: CellPageObject;
+
   constructor(cell: CellPageObject) {
+    super(cell.rootPage);
     this.cell = cell;
   }
 
+  get({index, columnHeader}: {index: number, columnHeader: string}) {
+    return this.cell.get({index, columnHeader});
+  }
+
   async select({index, columnHeader, option, multiSelect}: {index: number, columnHeader: string, option: string, multiSelect?: boolean}) {
-    await this.cell.get({index, columnHeader}).click();
+    await this.get({index, columnHeader}).click();
 
-    await this.cell.page.locator(`[pw-data="select-option-${columnHeader}-${index}"]`, {hasText: option}).click();
+    await this.rootPage.locator(`[pw-data="select-option-${columnHeader}-${index}"]`, {hasText: option}).click();
 
-    if(multiSelect) await this.cell.get({index, columnHeader}).click();
+    if(multiSelect) await this.get({index, columnHeader}).click();
 
-    await this.cell.page.locator(`[pw-data="select-option-${columnHeader}-${index}"]`, {hasText: option}).waitFor({state: 'hidden'});
+    await this.rootPage.locator(`[pw-data="select-option-${columnHeader}-${index}"]`, {hasText: option}).waitFor({state: 'hidden'});
   }
 
   async clear({index, columnHeader, multiSelect}: {index: number, columnHeader: string, multiSelect?: boolean}) {
@@ -32,10 +39,10 @@ export class SelectOptionCellPageObject {
       return
     }
 
+    await this.get({index, columnHeader}).click();
+    await this.rootPage.locator('.ant-select-single > .ant-select-clear').click();
     await this.cell.get({index, columnHeader}).click();
-    await this.cell.page.locator('.ant-select-single > .ant-select-clear').click();
-    await this.cell.get({index, columnHeader}).click();
-    await this.cell.page.locator(`.nc-dropdown-single-select-cell`).waitFor({state: 'hidden'});
+    await this.rootPage.locator(`.nc-dropdown-single-select-cell`).waitFor({state: 'hidden'});
   }
 
   async verify({index, columnHeader, option, multiSelect}: {index: number, columnHeader: string, option: string, multiSelect?: boolean}) {
@@ -51,16 +58,16 @@ export class SelectOptionCellPageObject {
   }
 
   async verifyOptions({index, columnHeader, options}: {index: number, columnHeader: string, options: string[]}) {
-    await this.cell.get({index, columnHeader}).click();
+    await this.get({index, columnHeader}).click();
 
     let counter = 0;
     for (const option of options) {
-      const optionInDom = await this.cell.page.locator(`div.ant-select-item-option`).nth(counter)
+      const optionInDom = await this.rootPage.locator(`div.ant-select-item-option`).nth(counter)
         .evaluate((node) =>  (node as HTMLElement).innerText)
       expect(optionInDom).toBe(option);
       counter++;
     }
-    await this.cell.click({index, columnHeader});
-    await this.cell.page.locator(`.nc-dropdown-single-select-cell`).nth(index).waitFor({state: 'hidden'});
+    await this.get({index, columnHeader}).click();
+    await this.rootPage.locator(`.nc-dropdown-single-select-cell`).nth(index).waitFor({state: 'hidden'});
   }
 }

scripts/playwright/pages/Dashboard/Grid/Cell/index.ts

@@ -1,17 +1,20 @@
 import { Page, Locator,expect } from "@playwright/test";
+import { GridPage } from "..";
+import BasePage from "../../../Base";
 import { SelectOptionCellPageObject } from "./SelectOptionCell";
 
-export class CellPageObject {
-  readonly page: Page;
+export class CellPageObject extends BasePage {
+  readonly grid: GridPage;
   readonly selectOption: SelectOptionCellPageObject;
 
-  constructor(page: Page) {
-    this.page = page;
+  constructor(grid: GridPage) {
+    super(grid.rootPage);
+    this.grid = grid;
     this.selectOption = new SelectOptionCellPageObject(this);
   }
 
   get({index, columnHeader}: {index: number, columnHeader: string}): Locator {
-    return this.page.locator(`td[data-pw=cell-${columnHeader}-${index}]`);
+    return this.grid.get().locator(`td[data-pw=cell-${columnHeader}-${index}]`);
   }
 
   async click({index, columnHeader}: {index: number, columnHeader: string}) {
@@ -23,6 +26,14 @@ export class CellPageObject {
   }
 
   async verify({index, columnHeader, value}: {index: number, columnHeader: string, value: string}) {
+    // todo: Move this polling logic to a different place
+    for(let i = 0; i < 5; i++) {
+      const innerText = await this.get({index, columnHeader}).innerText();
+      if(innerText === value) {
+        break;
+      }
+      await this.rootPage.waitForTimeout(100);
+    }
     return expect(await this.get({index, columnHeader}).innerText()).toBe(value);
   }
 }

scripts/playwright/pages/Dashboard/Grid/Column/SelectOptionColumn.ts

@@ -1,20 +1,26 @@
 import { ColumnPageObject } from ".";
+import BasePage from "../../../Base";
 
-export class SelectOptionColumnPageObject {
+export class SelectOptionColumnPageObject extends BasePage {
   readonly column: ColumnPageObject;
 
   constructor(column: ColumnPageObject) {
+    super(column.rootPage);
     this.column = column;
   }
 
+  get() {
+    return this.column.get();
+  }
+
   async addOption({index, columnTitle,option, skipColumnModal}: {index: number, option: string, skipColumnModal?: boolean, columnTitle?: string}) {
     if(!skipColumnModal && columnTitle) await this.column.openEdit({title: columnTitle});
 
-    await this.column.page.locator('button:has-text("Add option")').click();
+    await this.column.get().locator('button:has-text("Add option")').click();
 
     // Fill text=Select options can't be nullAdd option >> input[type="text"]
-    await this.column.page.locator(`input[data-pw="select-column-option-input-${index}"]`).click();
-    await this.column.page.locator(`input[data-pw="select-column-option-input-${index}"]`).fill(option);
+    await this.column.get().locator(`[data-pw="select-column-option-input-${index}"]`).click();
+    await this.column.get().locator(`[data-pw="select-column-option-input-${index}"]`).fill(option);
 
     if(!skipColumnModal && columnTitle) await this.column.save({isUpdated: true});
   }
@@ -22,8 +28,8 @@ export class SelectOptionColumnPageObject {
   async editOption({columnTitle, index, newOption}: {index: number, columnTitle: string, newOption: string}) {
     await this.column.openEdit({title: columnTitle});
 
-    await this.column.page.locator(`input[data-pw="select-column-option-input-${index}"]`).click();
-    await this.column.page.locator(`input[data-pw="select-column-option-input-${index}"]`).fill(newOption);
+    await this.column.get().locator(`[data-pw="select-column-option-input-${index}"]`).click();
+    await this.column.get().locator(`[data-pw="select-column-option-input-${index}"]`).fill(newOption);
 
     await this.column.save({isUpdated: true});
   }
@@ -31,7 +37,7 @@ export class SelectOptionColumnPageObject {
   async deleteOption({columnTitle, index}: {index: number, columnTitle: string}) {
     await this.column.openEdit({title: columnTitle});
 
-    await this.column.page.locator(`svg[data-pw="select-column-option-remove-${index}"]`).click();
+    await this.column.get().locator(`svg[data-pw="select-column-option-remove-${index}"]`).click();
 
     await this.column.save({isUpdated: true});
   }
@@ -39,9 +45,9 @@ export class SelectOptionColumnPageObject {
   async reorderOption({columnTitle, sourceOption, destinationOption}: {columnTitle: string, sourceOption: string, destinationOption: string}) {
     await this.column.openEdit({title: columnTitle});
 
-    await this.column.page.waitForTimeout(150);
+    await this.column.rootPage.waitForTimeout(150);
 
-    await this.column.page.dragAndDrop(`svg[data-pw="select-option-column-handle-icon-${sourceOption}"]`, `svg[data-pw="select-option-column-handle-icon-${destinationOption}"]`, {
+    await this.column.rootPage.dragAndDrop(`svg[data-pw="select-option-column-handle-icon-${sourceOption}"]`, `svg[data-pw="select-option-column-handle-icon-${destinationOption}"]`, {
       force: true,
     });
 

scripts/playwright/pages/Dashboard/Grid/Column/index.ts

@@ -1,26 +1,25 @@
 import { Page, expect } from "@playwright/test";
-import { BasePage } from "../../../Base";
+import { GridPage } from "..";
+import BasePage from "../../../Base";
 import {SelectOptionColumnPageObject} from "./SelectOptionColumn";
 
-export class ColumnPageObject {
-  readonly page: Page;
-  readonly basePage: BasePage;
+export class ColumnPageObject extends BasePage {
+  readonly grid: GridPage;
   readonly selectOption: SelectOptionColumnPageObject;
 
-  constructor(page: Page) {
-    this.page = page;
+  constructor(grid: GridPage) {
+    super(grid.rootPage);
+    this.grid = grid;
     this.selectOption = new SelectOptionColumnPageObject(this);
-    this.basePage = new BasePage(this.page);
   }
 
   get() {
-    return this.page.locator('[data-pw="add-or-edit-column"]');
+    return this.rootPage.locator('form[data-pw="add-or-edit-column"]');
   }
 
   async create({title, type = "SingleLineText"}: {title: string, type?: string}) {
-    await this.page.locator('.nc-column-add').click();
-
-    await this.page.locator('form[data-pw="add-or-edit-column"]').waitFor();
+    await this.grid.get().locator('.nc-column-add').click();
+    // await this.get().waitFor();
 
     await this.fillTitle({title});
     
@@ -42,7 +41,7 @@ export class ColumnPageObject {
   }
 
   async fillTitle({title}: {title: string}) {
-    await this.page.locator('.nc-column-name-input').fill(title);
+    await this.get().locator('.nc-column-name-input').fill(title);
   }
 
   async selectType({type}: {type: string}) {
@@ -52,40 +51,40 @@ export class ColumnPageObject {
     await this.get().locator('.ant-select-selection-search-input[aria-expanded="true"]').fill(type);
 
     // Select column type
-    await this.page.locator(`text=${type}`).nth(1).click();
+    await this.rootPage.locator(`text=${type}`).nth(1).click();
   }
 
   async delete({title}: {title: string}) {
-    await this.page.locator(`th[data-title="${title}"] >> svg.ant-dropdown-trigger`).click();
-    await this.page.locator('li[role="menuitem"]:has-text("Delete")').waitFor()
-    await this.page.locator('li[role="menuitem"]:has-text("Delete")').click();
+    await this.grid.get().locator(`th[data-title="${title}"] >> svg.ant-dropdown-trigger`).click();
+    // await this.rootPage.locator('li[role="menuitem"]:has-text("Delete")').waitFor();
+    await this.rootPage.locator('li[role="menuitem"]:has-text("Delete")').click();
 
-    await this.page.locator('button:has-text("Delete")').click();
+    await this.rootPage.locator('button:has-text("Delete")').click();
 
     // wait till modal is closed
-    await this.page.locator('.nc-modal-column-delete').waitFor({state: 'hidden'});
+    await this.rootPage.locator('.nc-modal-column-delete').waitFor({state: 'hidden'});
   }
   
   async openEdit({title}: {title: string}) {
-    await this.page.locator(`text=#Title${title} >> svg >> nth=3`).click();
-    await this.page.locator('li[role="menuitem"]:has-text("Edit")').waitFor()
-    await this.page.locator('li[role="menuitem"]:has-text("Edit")').click();
+    // todo: Improve this selector
+    await this.grid.get().locator(`text=#Title${title} >> svg >> nth=3`).click();
+    await this.rootPage.locator('li[role="menuitem"]:has-text("Edit")').click();
 
-    await this.page.locator('form[data-pw="add-or-edit-column"]').waitFor();
+    await this.get().waitFor({state: 'visible'});
   }
 
   async save({isUpdated}: {isUpdated?: boolean} = {}) {
-    await this.page.locator('button:has-text("Save")').click();
+    await this.get().locator('button:has-text("Save")').click();
 
-    await this.basePage.toastWait({message: isUpdated ? 'Column updated' : 'Column created'});
-    await this.page.locator('form[data-pw="add-or-edit-column"]').waitFor({state: 'hidden'});
-    await this.page.waitForTimeout(200);
+    await this.toastWait({message: isUpdated ? 'Column updated' : 'Column created'});
+    await this.get().waitFor({state: 'hidden'});
+    await this.rootPage.waitForTimeout(200);
   }
 
   async verify({title, isDeleted}: {title: string, isDeleted?: boolean}) {
     if(isDeleted) {
-      return expect(await this.page.locator(`th[data-title="${title}"]`).count()).toBe(0);
+      return expect(await this.rootPage.locator(`th[data-title="${title}"]`).count()).toBe(0);
     }
-    await expect(this.page.locator(`th[data-title="${title}"]`)).toHaveText(title);
+    await expect(this.rootPage.locator(`th[data-title="${title}"]`)).toHaveText(title);
   }
 }

scripts/playwright/pages/Dashboard/Grid/ExpandedForm/index.ts

@@ -1,32 +0,0 @@
-// playwright-dev-page.ts
-import {  Locator, Page } from '@playwright/test';
-import { BasePage } from '../../../Base';
-
-export class ExpandedFormPage {
-  readonly page: Page;
-  readonly addNewTableButton: Locator;
-  readonly base: BasePage;
-
-  constructor(page: Page) {
-    this.page = page;
-    this.addNewTableButton = page.locator('.nc-add-new-table');
-    this.base = new BasePage(page);
-  }
-
-  get() {
-    return this.page.locator(`.nc-drawer-expanded-form`);
-  }
-
-  async fillField({columnTitle, value}: {columnTitle: string, value: string}) {
-    const field = this.get().locator(`[pw-data="nc-expand-col-${columnTitle}"]`);
-    await field.locator('input').fill(value);
-  }
-  
-  async save() {
-    await this.get().locator('button:has-text("Save Row")').click();
-    await this.get().press('Escape');
-    await this.get().waitFor({state: 'hidden'});
-    await this.base.toastWait({message: `updated successfully.`});
-    await this.page.locator('[pw-data="grid-load-spinner"]').waitFor({ state: 'hidden' });
-  }
-}

scripts/playwright/pages/Dashboard/Grid/index.ts

@@ -1,30 +1,38 @@
 // playwright-dev-page.ts
-import {  Locator, Page, expect } from '@playwright/test';
+import {  Locator, expect } from '@playwright/test';
+import { DashboardPage } from '..';
+import BasePage from '../../Base';
 import { CellPageObject } from './Cell';
 import { ColumnPageObject } from './Column';
 
-export class GridPage {
-  readonly page: Page;
+export class GridPage extends BasePage {
+  readonly dashboard: DashboardPage;
   readonly addNewTableButton: Locator;
+  readonly dashboardPage: DashboardPage;
   readonly column: ColumnPageObject;
   readonly cell: CellPageObject;
 
-  constructor(page: Page) {
-    this.page = page;
-    this.addNewTableButton = page.locator('.nc-add-new-table');
-    this.column = new ColumnPageObject(page);
-    this.cell = new CellPageObject(page);
+  constructor(dashboardPage: DashboardPage) {
+    super(dashboardPage.rootPage);
+    this.dashboard = dashboardPage;
+    this.addNewTableButton = dashboardPage.get().locator('.nc-add-new-table');
+    this.column = new ColumnPageObject(this);
+    this.cell = new CellPageObject(this);
+  }
+
+  get() {
+    return this.dashboard.get().locator('[pw-data="nc-grid-wrapper"]');
   }
 
   row(index: number) {
-    return this.page.locator(`tr[data-pw="grid-row-${index}"]`);
+    return this.get().locator(`tr[data-pw="grid-row-${index}"]`);
   }
 
   async addNewRow({index = 0, title}: {index?: number, title?: string} = {}) {
-    const rowCount = await this.page.locator('.nc-grid-row').count();
-    await this.page.locator('.nc-grid-add-new-cell').click();
-    if(rowCount + 1 !== await this.page.locator('.nc-grid-row').count()) {
-      await this.page.locator('.nc-grid-add-new-cell').click();
+    const rowCount = await this.get().locator('.nc-grid-row').count();
+    await this.get().locator('.nc-grid-add-new-cell').click();
+    if(rowCount + 1 !== await this.get().locator('.nc-grid-row').count()) {
+      await this.get().locator('.nc-grid-add-new-cell').click();
     }
     
     const cell = this.cell.get({index, columnHeader: 'Title'});
@@ -39,24 +47,25 @@ export class GridPage {
   }
 
   async verifyRow({index}: {index: number}) {
-    await this.page.locator(`td[data-pw="cell-Title-${index}"]`).waitFor({state: 'visible'});
-    expect(await this.page.locator(`td[data-pw="cell-Title-${index}"]`).count()).toBe(1);
+    await this.get().locator(`td[data-pw="cell-Title-${index}"]`).waitFor({state: 'visible'});
+    expect(await this.get().locator(`td[data-pw="cell-Title-${index}"]`).count()).toBe(1);
   }
 
   async verifyRowDoesNotExist({index}: {index: number}) {
-    await this.page.locator(`td[data-pw="cell-Title-${index}"]`).waitFor({state: 'hidden'});
-    return expect(await this.page.locator(`td[data-pw="cell-Title-${index}"]`).count()).toBe(0);
+    await this.get().locator(`td[data-pw="cell-Title-${index}"]`).waitFor({state: 'hidden'});
+    return expect(await this.get().locator(`td[data-pw="cell-Title-${index}"]`).count()).toBe(0);
   }
 
   async deleteRow(index: number) {
-    await this.page.locator(`td[data-pw="cell-Title-${index}"]`).click({
+    await this.get().locator(`td[data-pw="cell-Title-${index}"]`).click({
       button: 'right'
     });
 
     // Click text=Delete Row
-    await this.page.locator('text=Delete Row').click();
-    await this.page.locator('span.ant-dropdown-menu-title-content > nc-project-menu-item').waitFor({state: 'hidden'});
-    await this.page.waitForTimeout(300);
+    await this.rootPage.locator('text=Delete Row').click();
+    // todo: improve selector
+    await this.rootPage.locator('span.ant-dropdown-menu-title-content > nc-project-menu-item').waitFor({state: 'hidden'});
+    await this.rootPage.waitForTimeout(300);
   }
 
   async openExpandedRow({index}:{index: number}) {
@@ -65,15 +74,15 @@ export class GridPage {
   }
 
   async selectAll() {
-    await this.page.locator('[pw-data="nc-check-all"]').hover();
-    await this.page.locator('[pw-data="nc-check-all"]').locator('input[type="checkbox"]').click();
+    await this.get().locator('[pw-data="nc-check-all"]').hover();
+    await this.get().locator('[pw-data="nc-check-all"]').locator('input[type="checkbox"]').click();
   }
 
   async deleteAll() {
     await this.selectAll();
-    await this.page.locator('[pw-data="nc-check-all"]').locator('input[type="checkbox"]').click({
+    await this.get().locator('[pw-data="nc-check-all"]').locator('input[type="checkbox"]').click({
       button: 'right'
     });
-    await this.page.locator('text=Delete Selected Rows').click();
+    await this.rootPage.locator('text=Delete Selected Rows').click();
   }
 }

scripts/playwright/pages/Dashboard/TreeView.ts

@@ -1,19 +1,19 @@
-import { expect, Page } from "@playwright/test";
-import { BasePage } from "../Base";
+import { expect } from "@playwright/test";
+import { DashboardPage } from ".";
+import BasePage from "../Base";
 
-export class TreeViewPage {
-  readonly page: Page;
-  readonly base: BasePage;
+export class TreeViewPage extends BasePage {
+  readonly dashboard: DashboardPage;
   readonly project: any;
 
-  constructor(page: Page, project: any) {
-    this.page = page;
+  constructor(dashboard: DashboardPage, project: any) {
+    super(dashboard.rootPage);
+    this.dashboard = dashboard;
     this.project = project;
-    this.base = new BasePage(page);
   }
 
   get() {
-    return this.page.locator(".nc-treeview-container");;
+    return this.dashboard.get().locator(".nc-treeview-container");;
   }
 
   async focusTable({ title }: { title: string }) {
@@ -27,15 +27,15 @@ export class TreeViewPage {
   async createTable({ title }: { title: string }) {
     await this.get().locator(".nc-add-new-table").click();
 
-    await this.page.locator(".ant-modal-body").waitFor();
+    await this.dashboard.get().locator(".ant-modal-body").waitFor();
 
-    await this.page.locator('[placeholder="Enter table name"]').fill(title);
-    await this.page.locator('button:has-text("Submit")').click();
+    await this.dashboard.get().locator('[placeholder="Enter table name"]').fill(title);
+    await this.dashboard.get().locator('button:has-text("Submit")').click();
 
-    await expect(this.page).toHaveURL(
+    await expect(this.rootPage).toHaveURL(
       `/#/nc/${this.project.id}/table/${title}`
     );
-    await this.page
+    await this.dashboard.get()
       .locator('[pw-data="grid-load-spinner"]')
       .waitFor({ state: "hidden" });
   }
@@ -60,23 +60,23 @@ export class TreeViewPage {
     await this.get()
       .locator(`.nc-project-tree-tbl-${title}`)
       .click({ button: "right" });
-    await this.page
+    await this.dashboard.get()
       .locator('div.nc-project-menu-item:has-text("Delete")')
       .click();
-    await this.page.locator('button:has-text("Yes")').click();
-    await this.base.toastWait({ message: "Deleted table successfully" });
+    await this.dashboard.get().locator('button:has-text("Yes")').click();
+    await this.toastWait({ message: "Deleted table successfully" });
   }
 
   async renameTable({ title, newTitle }: { title: string; newTitle: string }) {
     await this.get()
       .locator(`.nc-project-tree-tbl-${title}`)
       .click({ button: "right" });
-    await this.page
+    await this.dashboard.get()
       .locator('div.nc-project-menu-item:has-text("Rename")')
       .click();
-    await this.page.locator('[placeholder="Enter table name"]').fill(newTitle);
-    await this.page.locator('button:has-text("Submit")').click();
-    await this.base.toastWait({ message: "Table renamed successfully" });
+    await this.dashboard.get().locator('[placeholder="Enter table name"]').fill(newTitle);
+    await this.dashboard.get().locator('button:has-text("Submit")').click();
+    await this.toastWait({  message: "Table renamed successfully" });
   }
 
   async reorderTables({ sourceTable, destinationTable}: {
@@ -84,7 +84,7 @@ export class TreeViewPage {
     destinationTable: string;
   }) {
 
-    await this.page.locator(`[pw-data="tree-view-table-draggable-handle-${sourceTable}"]`).dragTo(
+    await this.dashboard.get().locator(`[pw-data="tree-view-table-draggable-handle-${sourceTable}"]`).dragTo(
       this.get().locator(`[pw-data="tree-view-table-${destinationTable}"]`),
     );
   }

scripts/playwright/pages/Dashboard/index.ts

@@ -1,38 +1,39 @@
 // playwright-dev-page.ts
 import { Locator, Page, expect } from "@playwright/test";
-import { BasePage } from "../Base";
+import BasePage from "../Base";
 import { GridPage } from "./Grid";
-import { ExpandedFormPage } from "./Grid/ExpandedForm";
+import { ExpandedFormPage } from "./ExpandedForm";
 import { TreeViewPage } from "./TreeView";
 
-export class DashboardPage {
+export class DashboardPage extends BasePage {
   readonly project: any;
-  readonly page: Page;
   readonly tablesSideBar: Locator;
   readonly tabBar: Locator;
-  readonly base: BasePage;
   readonly treeView: TreeViewPage;
   readonly grid: GridPage;
   readonly expandedForm: ExpandedFormPage;
 
-  constructor(page: Page, project: any) {
-    this.page = page;
-    this.base = new BasePage(page);
+  constructor(rootPage: Page, project: any) {
+    super(rootPage);  
     this.project = project;
-    this.tablesSideBar = page.locator(".nc-treeview-container");
-    this.tabBar = page.locator(".nc-tab-bar");
-    this.treeView = new TreeViewPage(page, project);
-    this.grid = new GridPage(page);
-    this.expandedForm = new ExpandedFormPage(page);
+    this.tablesSideBar = rootPage.locator(".nc-treeview-container");
+    this.tabBar = rootPage.locator(".nc-tab-bar");
+    this.treeView = new TreeViewPage(this, project);
+    this.grid = new GridPage(this);
+    this.expandedForm = new ExpandedFormPage(this);
+  }
+
+  get() {
+    return this.rootPage.locator('html');
   }
 
   async goto() {
-    await this.page.goto(`/#/nc/${this.project.id}/auth`);
+    await this.rootPage.goto(`/#/nc/${this.project.id}/auth`);
   }
 
   async gotoSettings() {
-    await this.page.locator('[pw-data="nc-project-menu"]').click();
-    await this.page
+    await this.rootPage.locator('[pw-data="nc-project-menu"]').click();
+    await this.rootPage
       .locator('div.nc-project-menu-item:has-text(" Team & Settings")')
       .click();
   }

scripts/playwright/tests/tableColumnOperation.spec.ts

@@ -11,7 +11,7 @@ test.describe('Table Column Operations', () => {
   test.beforeEach(async ({page}) => {
     context = await setup({ page });
     dashboard = new DashboardPage(page, context.project);
-    grid = new GridPage(page);
+    grid = new GridPage(dashboard);
 
     await dashboard.treeView.createTable({title: "sheet1"});
   })