feat(testing): Refactored Page object model

packages/nc-gui/components/dashboard/settings/Modal.vue

@@ -220,7 +220,7 @@ watch(
           </a-menu-item>
         </a-menu>
 
-        <component :is="selectedSubTab?.body" class="px-2 py-6" />
+        <component :is="selectedSubTab?.body" class="px-2 py-6" :pw-data="`nc-settings-subtab-${selectedSubTab.title}`" />
       </a-layout-content>
     </a-layout>
   </a-modal>

scripts/playwright/pages/Dashboard/Settings/Audit.ts

@@ -1,19 +1,25 @@
 // playwright-dev-page.ts
 import {  expect } from '@playwright/test';
 import { SettingsPage } from '.';
+import BasePage from '../../Base';
 
-export class AuditSettingsPage {
+export class AuditSettingsPage extends BasePage {
   private readonly settings: SettingsPage;
 
   constructor(settings: SettingsPage) {
+    super(settings.rootPage);
     this.settings = settings;
   }
 
+  get() {
+    return this.settings.get().locator(`[pw-data="nc-settings-subtab-Audit"]`);
+  }
+
   async verifyRow(
     {index, opType, opSubtype, description, user, created}: 
     {index: number,opType?: string, opSubtype?: string, description?: string, user?: string, created?: string}
     ) {
-    const table = await this.settings.get().locator(`div[data-pw="audit-tab-table"]`);
+    const table = await this.get();
     const row = table.locator(`tr.ant-table-row`).nth(index);
     
     if(opType) {

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

@@ -1,5 +1,7 @@
 // playwright-dev-page.ts
 import {  Page } from '@playwright/test';
+import { DashboardPage } from '..';
+import BasePage from '../../Base';
 import { AuditSettingsPage } from './Audit';
 
 const tabInfo = {
@@ -10,24 +12,25 @@ const tabInfo = {
 }
 
 
-export class SettingsPage {
-  private readonly page: Page;
+export class SettingsPage extends BasePage {
+  private readonly dashboard: DashboardPage;
   readonly audit: AuditSettingsPage;
 
-  constructor(page: Page) {
-    this.page = page;
+  constructor(dashboard: DashboardPage) {
+    super(dashboard.rootPage);
+    this.dashboard = dashboard;
     this.audit = new AuditSettingsPage(this);
   }
 
   get() {
-    return this.page.locator('.nc-modal-settings');
+    return this.rootPage.locator('.nc-modal-settings');
   }
 
   async selectTab({title}: {title: string}) {
-    await this.page.locator(`li[data-menu-id="${tabInfo[title]}"]`).click();
+    await this.get().locator(`li[data-menu-id="${tabInfo[title]}"]`).click();
   }
 
   async close() {
-    await this.page.locator('[pw-data="settings-modal-close-button"]').click();
+    await this.get().locator('[pw-data="settings-modal-close-button"]').click();
   }
 }

scripts/playwright/pages/Dashboard/index.ts

@@ -4,6 +4,7 @@ import BasePage from "../Base";
 import { GridPage } from "./Grid";
 import { ExpandedFormPage } from "./ExpandedForm";
 import { TreeViewPage } from "./TreeView";
+import { SettingsPage } from "./Settings";
 
 export class DashboardPage extends BasePage {
   readonly project: any;
@@ -12,6 +13,7 @@ export class DashboardPage extends BasePage {
   readonly treeView: TreeViewPage;
   readonly grid: GridPage;
   readonly expandedForm: ExpandedFormPage;
+  readonly settings: SettingsPage;
 
   constructor(rootPage: Page, project: any) {
     super(rootPage);  
@@ -21,6 +23,7 @@ export class DashboardPage extends BasePage {
     this.treeView = new TreeViewPage(this, project);
     this.grid = new GridPage(this);
     this.expandedForm = new ExpandedFormPage(this);
+    this.settings = new SettingsPage(this);
   }
 
   get() {

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(dashboard);
+    grid = dashboard.grid;
 
     await dashboard.treeView.createTable({title: "sheet1"});
   })

scripts/playwright/tests/tableOperations.spec.ts

@@ -11,7 +11,7 @@ test.describe('Table Operations', () => {
   test.beforeEach(async ({page}) => {
     context = await setup({ page });
     dashboard = new DashboardPage(page, context.project);
-    settings = new SettingsPage(page);
+    settings = dashboard.settings;
   })
 
   test('Create, and delete table, verify in audit tab, rename City table and reorder tables', async () => {