@thinkwise/testwise 0.0.2-alpha.2 → 0.1.63

package/Testwise.ts

@@ -2,7 +2,9 @@ import { test as base } from '@playwright/test';
 import { GoToDeepLink } from './page-extensions/GoToDeepLink.js';
 import { LoginFeatures } from './page-extensions/LoginFeatures.js';
 import { UserSimulation } from './page-extensions/UserSimulation.js';
+import { WaitEventHandler } from './page-extensions/WaitEventHandler.js';
 import { ClickOverride } from './page-overrides/ClickOverride.js';
+import { FillOverride } from './page-overrides/FillOverride.js';
 import type { Test } from './types/CoreTypes.js';
 
 function combineExtensions(baseTest: Test, ...extensions: { new (test: Test): { test: Test } }[]) {
@@ -14,9 +16,11 @@ export const test: Test = combineExtensions(
 
   // Override section
   ClickOverride,
+  FillOverride,
 
   // Extend section
   GoToDeepLink,
   LoginFeatures,
-  UserSimulation
+  UserSimulation,
+  WaitEventHandler
 );

package/components/actionbar/Actionbar.ts

@@ -1,22 +1,13 @@
 import type { Locator, Page } from '@playwright/test';
-import { ActionbarObjects } from './ActionbarObjects.js';
+import { ActionbarObjects, ActionbarOverflowableObjects } from './ActionbarObjects.js';
 
-export class Actionbar {
-  private _objects: ActionbarObjects;
+class ActionbarActions {
+  private _objects: ActionbarOverflowableObjects;
 
-  constructor(page: Page, actionbarContext: Locator | null = null) {
-    this._objects = new ActionbarObjects(page, actionbarContext);
-  }
-
-  /**
-   * Opens the Actionbar’s overflow menu and clicks on the 'Export' button inside it.
-   */
-  public async clickExportButton(): Promise<void> {
-    await this._objects.overflowMenuButton().click();
-    await this._objects.exportButton().click();
+  constructor(page: Page, context: Locator | null = null) {
+    this._objects = new ActionbarOverflowableObjects(page, context);
   }
 
-  // CRUD Buttons
   public getAddButton = (): Locator => this._objects.addButton();
 
   public getCancelButton = (): Locator => this._objects.cancelButton();
@@ -31,9 +22,6 @@ export class Actionbar {
 
   public getUpdateButton = (): Locator => this._objects.updateButton();
 
-  // Overflow Menu
-  public getOverflowMenuButton = (): Locator => this._objects.overflowMenuButton();
-
   public getExportButton = (): Locator => this._objects.exportButton();
 
   public getImportButton = (): Locator => this._objects.importButton();
@@ -52,6 +40,126 @@ export class Actionbar {
 
   public getSortButton = (): Locator => this._objects.sortButton();
 
-  // Other Elements
   public getSearchInput = (): Locator => this._objects.searchInput();
+
+  public getUpScreenTypeButton = (): Locator => this._objects.upScreenTypeButton();
+
+  public getUpDetailSettingsButton = (): Locator => this._objects.upDetailSettingsButton();
+
+  public getUpManagePrefiltersButton = (): Locator => this._objects.upManagePrefiltersButton();
+
+  public getUpGridSettingsButton = (): Locator => this._objects.upGridSettingsButton();
+
+  public getCubeSortButton = (): Locator => this._objects.cubeSortButton();
+
+  public getCubePivotSettingsButton = (): Locator => this._objects.cubePivotSettingsButton();
+
+  public getCubeChartSettingsButton = (): Locator => this._objects.cubeChartSettingsButton();
+
+  public getSaveAsCubeViewButton = (): Locator => this._objects.saveAsCubeViewButton();
+
+  public getDeleteCubeViewButton = (): Locator => this._objects.deleteCubeViewButton();
+
+  public getCollapseAllButton = (): Locator => this._objects.collapseAllButton();
+
+  public getExpandAllButton = (): Locator => this._objects.expandAllButton();
+}
+
+export class Actionbar extends ActionbarActions {
+  private _actionbarObjects: ActionbarObjects;
+  private _overflowMenu: ActionbarOverflow;
+
+  constructor(page: Page, actionbarContext: Locator | null = null) {
+    super(page, actionbarContext);
+    this._actionbarObjects = new ActionbarObjects(page, actionbarContext);
+    this._overflowMenu = new ActionbarOverflow(page);
+  }
+
+  public openOverflowMenu = async (): Promise<void> => {
+    await this._actionbarObjects.overflowMenuButton().click();
+  };
+
+  overflowMenu = {
+    getAddButton: () => wrapWithOverflowOpen(this, () => this._overflowMenu.getAddButton()),
+
+    getCancelButton: () => wrapWithOverflowOpen(this, () => this._overflowMenu.getCancelButton()),
+
+    getCopyButton: () => wrapWithOverflowOpen(this, () => this._overflowMenu.getCopyButton()),
+
+    getDeleteButton: () => wrapWithOverflowOpen(this, () => this._overflowMenu.getDeleteButton()),
+
+    getRefreshButton: () => wrapWithOverflowOpen(this, () => this._overflowMenu.getRefreshButton()),
+
+    getSaveButton: () => wrapWithOverflowOpen(this, () => this._overflowMenu.getSaveButton()),
+
+    getUpdateButton: () => wrapWithOverflowOpen(this, () => this._overflowMenu.getUpdateButton()),
+
+    getExportButton: () => wrapWithOverflowOpen(this, () => this._overflowMenu.getExportButton()),
+
+    getImportButton: () => wrapWithOverflowOpen(this, () => this._overflowMenu.getImportButton()),
+
+    getExportImmediatelyButton: () => wrapWithOverflowOpen(this, () => this._overflowMenu.getExportImmediatelyButton()),
+
+    getMassUpdateButton: () => wrapWithOverflowOpen(this, () => this._overflowMenu.getMassUpdateButton()),
+
+    getQuickFilterButton: () => wrapWithOverflowOpen(this, () => this._overflowMenu.getQuickFilterButton()),
+
+    getFilterButton: () => wrapWithOverflowOpen(this, () => this._overflowMenu.getFilterButton()),
+
+    getClearAllFiltersButton: () => wrapWithOverflowOpen(this, () => this._overflowMenu.getClearAllFiltersButton()),
+
+    getRestoreSortOrderButton: () => wrapWithOverflowOpen(this, () => this._overflowMenu.getRestoreSortOrderButton()),
+
+    getSortButton: () => wrapWithOverflowOpen(this, () => this._overflowMenu.getSortButton()),
+
+    getSearchInput: () => wrapWithOverflowOpen(this, () => this._overflowMenu.getSearchInput()),
+
+    getUpScreenTypeButton: () => wrapWithOverflowOpen(this, () => this._overflowMenu.getUpScreenTypeButton()),
+
+    getUpDetailSettingsButton: () => wrapWithOverflowOpen(this, () => this._overflowMenu.getUpDetailSettingsButton()),
+
+    getUpManagePrefiltersButton: () =>
+      wrapWithOverflowOpen(this, () => this._overflowMenu.getUpManagePrefiltersButton()),
+
+    getUpGridSettingsButton: () => wrapWithOverflowOpen(this, () => this._overflowMenu.getUpGridSettingsButton()),
+
+    getCubeSortButton: () => wrapWithOverflowOpen(this, () => this._overflowMenu.getCubeSortButton()),
+
+    getCubePivotSettingsButton: () => wrapWithOverflowOpen(this, () => this._overflowMenu.getCubePivotSettingsButton()),
+
+    getCubeChartSettingsButton: () => wrapWithOverflowOpen(this, () => this._overflowMenu.getCubeChartSettingsButton()),
+
+    getSaveAsCubeViewButton: () => wrapWithOverflowOpen(this, () => this._overflowMenu.getSaveAsCubeViewButton()),
+
+    getDeleteCubeViewButton: () => wrapWithOverflowOpen(this, () => this._overflowMenu.getDeleteCubeViewButton()),
+
+    getCollapseAllButton: () => wrapWithOverflowOpen(this, () => this._overflowMenu.getCollapseAllButton()),
+
+    getExpandAllButton: () => wrapWithOverflowOpen(this, () => this._overflowMenu.getExpandAllButton())
+  };
+}
+
+export class ActionbarOverflow extends ActionbarActions {
+  constructor(page: Page) {
+    super(page, page.getByTestId('actionbar__overflow-menu__context'));
+  }
+}
+
+function wrapWithOverflowOpen(actionBarInstance: Actionbar, getLocatorFn: () => Locator): Locator {
+  const locator = getLocatorFn();
+
+  return new Proxy(locator, {
+    get(target, prop, receiver) {
+      const original = Reflect.get(target, prop, receiver);
+
+      if (typeof original === 'function') {
+        return async (...args: unknown[]) => {
+          await actionBarInstance.openOverflowMenu();
+          return (original as (...args: unknown[]) => unknown).apply(target, args);
+        };
+      }
+
+      return original;
+    }
+  }) as unknown as Locator;
 }

package/components/actionbar/ActionbarObjects.ts

@@ -1,67 +1,72 @@
 import type { Locator, Page } from '@playwright/test';
 import { BaseComponentObjects } from '../BaseComponentObjects.js';
 
-export class ActionbarObjects extends BaseComponentObjects {
-  private _page: Page;
-
+export class ActionbarOverflowableObjects extends BaseComponentObjects {
   constructor(page: Page, context: Locator | null = null) {
     super(page, context);
-    this._page = page;
   }
 
-  // CRUD Buttons
-  public addButton = () => this.context.locator('[data-testid="actionbar__add"]');
+  public addButton = () => this.context.getByTestId('actionbar__add');
+
+  public cancelButton = () => this.context.getByTestId('actionbar__cancel');
+
+  public copyButton = () => this.context.getByTestId('actionbar__copy');
+
+  public deleteButton = () => this.context.getByTestId('actionbar__delete');
+
+  public refreshButton = () => this.context.getByTestId('actionbar__refresh');
+
+  public saveButton = () => this.context.getByTestId('actionbar__save');
+
+  public updateButton = () => this.context.getByTestId('actionbar__update');
+
+  public searchInput = () => this.context.getByTestId('actionbar__search__input').locator('input');
 
-  public cancelButton = () => this.context.locator(' [data-testid="actionbar__cancel"]');
+  public exportButton = () => this.context.getByTestId('actionbar__export');
 
-  public copyButton = () => this.context.locator(' [data-testid="actionbar__copy"]');
+  public importButton = () => this.context.getByTestId('actionbar__import');
 
-  public deleteButton = () => this.context.locator(' [data-testid="actionbar__delete"]');
+  public exportImmediatelyButton = () => this.context.getByTestId('actionbar__export-immediately');
 
-  public refreshButton = () => this.context.locator(' [data-testid="actionbar__refresh"]');
+  public massUpdateButton = () => this.context.getByTestId('actionbar__mass-update');
 
-  public saveButton = () => this.context.locator(' [data-testid="actionbar__save"]');
+  public quickFilterButton = () => this.context.getByTestId('actionbar__quick-filter');
 
-  public updateButton = () => this.context.locator(' [data-testid="actionbar__update"]');
+  public filterButton = () => this.context.getByTestId('actionbar__filter');
 
-  // Overflow Menu Button
-  public overflowMenuButton = () => this.context.locator(' [data-testid="actionbar__overflow-menu__button"]');
+  public clearAllFiltersButton = () => this.context.getByTestId('actionbar__clear-filters');
 
-  // Overflow Menu Items
+  public restoreSortOrderButton = () => this.context.getByTestId('actionbar__restore-sort-order');
 
-  public exportButton = () =>
-    this._page.locator('[data-testid="actionbar__overflow-menu__context"] [data-testid="actionbar__export"]');
+  public sortButton = () => this.context.getByTestId('actionbar__sort');
 
-  public importButton = () =>
-    this._page.locator('[data-testid="actionbar__overflow-menu__context"] [data-testid="actionbar__import"]');
+  public upScreenTypeButton = () => this.context.getByTestId('actionbar__up-screen-type');
 
-  public exportImmediatelyButton = () =>
-    this._page.locator(
-      '[data-testid="actionbar__overflow-menu__context"] [data-testid="actionbar__export-immediately"]'
-    );
+  public upDetailSettingsButton = () => this.context.getByTestId('actionbar__up-details');
 
-  public massUpdateButton = () =>
-    this._page.locator('[data-testid="actionbar__overflow-menu__context"] [data-testid="actionbar__mass-update"]');
+  public upManagePrefiltersButton = () => this.context.getByTestId('actionbar__up-prefilters');
 
-  public quickFilterButton = () =>
-    this._page.locator('[data-testid="actionbar__overflow-menu__context"] [data-testid="actionbar__quick-filter"]');
+  public upGridSettingsButton = () => this.context.getByTestId('actionbar__up-grid');
 
-  public filterButton = () =>
-    this._page.locator('[data-testid="actionbar__overflow-menu__context"] [data-testid="actionbar__filter"]');
+  public cubeSortButton = () => this.context.getByTestId('actionbar__cube-sort');
 
-  public clearAllFiltersButton = () =>
-    this._page.locator(
-      '[data-testid="actionbar__overflow-menu__context"] [data-testid="actionbar__clear-all-filters"]'
-    );
+  public cubePivotSettingsButton = () => this.context.getByTestId('actionbar__pivot-settings');
 
-  public restoreSortOrderButton = () =>
-    this._page.locator(
-      '[data-testid="actionbar__overflow-menu__context"] [data-testid="actionbar__restore-sort-order"]'
-    );
+  public cubeChartSettingsButton = () => this.context.getByTestId('actionbar__chart-settings');
 
-  public sortButton = () =>
-    this._page.locator('[data-testid="actionbar__overflow-menu__context"] [data-testid="actionbar__sort"]');
+  public saveAsCubeViewButton = () => this.context.getByTestId('actionbar__save-as-cube-view');
+
+  public deleteCubeViewButton = () => this.context.getByTestId('actionbar__delete-cube-view');
+
+  public collapseAllButton = () => this.context.getByTestId('actionbar__collapse-all');
+
+  public expandAllButton = () => this.context.getByTestId('actionbar__expand-all');
+}
+
+export class ActionbarObjects extends ActionbarOverflowableObjects {
+  constructor(page: Page, context: Locator | null = null) {
+    super(page, context);
+  }
 
-  // Other Elements
-  public searchInput = () => this.context.locator(' [data-testid="actionbar__search__input"] input');
+  public overflowMenuButton = () => this.context.locator('[data-testid="actionbar__overflow-menu__button"]');
 }

package/components/filter/FilterForm.ts

@@ -1,5 +1,5 @@
 import type { Locator } from '@playwright/test';
-import { BaseComponent } from '../BaseComponent';
+import { BaseComponent } from '../BaseComponent.js';
 
 export class FilterForm extends BaseComponent {
   public async getLocator(context?: Locator): Promise<Locator> {

package/components/filter/FindForm.ts

@@ -1,5 +1,5 @@
 import type { Locator } from '@playwright/test';
-import { BaseComponent } from '../BaseComponent';
+import { BaseComponent } from '../BaseComponent.js';
 
 export class FindForm extends BaseComponent {
   public async getLocator(context?: Locator): Promise<Locator> {

package/components/form/Form.ts

@@ -1,31 +1,30 @@
-import type { Locator } from '@playwright/test';
-import { BaseComponent } from '../BaseComponent.js';
+import type { Locator, Page } from '@playwright/test';
+import { FormObjects } from './FormObjects.js';
 
-export class Form extends BaseComponent {
-  public async getLocator(context?: Locator): Promise<Locator> {
-    if (context) {
-      return context.getByTestId(this.id);
-    }
-    return this.page.getByTestId(this.id);
+export class Form {
+  private _objects: FormObjects;
+
+  constructor(page: Page, formContext: Locator | null = null) {
+    this._objects = new FormObjects(page, formContext);
   }
 
-  public getFieldByColId = (colId: string): Locator => {
-    this.getComponent().then((component) => {
-      if (component) {
-        return component.getByTestId(`form-field__${colId}`);
-      }
-    });
-    // Fallback to page locator if component is not found
-    return this.page.getByTestId(`form-field__${colId}`);
+  public getFieldByValue = (value: string): Locator => {
+    return this._objects.getFieldByValue(value);
   };
 
-  public getFieldByValue = (value: string): Locator => {
-    this.getComponent().then((component) => {
-      if (component) {
-        return component.locator('[data-form="field"]', { hasText: value });
-      }
-    });
-    // Fallback to page locator if component is not found
-    return this.page.locator('[data-form="field"]', { hasText: value });
+  public getFieldByColId = (colId: string): Locator => {
+    return this._objects.getFieldByColId(colId);
   };
+
+  // Returns true if the form is currently in edit mode, based on the `data-edit-mode` attribute.
+  public async isInEditMode(): Promise<boolean> {
+    const control = this._objects.getEditModeAttribute();
+    const mode = await control.getAttribute('data-edit-mode');
+    return mode === 'true';
+  }
+
+  // Clicks the lookup (magnifier) icon in the specified form field.
+  public async clickInFieldLookup(colId: string): Promise<void> {
+    await this._objects.getLookupButtonByColId(colId).click();
+  }
 }

package/components/form/FormObjects.ts

@@ -0,0 +1,25 @@
+import type { Locator, Page } from '@playwright/test';
+import { BaseComponentObjects } from '../BaseComponentObjects.js';
+
+export class FormObjects extends BaseComponentObjects {
+  constructor(page: Page, context: Locator | null = null) {
+    super(page, context);
+  }
+
+  // Field selectors
+  public getFieldByColId = (colId: string): Locator => {
+    return this.context.locator(`[data-testid="form-field__${colId}__input"]`);
+  };
+
+  public getFieldByValue = (value: string): Locator => {
+    return this.context.locator(`input[value="${value}"]`);
+  };
+
+  public getEditModeAttribute = (): Locator => {
+    return this.context.locator('[data-testid^="form-field__"][data-testid$="__control"]').first();
+  };
+
+  public getLookupButtonByColId = (colId: string): Locator => {
+    return this.context.locator(`[data-testid="form-field__${colId}__open"]`);
+  };
+}

package/components/grid/Grid.ts

@@ -1,4 +1,6 @@
 import type { Locator, Page } from '@playwright/test';
+import { pollUntil } from '../../helpers/Poll.js';
+import { escapeRegex } from '../../helpers/RegexHelper.js';
 import { GridObjects } from './GridObjects.js';
 
 export class Grid {
@@ -29,7 +31,10 @@ export class Grid {
    * @param value - The exact text value of the cell to retrieve.
    * @returns A Locator for the cell containing the specified value.
    */
-  public getCellByExactValue = (value: string): Locator => this._gridObjects.cellByValue(value);
+  public getCellByExactValue(value: string): Locator {
+    const valueToFindRegex = new RegExp(`^${escapeRegex(value)}$`);
+    return this._gridObjects.cellByValue(valueToFindRegex);
+  }
 
   /**
    * Opens the Excel-style filter popup for the specified grid column.
@@ -54,7 +59,9 @@ export class Grid {
 
     const filteredRows = await Promise.all(
       allRows.map(async (row) => {
-        const text = await row.locator(`[col-id="${colIdToMatchOn}"]`).textContent();
+        const cellLocator = row.locator(`[col-id="${colIdToMatchOn}"]`);
+        if ((await cellLocator.count()) === 0) return null; // Cell not found, skip row
+        const text = await cellLocator.textContent();
         return text === valueToMatch ? row : null;
       })
     );
@@ -200,22 +207,91 @@ export class Grid {
   }
 
   /**
-   * Filters a column in an Excel-style grid by selecting a specific value.
+   * Filters a grid column using the Excel-style filter popup.
+   *
+   * @param columnName - The column to filter
+   * @param valueToSelect - The value to select
+   * @param deselectAll - If true, clears existing selections first (default: true)
    *
-   * @param columnName - The name of the column to filter.
-   * @param valueToSelect - The value to select in the filter dropdown.
-   * @returns A promise that resolves when the filtering operation is complete.
+   * @example
+   * await grid.filterByColumnValueExcelStyle('Status', 'Active');
+   * await grid.filterByColumnValueExcelStyle('Status', 'Pending', false);
    */
-  public async filterByColumnValueExcelStyle(columnName: string, valueToSelect: string): Promise<void> {
+  public async filterByColumnValueExcelStyle(
+    columnName: string,
+    valueToSelect: string,
+    deselectAll: boolean = true
+  ): Promise<void> {
     await this.openExcelStyleFilterPopup(columnName);
-    const popup = this._gridObjects.excelStyleFilterPopup();
+
+    // Get column ID from header and normalize it (snake_case -> kebab-case)
+    const header = this._gridObjects.columnHeaderByName(columnName);
+    const rawColumnId = await header.getAttribute('col-id');
+    if (!rawColumnId) {
+      throw new Error(`Could not find col-id for column "${columnName}"`);
+    }
+    const columnId = rawColumnId.toLowerCase().replace(/_/g, '-');
+
+    const popup = this._gridObjects.excelStyleFilterPopup(columnId);
     await popup.waitFor({ state: 'visible' });
-    const checkbox = this._gridObjects.excelStyleFilterPopupOptionByText(valueToSelect);
-    await checkbox.check();
 
-    // Click outside the popup to close it
-    await this._gridObjects.gridCell().first().click();
+    if (deselectAll) {
+      await this._gridObjects.excelStyleFilterSelectAllCheckbox(columnId).uncheck();
+    }
+
+    const valueRegex = new RegExp(`^${escapeRegex(valueToSelect)}$`, 'i');
+    const optionButton = this._gridObjects.excelStyleFilterPopupOptionByText(columnId, valueRegex);
+    await optionButton.locator('input[type="checkbox"]').check();
 
+    await this._gridObjects.gridCell().first().click();
     await popup.waitFor({ state: 'detached' });
   }
+
+  /**
+   * Returns a Locator for all rows in the grid.
+   * @returns {Locator} Locator for grid rows.
+   */
+  public rows(): Locator {
+    return this._gridObjects.rows();
+  }
+
+  /**
+   * Verifies the number of rows in the grid and checks for "No result" overlay if zero.
+   * @param expectedRowCount The expected number of rows.
+   */
+  public async verifyNumberOfRowsInGrid(expectedRowCount: number): Promise<void> {
+    if (expectedRowCount === 0) {
+      if (await this.hasNoRowsOverlay()) {
+        return;
+      } else {
+        throw new Error('Expected "No result" overlay to be visible');
+      }
+    }
+
+    await pollUntil(() => this.rows().count(), {
+      predicate: (n: number) => n === expectedRowCount
+    });
+  }
+
+  /**
+   * Verifies if the "No result" overlay is visible in the grid.
+   * @returns A promise that resolves to true if the overlay is visible, otherwise false.
+   */
+  public async hasNoRowsOverlay(): Promise<boolean> {
+    try {
+      const overlay = this._gridObjects.noRowsOverlay();
+      await pollUntil(
+        async () => {
+          const txt = (await overlay.textContent())?.trim() ?? '';
+          return txt.includes('No result');
+        },
+        { predicate: Boolean }
+      );
+    } catch {
+      console.error('The "No result" overlay is not displaying the expected text.');
+      return false;
+    }
+
+    return await this._gridObjects.noRowsOverlay().isVisible();
+  }
 }

package/components/grid/GridObjects.ts

@@ -20,8 +20,10 @@ export class GridObjects extends BaseComponentObjects {
 
   public rowByIndex = (row: number) => this.context.locator(`[role="row"][row-index="${row}"]`);
 
-  public cellByValue = (value: string) =>
-    this.context.locator('[role="button"]', { hasText: new RegExp(`^${value}$`) });
+  public cellByValue = (value: RegExp) =>
+    this.context.locator('[role="button"]', {
+      hasText: value
+    });
 
   public rows = () => this.context.locator('[role="row"]');
 
@@ -33,13 +35,19 @@ export class GridObjects extends BaseComponentObjects {
 
   public columnByRowLocator = (rowLocator: Locator) => rowLocator.locator('.ag-cell');
 
-  public excelStyleFilterPopup = () => this._page.locator('.ag-popup-child[role="dialog"]');
+  public excelStyleFilterPopup = (columnId: string) => this._page.getByTestId(`lookup-excel-filter__${columnId}__list`);
 
-  public excelStyleFilterPopupOptionByText = (optionText: string) =>
-    this.excelStyleFilterPopup()
-      .locator('[data-testid$="list-option-name"]', { hasText: optionText })
-      .locator('xpath=..')
-      .locator('input[type="checkbox"]');
+  public excelStyleFilterSelectAllCheckbox = (columnId: string) =>
+    this._page.locator(
+      `[data-testid="lookup-excel-filter__${columnId}__list-item-select-all-checkbox"] input[type="checkbox"]`
+    );
+
+  public excelStyleFilterPopupOptionByText = (columnId: string, optionText: RegExp) =>
+    this._page
+      .locator(`[data-testid^="lookup-excel-filter__${columnId}__list-item-button__"]`)
+      .filter({ hasText: optionText });
 
   public gridCell = () => this.context.locator('[role="gridcell"]');
+
+  public noRowsOverlay = () => this.context.locator('.ag-overlay-no-rows-center');
 }

package/components/index.ts

@@ -1,6 +1,10 @@
-export * from './form/Form.js';
-export * from './grid/Grid.js';
-export * from './Splitter.js';
 export * from './actionbar/Actionbar.js';
 export * from './export/ExportComponent.js';
+export * from './form/Form.js';
+export * from './grid/Grid.js';
 export * from './pop-up/PopUpComponent.js';
+export * from './Splitter.js';
+export * from './tab/ComponentTab.js';
+export * from './tab/DetailTab.js';
+export * from './task/TaskBar.js';
+export * from './task/TaskTile.js';

package/components/pop-up/PopUpComponent.ts

@@ -1,5 +1,5 @@
 import type { Page } from '@playwright/test';
-import { PopUpComponentObjects } from './PopUpComponentModels.js';
+import { PopUpComponentObjects } from './PopUpComponentObjects.js';
 
 export class PopUpComponent {
   private _objects: PopUpComponentObjects;
@@ -11,4 +11,8 @@ export class PopUpComponent {
   public confirmYes = async () => await this._objects.actionYesButton().click();
 
   public confirmNo = async () => await this._objects.actionNoButton().click();
+
+  public getContentMessage = async () => await this._objects.contentMessage().textContent();
+
+  public clickCloseButton = async () => await this._objects.closeButton().click();
 }

package/components/pop-up/{PopUpComponentModels.ts → PopUpComponentObjects.ts}

@@ -10,4 +10,8 @@ export class PopUpComponentObjects {
   public actionNoButton = () => this._page.getByTestId('popup__translatemessage__actions__no');
 
   public actionYesButton = () => this._page.getByTestId('popup__translatemessage__actions__yes');
+
+  public contentMessage = () => this._page.getByTestId('popup__tsfmessage__content__title').locator('span');
+
+  public closeButton = () => this._page.getByTestId('popup__tsfmessage__actions__close');
 }

package/components/tab/BaseTab.ts

@@ -0,0 +1,42 @@
+import type { Locator, Page } from '@playwright/test';
+import { BaseTabObjects } from './BaseTabObjects.js';
+
+export class BaseTab {
+  protected _objects: BaseTabObjects;
+
+  constructor(page: Page, context: Locator | null = null) {
+    this._objects = new BaseTabObjects(page, context);
+  }
+
+  // --- Common actions ---
+
+  // Clicks a tab by its tabstrip test id prefix (e.g., "form", "users", "list").
+  // Uses the role="tab" element with data-testid^="tabstrip__tab__{name}".
+  public async openById(name: string): Promise<void> {
+    await this._objects.tabByTestId(name).click();
+  }
+
+  // Clicks a tab by index within the scoped tablist context.
+  public async openByIndex(index: number): Promise<void> {
+    await this._objects.tabByIndex(index).click();
+  }
+
+  // --- Useful getters ---
+  public async getTabById(name: string): Promise<Locator> {
+    return this._objects.tabByTestId(name);
+  }
+
+  public async getTabByIndex(index: number): Promise<Locator> {
+    return this._objects.tabByIndex(index);
+  }
+
+  // Reads the badge value on a tab. Non-visible/invalid → 0.
+  public async getBadgeCount(name: string): Promise<number> {
+    const badge = this._objects.badgeByName(name);
+    const visible = await badge.isVisible().catch(() => false);
+    if (!visible) return 0;
+    const txt = (await badge.textContent())?.trim() ?? '0';
+    const n = Number.parseInt(txt, 10);
+    return Number.isNaN(n) ? 0 : n;
+  }
+}