@thinkwise/testwise 0.2.21 → 0.2.62

package/components/filter/ManagePrefilterPopupObjects.ts

@@ -0,0 +1,28 @@
+import type { Locator, Page } from '@playwright/test';
+import { BaseComponentObjects } from '../BaseComponentObjects.js';
+
+export class ManagePrefilterPopupObjects extends BaseComponentObjects {
+  private _page: Page;
+
+  constructor(page: Page) {
+    super(page, page.locator('body'));
+    this._page = page;
+  }
+
+  public dialog = () =>
+    this._page
+      .locator('[role="dialog"]')
+      .filter({ has: this._page.getByTestId('popup__userpreferenceprefilterpopup__title') });
+
+  public list = () => this._page.getByTestId('popup__user-preference__up-prefilters');
+
+  // The <li> has a GUID testid, so don't use it. Use "li hasText"
+  public rowByName = (name: string) => {
+    const nameSpan = this.list().getByText(name, { exact: true });
+    return nameSpan.locator('xpath=ancestor::li[1]');
+  };
+
+  public deleteButtonByRow = (row: Locator) => row.locator('button:has([data-testid="DeleteIcon"])');
+
+  public closeButton = () => this.dialog().getByTestId('popup__userpreferenceprefilterpopup__actions__close');
+}

package/components/form/Form.ts

@@ -1,11 +1,11 @@
-import type { Locator, Page } from '@playwright/test';
+import type { Locator } from '@playwright/test';
 import { FormObjects } from './FormObjects.js';
 
 export class Form {
   private _objects: FormObjects;
 
-  constructor(page: Page, formContext: Locator | null = null) {
-    this._objects = new FormObjects(page, formContext);
+  constructor(formContext: Locator) {
+    this._objects = new FormObjects(formContext.page(), formContext);
   }
 
   public getFieldByValue = (value: string): Locator => {

package/components/grid/Grid.ts

@@ -7,9 +7,9 @@ export class Grid {
   private _gridObjects: GridObjects;
   private _page: Page;
 
-  constructor(page: Page, gridContext: Locator | null = null) {
-    this._gridObjects = new GridObjects(page, gridContext);
-    this._page = page;
+  constructor(gridContext: Locator) {
+    this._gridObjects = new GridObjects(gridContext.page(), gridContext);
+    this._page = gridContext.page();
   }
 
   protected get page() {
@@ -84,138 +84,34 @@ export class Grid {
   }
 
   /**
-   * Scrolls through the vertical grid viewport to ensure that all rows are loaded.
-   *
-   * This method scrolls the grid's vertical scrollbar in increments equal to the visible height of the viewport
-   * until no further scrolling is possible. It optionally executes a callback after each scroll step, which can
-   * be used to process loaded content (e.g., extract cell values).
-   *
-   * @param {Locator} scrollbar - Locator pointing to the grid's vertical scrollbar container.
-   * @param {() => Promise<void>} onScrollStep - Optional async callback invoked after each scroll step.
-   * @returns {Promise<void>} A promise that resolves once the scrolling is complete.
-   */
-  private async scrollGridToLoadAllRows(scrollbar: Locator, onScrollStep?: () => Promise<void>): Promise<void> {
-    // Reset scroll to the top to start from the beginning
-    await scrollbar.evaluate((el) => {
-      el.scrollTop = 0;
-    });
-
-    let lastScrollTop = -1;
-
-    while (true) {
-      // Get the current vertical scroll position
-      const scrollTop = await scrollbar.evaluate((el) => el.scrollTop);
-
-      // Stop if the scroll position hasn’t changed — end of scroll reached
-      if (scrollTop === lastScrollTop) break;
-
-      lastScrollTop = scrollTop;
-
-      // Scroll one viewport height down
-      await scrollbar.evaluate((el) => {
-        el.scrollBy({ top: el.clientHeight, behavior: 'instant' });
-      });
-
-      // Optional callback to collect or act on content loaded during this scroll step
-      if (onScrollStep) {
-        await onScrollStep();
-      }
-
-      // Wait briefly for the new rows to render
-      await this._page.waitForTimeout(100);
-    }
-  }
-
-  /**
-   * Retrieves all unique cell values from a specific column in the grid,
-   * including values that are only loaded upon scrolling.
-   *
-   * Internally uses vertical scrolling to ensure that all rows are loaded,
-   * and collects cell text content from the specified column.
-   *
-   * @param {string} colId - The ID of the column to extract values from.
-   * @returns {Promise<string[]>} A promise that resolves to an array of unique values from the column.
+   * Gets all unique cell values for a specified column by its column ID.
    */
   public async getCellValuesByColId(colId: string): Promise<string[]> {
-    // Locator for vertical scrollbar used to scroll through grid rows
-    const scrollbar = this._gridObjects.verticalScrollbar();
-    // Locator for cells in the specified column using AG Grid col-id
     const cellsLocator = this._gridObjects.cellsByColumnId(colId);
-    // Use a Set to ensure uniqueness of values
+    const visibleValues = await cellsLocator.allTextContents();
     const collected = new Set<string>();
-    // Scroll the grid and collect visible cell values after each scroll step
-    await this.scrollGridToLoadAllRows(scrollbar, async () => {
-      const visibleValues = await cellsLocator.allTextContents();
-
-      for (const value of visibleValues.map((value: string) => value.trim()).filter(Boolean)) {
-        collected.add(value);
-      }
-    });
-    // Return unique values as an array
-    return Array.from(collected);
-  }
-
-  /**
-   * Scrolls through the horizontal grid viewport to ensure all columns are loaded.
-   *
-   * This method scrolls the grid's horizontal scrollbar in increments equal to the visible width
-   * of the viewport until no further scrolling is possible. It optionally executes a callback
-   * after each scroll step, useful for collecting or processing visible column headers.
-   *
-   * @param {Locator} scrollbar - Locator pointing to the horizontal scrollbar container.
-   * @param {() => Promise<void>} onScrollStep - Optional async callback executed after each scroll step.
-   * @returns {Promise<void>} A promise that resolves when horizontal scrolling is complete.
-   */
-  private async scrollGridHorizontallyToLoadAllColumns(
-    scrollbar: Locator,
-    onScrollStep?: () => Promise<void>
-  ): Promise<void> {
-    // Reset scroll to the far left
-    await scrollbar.evaluate((el) => {
-      el.scrollLeft = 0;
-    });
-
-    let lastScrollLeft = -1;
-
-    while (true) {
-      const scrollLeft = await scrollbar.evaluate((el) => el.scrollLeft);
 
-      // Exit loop if no further horizontal scroll is possible
-      if (scrollLeft === lastScrollLeft) break;
-      lastScrollLeft = scrollLeft;
-
-      // Scroll one viewport width to the right
-      await scrollbar.evaluate((el) => {
-        el.scrollBy({ left: el.clientWidth, behavior: 'instant' });
-      });
-
-      if (onScrollStep) {
-        await onScrollStep();
-      }
-
-      await this._page.waitForTimeout(100); // Allow time for rendering
+    for (const value of visibleValues.map((value: string) => value.trim()).filter(Boolean)) {
+      collected.add(value);
     }
+
+    return Array.from(collected);
   }
 
   /**
-   * Retrieves all column header values from the grid, including those that require horizontal scrolling to load.
+   * Retrieves all column header values from the grid.
    *
-   * This method scrolls through the grid horizontally to ensure all columns are rendered,
-   * collects the text content of each header, and returns a unique list of trimmed, non-empty values.
+   * This method collects the text content of each header and returns a unique list of trimmed, non-empty values.
    *
    * @returns {Promise<string[]>} A promise that resolves to an array of unique column header values.
    */
   public async getColumnHeaderValues(): Promise<string[]> {
-    const scrollbar = this._gridObjects.horizontalScrollbar();
     const headersLocator = this._gridObjects.columnHeaders();
     const collected = new Set<string>();
-
-    await this.scrollGridHorizontallyToLoadAllColumns(scrollbar, async () => {
-      const visibleHeaders = await headersLocator.allTextContents();
-      for (const header of visibleHeaders.map((header) => header.trim()).filter(Boolean)) {
-        collected.add(header);
-      }
-    });
+    const visibleHeaders = await headersLocator.allTextContents();
+    for (const header of visibleHeaders.map((header) => header.trim()).filter(Boolean)) {
+      collected.add(header);
+    }
 
     return Array.from(collected);
   }

package/components/grid/GridObjects.ts

@@ -29,10 +29,6 @@ export class GridObjects extends BaseComponentObjects {
 
   public rows = () => this.context.locator('[role="row"]');
 
-  public verticalScrollbar = () => this.context.locator('.ag-body-vertical-scroll-viewport');
-
-  public horizontalScrollbar = () => this.context.locator('.ag-body-horizontal-scroll-viewport');
-
   public cellsByColumnId = (colId: string) => this.context.locator(`[col-id="${colId}"] .value-renderer`);
 
   public columnByRowLocator = (rowLocator: Locator) => rowLocator.locator('.ag-cell');

package/components/index.ts

@@ -5,13 +5,17 @@ export * from './chart/Chart.js';
 export * from './combined-filter/CombinedFilter.js';
 export * from './cube-view-bar/CubeViewBar.js';
 export * from './export/ExportComponent.js';
+export * from './filter/ExcelStyleFilterPopup.js';
 export * from './filter/FilterForm.js';
+export * from './filter/FilterPopup.js';
+export * from './filter/ManagePrefilterPopup.js';
 export * from './form/Form.js';
 export * from './grid/Grid.js';
 export * from './maps/Maps.js';
 export * from './menu/ListBarMenuComponent.js';
 export * from './pivot-grid/PivotGrid.js';
 export * from './pivot-grid/PivotGridFieldList.js';
+export * from './pop-up/AllRowsPopUp.js';
 export * from './pop-up/PopUpComponent.js';
 export * from './prefilter-list/PrefilterList.js';
 export * from './preview/Preview.js';

package/components/maps/Maps.ts

@@ -1,11 +1,11 @@
-import type { Locator, Page } from '@playwright/test';
+import type { Locator } from '@playwright/test';
 import { MapsObjects } from './MapsObjects.js';
 
 export class Maps {
   mapsObjects: MapsObjects;
 
-  constructor(page: Page, context: Locator | null = null) {
-    this.mapsObjects = new MapsObjects(page, context);
+  constructor(context: Locator) {
+    this.mapsObjects = new MapsObjects(context.page(), context);
   }
 
   public get context(): Locator | null {

package/components/menu/ListBarMenuComponent.ts

@@ -34,4 +34,15 @@ export class ListBarMenuComponent {
   public getMenuItemByName(groupName: string, itemName: string): Locator {
     return this._objects.menuItem(groupName, itemName);
   }
+
+  /**
+   * Closes a document in the list bar.
+   * @param documentId The ID of the document to close.
+   * @param hasUnsavedChanges Whether the document has unsaved changes.
+   */
+  public async closeDocument(documentId: string, hasUnsavedChanges: boolean = false) {
+    if (hasUnsavedChanges) await this._objects.openedDocumentUnsavedChangesIcon(documentId).hover();
+
+    await this._objects.openedDocumentCloseButton(documentId).click();
+  }
 }

package/components/menu/ListBarMenuComponentObjects.ts

@@ -11,4 +11,10 @@ export class ListBarMenuComponentObjects {
 
   public menuItem = (groupName: string, itemName: string) =>
     this._page.locator(`[data-testid="listbar__${groupName}__item__${itemName}"]`);
+
+  public openedDocumentCloseButton = (documentId: string) =>
+    this._page.locator(`[data-testid^="opened-document__${documentId}"][data-testid$="__close"]`);
+
+  public openedDocumentUnsavedChangesIcon = (documentId: string) =>
+    this._page.locator(`[data-testid^="opened-document__${documentId}"][data-testid$="__unsaved-changes"]`);
 }

package/components/pivot-grid/PivotGrid.ts

@@ -1,11 +1,11 @@
-import type { Locator, Page } from '@playwright/test';
+import type { Locator } from '@playwright/test';
 import { PivotGridObjects } from './PivotGridObjects.js';
 
 export class PivotGrid {
   pivotGridObjects: PivotGridObjects;
 
-  constructor(page: Page, context: Locator | null = null) {
-    this.pivotGridObjects = new PivotGridObjects(page, context);
+  constructor(context: Locator) {
+    this.pivotGridObjects = new PivotGridObjects(context.page(), context);
   }
 
   public get context(): Locator | null {

package/components/pivot-grid/PivotGridFieldList.ts

@@ -1,11 +1,11 @@
-import type { Locator, Page } from '@playwright/test';
+import type { Locator } from '@playwright/test';
 import { PivotGridFieldListObjects } from './PivotGridFieldListObjects.js';
 
 export class PivotGridFieldList {
   pivotGridFieldListObjects: PivotGridFieldListObjects;
 
-  constructor(page: Page, context: Locator | null = null) {
-    this.pivotGridFieldListObjects = new PivotGridFieldListObjects(page, context);
+  constructor(context: Locator) {
+    this.pivotGridFieldListObjects = new PivotGridFieldListObjects(context.page());
   }
 
   public get context(): Locator | null {

package/components/pop-up/AllRowsPopUp.ts

@@ -0,0 +1,29 @@
+import type { Locator, Page } from '@playwright/test';
+import { pollUntil } from '../../helpers/Poll.js';
+import { AllRowsPopupObjects } from './AllRowsPopUpObjects.js';
+
+export class AllRowsPopup {
+  private readonly deletePopup: boolean;
+  private _allRowsPopupObjects: AllRowsPopupObjects;
+
+  constructor(page: Page, deletePopup?: boolean) {
+    this.deletePopup = deletePopup ?? false;
+    this._allRowsPopupObjects = new AllRowsPopupObjects(page);
+  }
+
+  anchor(): Locator {
+    return this._allRowsPopupObjects.anchor(this.deletePopup);
+  }
+
+  async waitForOpen(): Promise<void> {
+    await pollUntil(() => this._allRowsPopupObjects.anchor(this.deletePopup).isVisible(), { predicate: Boolean });
+  }
+
+  public selectedRowsRadioButton = (): Locator => this._allRowsPopupObjects.selectedRowsRadioButton();
+
+  public allRowsRadioButton = (): Locator => this._allRowsPopupObjects.allRowsRadioButton();
+
+  public confirmButton = (): Locator => this._allRowsPopupObjects.confirmButton();
+
+  public cancelButton = (): Locator => this._allRowsPopupObjects.cancelButton();
+}

package/components/pop-up/AllRowsPopUpObjects.ts

@@ -0,0 +1,22 @@
+import type { Page } from '@playwright/test';
+import { BaseComponentObjects } from '../BaseComponentObjects.js';
+
+export class AllRowsPopupObjects extends BaseComponentObjects {
+  private _page: Page;
+
+  constructor(page: Page) {
+    super(page, page.locator('body'));
+    this._page = page;
+  }
+
+  public anchor = (deletePopup: boolean) =>
+    this._page.getByTestId(deletePopup ? 'popup__allrowsdelete__content' : 'popup__allrows__content');
+
+  public selectedRowsRadioButton = () => this._page.getByTestId('radio-button-option__selected-rows__input');
+
+  public allRowsRadioButton = () => this._page.getByTestId('radio-button-option__all-rows__input');
+
+  public confirmButton = () => this._page.getByTestId('all-rows-complete-button');
+
+  public cancelButton = () => this._page.getByTestId('all-rows-cancel-button');
+}

package/components/prefilter-list/PrefilterList.ts

@@ -1,11 +1,11 @@
-import type { Locator, Page } from '@playwright/test';
+import type { Locator } from '@playwright/test';
 import { PrefilterListObjects } from './PrefilterListObjects.js';
 
 export class PrefilterList {
   prefilterListObjects: PrefilterListObjects;
 
-  constructor(page: Page, context: Locator | null = null) {
-    this.prefilterListObjects = new PrefilterListObjects(page, context);
+  constructor(context: Locator) {
+    this.prefilterListObjects = new PrefilterListObjects(context.page(), context);
   }
 
   public get context(): Locator | null {

package/components/preview/Preview.ts

@@ -1,11 +1,11 @@
-import type { Locator, Page } from '@playwright/test';
+import type { Locator } from '@playwright/test';
 import { PreviewObjects } from './PreviewObjects.js';
 
 export class Preview {
   previewObjects: PreviewObjects;
 
-  constructor(page: Page, context: Locator | null = null) {
-    this.previewObjects = new PreviewObjects(page, context);
+  constructor(context: Locator) {
+    this.previewObjects = new PreviewObjects(context.page(), context);
   }
 
   public get context(): Locator | null {

package/components/report-bar/ReportBar.ts

@@ -1,11 +1,11 @@
-import type { Locator, Page } from '@playwright/test';
+import type { Locator } from '@playwright/test';
 import { ReportBarObjects } from './ReportBarObjects.js';
 
 export class ReportBar {
   reportBarObjects: ReportBarObjects;
 
-  constructor(page: Page, context: Locator | null = null) {
-    this.reportBarObjects = new ReportBarObjects(page, context);
+  constructor(context: Locator) {
+    this.reportBarObjects = new ReportBarObjects(context.page(), context);
   }
 
   public get context(): Locator | null {

package/components/report-tiles/ReportTiles.ts

@@ -1,11 +1,11 @@
-import type { Locator, Page } from '@playwright/test';
+import type { Locator } from '@playwright/test';
 import { ReportTilesObjects } from './ReportTilesObjects.js';
 
 export class ReportTiles {
   reportTilesObjects: ReportTilesObjects;
 
-  constructor(page: Page, context: Locator | null = null) {
-    this.reportTilesObjects = new ReportTilesObjects(page, context);
+  constructor(context: Locator) {
+    this.reportTilesObjects = new ReportTilesObjects(context.page(), context);
   }
 
   public get context(): Locator | null {

package/components/scheduler/Scheduler.ts

@@ -1,11 +1,11 @@
-import type { Locator, Page } from '@playwright/test';
+import type { Locator } from '@playwright/test';
 import { SchedulerObjects } from './SchedulerObjects.js';
 
 export class Scheduler {
   treeViewObjects: SchedulerObjects;
 
-  constructor(page: Page, context: Locator | null = null) {
-    this.treeViewObjects = new SchedulerObjects(page, context);
+  constructor(context: Locator) {
+    this.treeViewObjects = new SchedulerObjects(context.page(), context);
   }
 
   public get context(): Locator | null {

package/components/splitter/Splitter.ts

@@ -1,11 +1,11 @@
-import type { Locator, Page } from '@playwright/test';
+import type { Locator } from '@playwright/test';
 import { SplitterObjects } from './SplitterObjects.js';
 
 export class Splitter {
   splitterObjects: SplitterObjects;
 
   // ToDo: this is not the correct implementation, its temporary to allow generation to continue
-  constructor(page: Page, context: Locator | null = null) {
-    this.splitterObjects = new SplitterObjects(page, context);
+  constructor(context: Locator) {
+    this.splitterObjects = new SplitterObjects(context.page(), context);
   }
 }

package/components/tab/BaseTab.ts

@@ -1,11 +1,11 @@
-import type { Locator, Page } from '@playwright/test';
+import type { Locator } 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);
+  constructor(context: Locator) {
+    this._objects = new BaseTabObjects(context.page(), context);
   }
 
   // --- Common actions ---

package/components/tab/DetailTabPage.ts

@@ -1,13 +1,13 @@
-import type { Locator, Page } from '@playwright/test';
+import type { Locator } from '@playwright/test';
 import { BaseTab } from './BaseTab.js';
 import { DetailTabPageObjects } from './DetailTabPageObjects.js';
 
 export class DetailTabPage extends BaseTab {
   protected _objects: DetailTabPageObjects;
 
-  constructor(page: Page, context: Locator | null = null) {
-    super(page, context);
-    this._objects = new DetailTabPageObjects(page, context);
+  constructor(context: Locator) {
+    super(context);
+    this._objects = new DetailTabPageObjects(context.page(), context);
   }
 
   public getDetailTabPageById(name: string): Locator {

package/components/tab/Tab.ts

@@ -1,13 +1,13 @@
-import type { Locator, Page } from '@playwright/test';
+import type { Locator } from '@playwright/test';
 import { BaseTab } from './BaseTab.js';
 import { TabObjects } from './TabObjects.js';
 
 export class Tab extends BaseTab {
   protected _objects: TabObjects;
 
-  constructor(page: Page, context: Locator | null = null) {
-    super(page, context);
-    this._objects = new TabObjects(page, context);
+  constructor(context: Locator) {
+    super(context);
+    this._objects = new TabObjects(context.page(), context);
   }
 
   // --- Component-specific helpers ---

package/components/task/TaskBar.ts

@@ -1,4 +1,4 @@
-import type { Locator, Page } from '@playwright/test';
+import type { Locator } from '@playwright/test';
 import { TaskBarObjects } from './TaskBarObjects.js';
 
 export class TaskBar {
@@ -7,8 +7,8 @@ export class TaskBar {
   /**
    * @param taskBarContext the taskbar container element (same idea as Grid's context)
    */
-  constructor(page: Page, taskBarContext: Locator | null = null) {
-    this._taskBarObjects = new TaskBarObjects(page, taskBarContext);
+  constructor(taskBarContext: Locator) {
+    this._taskBarObjects = new TaskBarObjects(taskBarContext.page(), taskBarContext);
   }
 
   /** returns all task buttons */

package/components/task/TaskTiles.ts

@@ -1,4 +1,4 @@
-import type { Locator, Page } from '@playwright/test';
+import type { Locator } from '@playwright/test';
 import { TaskTilesObjects } from './TaskTilesObjects.js';
 
 export class TaskTiles {
@@ -7,8 +7,8 @@ export class TaskTiles {
   /**
    * @param taskTilesContext the taskTiles container element
    */
-  constructor(page: Page, taskTilesContext: Locator | null = null) {
-    this._taskTilesObjects = new TaskTilesObjects(page, taskTilesContext);
+  constructor(taskTilesContext: Locator) {
+    this._taskTilesObjects = new TaskTilesObjects(taskTilesContext.page(), taskTilesContext);
   }
 
   /** returns all task tile buttons */

package/components/topbar/TopBar.ts

@@ -11,4 +11,6 @@ export class TopBarComponent {
   public getTopBarTitle = () => this._objects.topBarTitle();
 
   public getTopBarBreadcrumb = () => this._objects.topBarBreadcrumb();
+
+  public getMainHeader = () => this._objects.mainHeader;
 }

package/components/tree-view/TreeView.ts

@@ -1,11 +1,11 @@
-import type { Locator, Page } from '@playwright/test';
+import type { Locator } from '@playwright/test';
 import { TreeViewObjects } from './TreeViewObjects.js';
 
 export class TreeView {
   treeViewObjects: TreeViewObjects;
 
-  constructor(page: Page, context: Locator | null = null) {
-    this.treeViewObjects = new TreeViewObjects(page, context);
+  constructor(context: Locator) {
+    this.treeViewObjects = new TreeViewObjects(context.page(), context);
   }
 
   public get context(): Locator | null {

package/controls/DateControl.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* biome-ignore-all lint/suspicious/noExplicitAny: reason42 */
-import type { Locator, Page } from '@playwright/test';
+import type { Locator } from '@playwright/test';
 
 export type IDateControl = Locator & IDateControlCore;
 
@@ -15,8 +15,8 @@ export class DateControl implements IDateControlCore {
   private _dateFieldLocator: Locator;
   private _inputLocator: Locator;
 
-  constructor(page: Page, id: string) {
-    this._dateFieldLocator = page.getByTestId(`form-field__${id}`);
+  constructor(context: Locator, id: string) {
+    this._dateFieldLocator = context.getByTestId(`form-field__${id}`);
     this._inputLocator = this._dateFieldLocator.locator('input');
   }
 
@@ -47,9 +47,9 @@ export class DateControl implements IDateControlCore {
   }
 }
 
-export function createDateControl(page: Page, id: string): IDateControl {
-  const inputFieldControl = new DateControl(page, id);
-  const locator = page.getByTestId(`form-field__${id}`);
+export function createDateControl(context: Locator, id: string): IDateControl {
+  const inputFieldControl = new DateControl(context, id);
+  const locator = context.getByTestId(`form-field__${id}`);
 
   return new Proxy(inputFieldControl, {
     get(target, prop, receiver) {

package/controls/FormComboBox.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* biome-ignore-all lint/suspicious/noExplicitAny: Reason42 */
-import type { Locator, Page } from '@playwright/test';
+import type { Locator } from '@playwright/test';
 
 export type IFormComboBox = Locator & IFormComboBoxCore;
 
@@ -16,10 +16,10 @@ class FormComboBox implements IFormComboBoxCore {
   private _autoCompleteMenu: Locator;
   private _id: string;
 
-  constructor(page: Page, id: string) {
+  constructor(context: Locator, id: string) {
     this._id = id;
-    this._formFieldLocator = page.getByTestId(`form-field__${id}`);
-    this._autoCompleteMenu = page.getByTestId(`form-field__${id}__select__options-list`);
+    this._formFieldLocator = context.getByTestId(`form-field__${id}`);
+    this._autoCompleteMenu = context.getByTestId(`form-field__${id}__select__options-list`);
   }
 
   async selectOption(optionText: string): Promise<void> {
@@ -53,9 +53,9 @@ class FormComboBox implements IFormComboBoxCore {
   }
 }
 
-export function createFormComboBox(page: Page, id: string): IFormComboBox {
-  const comboBox = new FormComboBox(page, id);
-  const locator = page.getByTestId(`form-field__${id}`);
+export function createFormComboBox(context: Locator, id: string): IFormComboBox {
+  const comboBox = new FormComboBox(context, id);
+  const locator = context.getByTestId(`form-field__${id}`);
 
   return new Proxy(comboBox, {
     get(target, prop, receiver) {