@thinkwise/testwise 0.2.62 → 0.2.67

package/components/filter/ExcelStyleFilterPopup.ts

@@ -2,27 +2,67 @@ import type { Locator, Page } from '@playwright/test';
 import { ExcelStyleFilterPopupObjects } from './ExcelStyleFilterPopupObjects.js';
 
 export class ExcelStyleFilterPopup {
-  private _excelStyleFilterPopupObjects: ExcelStyleFilterPopupObjects;
+  private _objects: ExcelStyleFilterPopupObjects;
 
   constructor(page: Page) {
-    this._excelStyleFilterPopupObjects = new ExcelStyleFilterPopupObjects(page);
+    this._objects = new ExcelStyleFilterPopupObjects(page);
   }
 
-  async waitForOpen(): Promise<void> {
-    await this._excelStyleFilterPopupObjects.anchor().waitFor({ state: 'visible' });
+  public async waitForOpen(): Promise<void> {
+    await (await this._objects.popup().all()).filter(async (element) => await element.isVisible());
   }
 
-  intervalFilters(): Locator {
-    return this._excelStyleFilterPopupObjects.intervalFilters();
+  public intervalFilters(): Locator {
+    return this._objects.intervalFilters();
   }
 
-  fromDateInput(fieldTestId: string): Locator {
-    return this._excelStyleFilterPopupObjects.fromDateInput(fieldTestId);
+  public fromDateInput(fieldTestId: string): Locator {
+    return this._objects.fromDateInput(fieldTestId);
   }
 
-  async setFromDate(fieldTestId: string, value: string): Promise<void> {
+  public toDateInput(fieldTestId: string): Locator {
+    return this._objects.toDateInput(fieldTestId);
+  }
+
+  public async waitForClose(): Promise<void> {
+    await (await this._objects.popup().all()).filter(async (element) => !(await element.isVisible()));
+  }
+
+  public async clickSelectAll(fieldTestId: string): Promise<void> {
+    await this.waitForOpen();
+    await this._objects.checkboxSelectAllButton(fieldTestId).click();
+  }
+
+  public async clickCheckboxItem(fieldTestId: string, value: string): Promise<void> {
+    await this.waitForOpen();
+
+    await this._objects.checkboxItemButtons(fieldTestId).filter({ hasText: value }).click();
+  }
+
+  public checkboxItem(fieldTestId: string, value: string): Locator {
+    return this._objects.checkboxItemCheckboxes(fieldTestId).filter({ hasText: value });
+  }
+
+  public fromTimeInput(fieldTestId: string): Locator {
+    return this._objects.fromTimeInput(fieldTestId);
+  }
+
+  public toTimeInput(fieldTestId: string): Locator {
+    return this._objects.toTimeInput(fieldTestId);
+  }
+
+  public setFromTime = async (fieldTestId: string, value: string): Promise<void> => this.fillAndEnter(fieldTestId, value);
+
+  public setToTime = async (fieldTestId: string, value: string): Promise<void> => this.fillAndEnter(fieldTestId, value);
+
+  public setFromDate = async (fieldTestId: string, value: string): Promise<void> => this.fillAndEnter(fieldTestId, value);
+
+  public setToDate = async (fieldTestId: string, value: string): Promise<void> => this.fillAndEnter(fieldTestId, value);
+
+  private async fillAndEnter(fieldTestId: string, value: string): Promise<void> {
+    const input = this._objects.fromDateInput(fieldTestId);
+
     await this.waitForOpen();
-    const input = this._excelStyleFilterPopupObjects.fromDateInput(fieldTestId);
     await input.fill(value);
     await input.press('Enter');
   }

package/components/filter/ExcelStyleFilterPopupObjects.ts

@@ -5,11 +5,10 @@ export class ExcelStyleFilterPopupObjects extends BaseComponentObjects {
   private _page: Page;
 
   constructor(page: Page) {
-    super(page, page.locator('body'));
+    super(page);
     this._page = page;
   }
-
-  public anchor = () => this._page.locator('[data-testid^="date-time-excel-filter__"]').first();
+  public popup = () => this._page.locator('[data-testid*="-excel-filter__"]');
 
   public intervalFilters = () => this._page.getByTestId('excel-style-filter-popup__interval-filters');
 
@@ -17,4 +16,31 @@ export class ExcelStyleFilterPopupObjects extends BaseComponentObjects {
     this._page
       .getByTestId(`date-time-excel-filter__${fieldTestId}__from`)
       .getByTestId(`form-field__${fieldTestId}__date__input`);
+
+  public toDateInput = (fieldTestId: string) =>
+    this._page
+      .getByTestId(`date-time-excel-filter__${fieldTestId}__to`)
+      .getByTestId(`form-field__${fieldTestId}__date__input`);
+
+  public checkboxList = (fieldTestId: string) =>
+    this._page.locator(`[data-testid*="-excel-filter__${fieldTestId}__list"]`);
+
+  public checkboxSelectAllButton = (fieldTestId: string) =>
+    this._page.locator(`[data-testid*="-excel-filter__${fieldTestId}__list-item-select-all-checkbox"]`);
+
+  public checkboxItemButtons = (fieldTestId: string) =>
+    this._page.locator(`[data-testid*="-excel-filter__${fieldTestId}__list-item-button__"]`);
+
+  public checkboxItemCheckboxes = (fieldTestId: string) =>
+    this._page.locator(`[data-testid*="-excel-filter__${fieldTestId}__list-item-checkbox__"]`);
+
+  public fromTimeInput = (fieldTestId: string) =>
+    this._page
+      .getByTestId(`date-time-excel-filter__${fieldTestId}__from`)
+      .getByTestId(`form-field__${fieldTestId}__time__input`);
+
+  public toTimeInput = (fieldTestId: string) =>
+    this._page
+      .getByTestId(`date-time-excel-filter__${fieldTestId}__to`)
+      .getByTestId(`form-field__${fieldTestId}__time__input`);
 }

package/components/grid/Grid.ts

@@ -1,15 +1,18 @@
 import type { Locator, Page } from '@playwright/test';
 import { pollUntil } from '../../helpers/Poll.js';
 import { escapeRegex } from '../../helpers/RegexHelper.js';
+import { ExcelStyleFilterPopup } from '../index.js';
 import { GridObjects } from './GridObjects.js';
 
 export class Grid {
   private _gridObjects: GridObjects;
   private _page: Page;
+  private _excelStyleFilterPopup: ExcelStyleFilterPopup;
 
   constructor(gridContext: Locator) {
     this._gridObjects = new GridObjects(gridContext.page(), gridContext);
     this._page = gridContext.page();
+    this._excelStyleFilterPopup = new ExcelStyleFilterPopup(this._page);
   }
 
   protected get page() {
@@ -57,8 +60,11 @@ export class Grid {
    * @param columnName - The name of the column for which to open the filter popup.
    * @returns A promise that resolves when the filter popup is opened.
    */
-  public openExcelStyleFilterPopup = async (columnName: string) => {
-    const filterIcon = this._gridObjects.menuIconByColumnHeaderName(columnName);
+  public openExcelStyleFilterPopup = async (columnNameOrHeader: string | Locator) => {
+    const filterIcon =
+      typeof columnNameOrHeader === 'string'
+        ? this._gridObjects.menuIconByColumnHeaderName(columnNameOrHeader)
+        : columnNameOrHeader.getByTestId('grid__custom__filter__icon');
     await filterIcon.click({ force: true });
   };
 
@@ -127,34 +133,47 @@ export class Grid {
    * await grid.filterByColumnValueExcelStyle('Status', 'Active');
    * await grid.filterByColumnValueExcelStyle('Status', 'Pending', false);
    */
+
   public async filterByColumnValueExcelStyle(
     columnName: string,
     valueToSelect: string,
+    deselectAll?: boolean
+  ): Promise<void>;
+  public async filterByColumnValueExcelStyle(
+    columnHeader: Locator,
+    valueToSelect: string,
+    deselectAll?: boolean
+  ): Promise<void>;
+  public async filterByColumnValueExcelStyle(
+    columnNameOrHeader: string | Locator,
+    valueToSelect: string,
     deselectAll: boolean = true
   ): Promise<void> {
-    await this.openExcelStyleFilterPopup(columnName);
+    await this.openExcelStyleFilterPopup(columnNameOrHeader);
 
     // Get column ID from header and normalize it (snake_case -> kebab-case)
-    const header = this._gridObjects.columnHeaderByName(columnName);
+    const header =
+      typeof columnNameOrHeader === 'string'
+        ? this._gridObjects.columnHeaderByName(columnNameOrHeader)
+        : columnNameOrHeader;
     const rawColumnId = await header.getAttribute('col-id');
     if (!rawColumnId) {
-      throw new Error(`Could not find col-id for column "${columnName}"`);
+      throw new Error(
+        `Could not find col-id for column${typeof columnNameOrHeader === 'string' ? ` "${columnNameOrHeader}"` : ''}`
+      );
     }
     const columnId = rawColumnId.toLowerCase().replace(/_/g, '-');
 
-    const popup = this._gridObjects.excelStyleFilterPopup(columnId);
-    await popup.waitFor({ state: 'visible' });
+    //const popup = this._gridObjects.excelStyleFilterPopup(columnId);
+    await this._excelStyleFilterPopup.waitForOpen();
 
     if (deselectAll) {
-      await this._gridObjects.excelStyleFilterSelectAllCheckbox(columnId).uncheck();
+      await this._excelStyleFilterPopup.clickSelectAll(columnId);
     }
 
-    const valueRegex = new RegExp(`^${escapeRegex(valueToSelect)}$`, 'i');
-    const optionButton = this._gridObjects.excelStyleFilterPopupOptionByText(columnId, valueRegex);
-    await optionButton.locator('input[type="checkbox"]').check();
-
-    await this._gridObjects.mainHeader.click(); // Click outside to close the popup
-    await popup.waitFor({ state: 'detached' });
+    await this._excelStyleFilterPopup.clickCheckboxItem(columnId, valueToSelect);
+    await this._gridObjects.mainHeader.click();
+    await this._excelStyleFilterPopup.waitForClose();
   }
 
   /**

package/components/grid/GridObjects.ts

@@ -2,11 +2,8 @@ import type { Locator, Page } from '@playwright/test';
 import { BaseComponentObjects } from '../BaseComponentObjects.js';
 
 export class GridObjects extends BaseComponentObjects {
-  private _page: Page;
-
   constructor(page: Page, context: Locator | null = null) {
     super(page, context);
-    this._page = page;
   }
 
   public columnHeaderByText = (text: string) => this.context.locator('[role="columnheader"]', { hasText: text });
@@ -33,18 +30,6 @@ export class GridObjects extends BaseComponentObjects {
 
   public columnByRowLocator = (rowLocator: Locator) => rowLocator.locator('.ag-cell');
 
-  public excelStyleFilterPopup = (columnId: string) => this._page.getByTestId(`lookup-excel-filter__${columnId}__list`);
-
-  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/controls/DateControl.ts

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* biome-ignore-all lint/suspicious/noExplicitAny: reason42 */
 import type { Locator } from '@playwright/test';
+import { DateControlObjects } from './DateControlObjects.js';
 
 export type IDateControl = Locator & IDateControlCore;
 
@@ -12,12 +13,10 @@ export type IDateControlCore = {
 };
 
 export class DateControl implements IDateControlCore {
-  private _dateFieldLocator: Locator;
-  private _inputLocator: Locator;
+  private _objects: DateControlObjects;
 
   constructor(context: Locator, id: string) {
-    this._dateFieldLocator = context.getByTestId(`form-field__${id}`);
-    this._inputLocator = this._dateFieldLocator.locator('input');
+    this._objects = new DateControlObjects(context, id);
   }
 
   /**
@@ -30,20 +29,20 @@ export class DateControl implements IDateControlCore {
   public async fill(value: string): Promise<void> {
     const numbersOnlyValue = value.replace(/\D/g, '');
 
-    await this._inputLocator.focus();
-    await this._inputLocator.pressSequentially(numbersOnlyValue);
+    await this._objects.fieldInput().focus();
+    await this._objects.fieldInput().pressSequentially(numbersOnlyValue);
   }
 
   public async clear(): Promise<void> {
-    await this._inputLocator.fill('');
+    await this._objects.fieldInput().fill('');
   }
 
   public async inputValue(): Promise<string> {
-    return await this._inputLocator.inputValue();
+    return await this._objects.fieldInput().inputValue();
   }
 
   public inputElement(): Locator {
-    return this._inputLocator;
+    return this._objects.fieldInput();
   }
 }
 

package/controls/DateControlObjects.ts

@@ -0,0 +1,15 @@
+import type { Locator } from '@playwright/test';
+
+export class DateControlObjects {
+  private _context: Locator;
+  private _id: string;
+
+  constructor(context: Locator, id: string) {
+    this._context = context;
+    this._id = id;
+  }
+
+  public fieldInput = (): Locator => this._context;
+
+  public dateField = (): Locator => this._context.getByTestId(`form-field__${this._id}`);
+}

package/controls/FormComboBox.ts

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* biome-ignore-all lint/suspicious/noExplicitAny: Reason42 */
 import type { Locator } from '@playwright/test';
+import { FormComboBoxObjects } from './FormComboBoxObjects.js';
 
 export type IFormComboBox = Locator & IFormComboBoxCore;
 
@@ -12,44 +13,30 @@ export type IFormComboBoxCore = {
 };
 
 class FormComboBox implements IFormComboBoxCore {
-  private _formFieldLocator: Locator;
-  private _autoCompleteMenu: Locator;
-  private _id: string;
+  private _objects: FormComboBoxObjects;
 
   constructor(context: Locator, id: string) {
-    this._id = id;
-    this._formFieldLocator = context.getByTestId(`form-field__${id}`);
-    this._autoCompleteMenu = context.getByTestId(`form-field__${id}__select__options-list`);
+    this._objects = new FormComboBoxObjects(context, id);
   }
 
   async selectOption(optionText: string): Promise<void> {
-    await this._formFieldLocator.locator('input').click();
-
-    await this._autoCompleteMenu.waitFor({ state: 'visible' });
-
-    const optionTextLowercase = optionText.toLowerCase();
-
-    await this._autoCompleteMenu.getByTestId(`form-field__${this._id}__select__${optionTextLowercase}__text`).click();
+    await this._objects.fieldInput().click();
+    await this._objects.autoCompleteMenu().waitFor({ state: 'visible' });
+    await this._objects.option(optionText).click();
   }
 
   async getValidationMessage(): Promise<string> {
-    await this._formFieldLocator.locator('.TooltipContainer p').waitFor({ state: 'visible' });
-    return await this._formFieldLocator.locator('.TooltipContainer p').innerText();
+    await this._objects.validationMessage().waitFor({ state: 'visible' });
+    return await this._objects.validationMessage().innerText();
   }
   async clearByClick(): Promise<void> {
-    await this._formFieldLocator.locator('Button[aria-label="Clear"]').click();
+    await this._objects.clearButton().click();
   }
 
   async lookupSelect(optionToSelect: string): Promise<void> {
-    await this._formFieldLocator.locator('input').fill(optionToSelect);
-
-    await this._autoCompleteMenu.waitFor({ state: 'visible' });
-
-    const optionToSelectLowercase = optionToSelect.toLowerCase();
-
-    await this._autoCompleteMenu
-      .getByTestId(`form-field__${this._id}__select__${optionToSelectLowercase}__text`)
-      .click();
+    await this._objects.fieldInput().fill(optionToSelect);
+    await this._objects.autoCompleteMenu().waitFor({ state: 'visible' });
+    await this._objects.option(optionToSelect).click();
   }
 }
 

package/controls/FormComboBoxObjects.ts

@@ -0,0 +1,27 @@
+import type { Locator } from '@playwright/test';
+
+export class FormComboBoxObjects {
+  private _context: Locator;
+  private _id: string;
+
+  constructor(context: Locator, id: string) {
+    this._context = context;
+    this._id = id;
+  }
+
+  public field = (): Locator => this._context.getByTestId(`form-field__${this._id}`);
+
+  public autoCompleteMenu = (): Locator =>
+    this._context.page().getByTestId(`form-field__${this._id}__select__options-list`);
+
+  public option = (optionText: string): Locator => {
+    const optionTextLowercase = optionText.toLowerCase();
+    return this.autoCompleteMenu().getByTestId(`form-field__${this._id}__select__${optionTextLowercase}__text`);
+  };
+
+  public clearButton = (): Locator => this.field().locator('Button[aria-label="Clear"]');
+
+  public validationMessage = (): Locator => this.field().locator('.TooltipContainer p');
+
+  public fieldInput = (): Locator => this.field().locator('input');
+}

package/controls/GridColumnControl.ts

@@ -44,7 +44,7 @@ class GridColumnControl implements IGridColumnControlCore {
   }
 
   public async filterByColumnValueExcelStyle(value: string, deselectAll?: boolean): Promise<void> {
-    await this._grid.filterByColumnValueExcelStyle(this._id, value, deselectAll);
+    await this._grid.filterByColumnValueExcelStyle(this._objects.columnHeader(), value, deselectAll);
   }
 }
 

package/controls/GridColumnControlObjects.ts

@@ -11,7 +11,7 @@ export class GridColumnControlObjects extends BaseComponentObjects {
 
   public column = () => this.context.locator(`[col-id="${this._id}"]`);
 
-  public columnHeader = () => this.column().getByRole('columnheader');
+  public columnHeader = () => this.context.locator(`[col-id="${this._id}"][role="columnheader"]`);
 
   public cellByValue = (value: RegExp) =>
     this.column().locator('[role="button"]', {

package/controls/InputFieldControl.ts

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /** biome-ignore-all lint/suspicious/noExplicitAny: reason42 */
 import type { Locator } from '@playwright/test';
+import { InputFieldControlObjects } from './InputFieldControlObjects.js';
 
 export type IInputFieldControl = Locator & ICoreInputFieldControl;
 
@@ -15,43 +16,39 @@ export type ICoreInputFieldControl = {
 };
 
 export class InputFieldControl implements ICoreInputFieldControl {
-  private _formFieldLocator: Locator;
-  private _inputLocator: Locator;
-  private _id: string;
+  private _objects: InputFieldControlObjects;
 
   constructor(context: Locator, id: string) {
-    this._id = id;
-    this._formFieldLocator = context.getByTestId(`form-field__${id}`);
-    this._inputLocator = this._formFieldLocator.locator('input');
+    this._objects = new InputFieldControlObjects(context, id);
   }
 
   public async getValidationMessage(): Promise<string> {
-    await this._formFieldLocator.locator('.TooltipContainer p').waitFor({ state: 'visible' });
-    return await this._formFieldLocator.locator('.TooltipContainer p').innerText();
+    await this._objects.validationMessage().waitFor({ state: 'visible' });
+    return await this._objects.validationMessage().innerText();
   }
 
   public async fill(value: string): Promise<void> {
-    await this._inputLocator.fill(value);
+    await this._objects.fieldInput().fill(value);
   }
 
   public async click(): Promise<void> {
-    await this._inputLocator.click();
+    await this._objects.fieldInput().click();
   }
 
   public async clear(): Promise<void> {
-    await this._inputLocator.fill('');
+    await this._objects.fieldInput().fill('');
   }
 
   public async inputValue(): Promise<string> {
-    return await this._inputLocator.inputValue();
+    return await this._objects.fieldInput().inputValue();
   }
 
   public inputElement(): Locator {
-    return this._inputLocator;
+    return this._objects.fieldInput();
   }
 
   public async getLabelText(): Promise<string> {
-    let returnText = (await this._formFieldLocator.getByTestId(`form-field__${this._id}__label`).textContent()) || '';
+    let returnText = (await this._objects.fieldLabel().textContent()) || '';
 
     returnText = returnText.replace(/\s+/g, ' ').trim();
 

package/controls/InputFieldControlObjects.ts

@@ -0,0 +1,19 @@
+import type { Locator } from '@playwright/test';
+
+export class InputFieldControlObjects {
+  private _context: Locator;
+  private _id: string;
+
+  constructor(context: Locator, id: string) {
+    this._context = context;
+    this._id = id;
+  }
+
+  public formField = (): Locator => this._context.getByTestId(`form-field__${this._id}`);
+
+  public fieldInput = (): Locator => this.formField().locator('input');
+
+  public fieldLabel = (): Locator => this.formField().getByTestId(`form-field__${this._id}__label`);
+
+  public validationMessage = (): Locator => this.formField().locator('.TooltipContainer p');
+}

package/controls/LookupDropdown.ts

@@ -2,6 +2,7 @@
 /** biome-ignore-all lint/suspicious/noExplicitAny: needed flexibility */
 import type { Locator } from '@playwright/test';
 import { escapeRegex } from '../helpers/RegexHelper.js';
+import { LookupDropdownObjects } from './LookupDropdownObjects.js';
 
 export type ILookupDropdown = Locator & ILookupDropdownCore;
 
@@ -16,18 +17,14 @@ export type ILookupDropdownCore = {
 };
 
 class LookupDropdown implements ILookupDropdownCore {
-  private _id: string;
-  private _formFieldLocator: Locator;
-  private _inputLocator: Locator;
+  private _objects: LookupDropdownObjects;
 
   constructor(context: Locator, id: string) {
-    this._id = id;
-    this._formFieldLocator = context.getByTestId(`form-field__${this._id}`);
-    this._inputLocator = this._formFieldLocator.locator('input');
+    this._objects = new LookupDropdownObjects(context, id);
   }
 
   public async getLabelText(): Promise<string> {
-    let returnText = (await this._formFieldLocator.getByTestId(`form-field__${this._id}__label`).textContent()) || '';
+    let returnText = (await this._objects.label().textContent()) || '';
 
     returnText = returnText.replace(/\s+/g, ' ').trim();
 
@@ -35,69 +32,71 @@ class LookupDropdown implements ILookupDropdownCore {
   }
 
   public async lookupSelect(optionToSelect: string): Promise<void> {
-    await this._inputLocator.fill(optionToSelect);
+    await this._objects.input().fill(optionToSelect);
     await this.select(optionToSelect);
   }
 
   public async inputValue(): Promise<string> {
-    return await this._inputLocator.inputValue();
+    return await this._objects.input().inputValue();
   }
 
   public async clear(): Promise<void> {
-    await this._inputLocator.fill('');
+    await this._objects.input().fill('');
   }
 
   public async selectOption(optionText: string): Promise<void> {
-    await this._inputLocator.click();
+    await this._objects.input().click();
     await this.select(optionText);
   }
 
   public async getValidationMessage(): Promise<string> {
-    await this._formFieldLocator.locator('.TooltipContainer p').waitFor({ state: 'visible' });
-    return await this._formFieldLocator.locator('.TooltipContainer p').innerText();
+    await this._objects.validationMessage().waitFor({ state: 'visible' });
+    return await this._objects.validationMessage().innerText();
   }
 
   public async fill(value: string): Promise<void> {
     await Promise.all([
-      this._formFieldLocator
+      this._objects
+        .input()
         .page()
         .waitForResponse((response) => response.url().includes('/list_') && response.request().method() === 'GET'),
-      this._inputLocator.click()
+      this._objects.input().click()
     ]);
 
     await Promise.all([
-      this._formFieldLocator
+      this._objects
+        .input()
         .page()
         .waitForResponse((response) => response.url().includes('/list_') && response.request().method() === 'GET'),
-      this._inputLocator.fill(value)
+      this._objects.input().fill(value)
     ]);
   }
 
   private async select(optionToSelect: string) {
     const optionsToSelectRegex = new RegExp(`^${escapeRegex(optionToSelect)}$`, 'i');
 
-    await this._formFieldLocator.page().getByTestId('autocomplete__menu').getByText(optionsToSelectRegex).click();
-    await this._formFieldLocator
+    await this._objects.input().page().getByTestId('autocomplete__menu').getByText(optionsToSelectRegex).click();
+    await this._objects
+      .input()
       .page()
-      .waitForFunction((el) => document.activeElement === el, await this._inputLocator.elementHandle());
+      .waitForFunction((el) => document.activeElement === el, await this._objects.input().elementHandle());
   }
 }
 
 export function createLookupDropdown(context: Locator, id: string): ILookupDropdown {
   const dropdown = new LookupDropdown(context, id);
+  const customProps = new Set(Object.getOwnPropertyNames(LookupDropdown.prototype).filter((p) => p !== 'constructor'));
 
-  return new Proxy(dropdown, {
+  return new Proxy(context, {
     get(target, prop, receiver) {
-      if (prop in target) {
-        return Reflect.get(target, prop, receiver);
+      if (customProps.has(prop as string)) {
+        const value = (dropdown as any)[prop];
+        if (typeof value === 'function') {
+          return value.bind(dropdown);
+        }
+        return value;
       }
-
-      const value = (dropdown as any)[prop];
-
-      if (typeof value === 'function') {
-        return value.bind(dropdown);
-      }
-      return value;
+      return Reflect.get(target, prop, receiver);
     }
   }) as unknown as ILookupDropdown;
 }

package/controls/LookupDropdownObjects.ts

@@ -0,0 +1,19 @@
+import type { Locator } from '@playwright/test';
+
+export class LookupDropdownObjects {
+  private _id: string;
+  private _context: Locator;
+
+  constructor(context: Locator, id: string) {
+    this._context = context;
+    this._id = id;
+  }
+
+  public formField = (): Locator => this._context.getByTestId(`form-field__${this._id}`);
+
+  public label = (): Locator => this.formField().getByTestId(`form-field__${this._id}__label`);
+
+  public input = (): Locator => this.formField().locator('input');
+
+  public validationMessage = (): Locator => this.formField().locator('.TooltipContainer p');
+}