@thinkwise/testwise 0.2.21 → 0.2.67

package/components/filter/FilterPopupObjects.ts

@@ -0,0 +1,63 @@
+import type { Locator, Page } from '@playwright/test';
+import { BaseComponentObjects } from '../BaseComponentObjects.js';
+import type { AutocompleteKey } from './FilterPopup.js';
+
+export class FilterPopupObjects extends BaseComponentObjects {
+  private _page: Page;
+
+  constructor(page: Page, body: Locator) {
+    super(page, body);
+    this._page = page;
+  }
+
+  public applyFilterButton = () => this.context.getByTestId('split-button-main');
+
+  public applySaveButton = () => this.context.getByTestId('split-button-arrow');
+
+  public advancedToggleCheckbox = () => this._page.getByRole('checkbox', { name: 'Advanced filter' });
+
+  public advancedGroupSelect = () => this.context.getByTestId('advanced-filter-group-select');
+
+  public groupConditionOption = (key: 'all-of-the-following' | 'any-of-the-following') =>
+    this._page.getByTestId(`group-condition-select__${key}`);
+
+  public fieldInput = (fieldId: string) => this.context.getByTestId(`form-field__${fieldId}__input`);
+
+  public prefilterNameInput = () => this.context.getByTestId('prefilter__name__input');
+
+  public saveAsOption = () => this._page.getByRole('menuitem', { name: 'Save' });
+
+  public saveButton = () => this._page.getByRole('button', { name: 'Save' });
+
+  public valueInput = (fieldId: string, part: string) =>
+    this.context.getByTestId(`form-field__${fieldId}__${part}__input`);
+
+  public dateInput = (fieldId: string) => this.valueInput(fieldId, 'date');
+
+  public fieldControl = (fieldId: string, part: string) =>
+    this.context.getByTestId(`form-field__${fieldId}__${part}__control`).getByRole('button', { name: 'Open' });
+
+  public operatorControl = (fieldId: string) =>
+    this.context.getByTestId(`form-field__${fieldId}__operator__control`).getByRole('button', { name: 'Open' });
+
+  public timeOperatorControl = () =>
+    this.context.getByTestId('form-field__event-time__operator__control').getByRole('button', { name: 'Open' });
+
+  public intervalSelector = (rowIndex: number, colId: string) =>
+    this.context.getByTestId(`advanced-filter-grid__row${rowIndex}__${colId}__select-interval`);
+
+  public intervalSelectorInput = (rowIndex: number, colId: string) =>
+    this.intervalSelector(rowIndex, colId).getByTestId('select-interval__input');
+
+  public autocompleteOption = (key: AutocompleteKey) => this._page.getByTestId(`autocomplete-option-${key}`);
+
+  public emptySelectFieldRow = () => this.context.getByTestId('advanced-filter-grid__row-empty-select-field');
+
+  public emptySelectFieldRowButton = () => this.emptySelectFieldRow().getByRole('button');
+
+  public selectFieldButton = () => this._page.getByRole('button', { name: 'Select field' });
+
+  public addFieldButton = () => this._page.getByRole('button', { name: 'Add field' });
+
+  public colIdOption = (field: string) => this._page.getByTestId(`col-id-${field}`);
+}

package/components/filter/ManagePrefilterPopup.ts

@@ -0,0 +1,44 @@
+import type { Locator, Page } from '@playwright/test';
+import { PopUpComponent } from '../pop-up/PopUpComponent.js';
+import { ManagePrefilterPopupObjects } from './ManagePrefilterPopupObjects.js';
+
+export class ManagePrefilterPopup extends PopUpComponent {
+  private readonly _page: Page;
+  private _managePrefilterPopupObjects: ManagePrefilterPopupObjects;
+
+  constructor(page: Page) {
+    super(page);
+    this._page = page;
+    this._managePrefilterPopupObjects = new ManagePrefilterPopupObjects(page);
+  }
+
+  public dialog(): Locator {
+    return this._managePrefilterPopupObjects.dialog();
+  }
+
+  public list(): Locator {
+    return this._managePrefilterPopupObjects.list();
+  }
+
+  public getRowByName(name: string): Locator {
+    return this._managePrefilterPopupObjects.rowByName(name);
+  }
+
+  public async closeDialog(): Promise<void> {
+    await this._managePrefilterPopupObjects.closeButton().click();
+  }
+
+  public async deletePrefilterAndConfirm(name: string): Promise<void> {
+    const row = this.getRowByName(name);
+    await this._managePrefilterPopupObjects.deleteButtonByRow(row).click();
+    await this.confirmDelete();
+  }
+
+  public async confirmDelete(): Promise<void> {
+    await this._page.components.popUp.getActionButtonByText('yes').click();
+  }
+
+  public async confirmNo(): Promise<void> {
+    await this._page.components.popUp.getActionButtonByText('no').click();
+  }
+}

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

@@ -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(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();
+    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 });
   };
 
@@ -84,138 +90,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);
   }
@@ -231,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 });
@@ -29,26 +26,10 @@ 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');
 
-  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/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 {