@thinkwise/testwise 0.2.20 → 0.2.62

package/Testwise.ts

@@ -7,6 +7,8 @@ import { ClickOverride } from './page-overrides/ClickOverride.js';
 import { FillOverride } from './page-overrides/FillOverride.js';
 import type { Test } from './types/Test.js';
 
+export * from '@playwright/test';
+
 function combineExtensions(baseTest: Test, ...extensions: { new (test: Test): { test: Test } }[]) {
   return extensions.reduce((test, Extension) => new Extension(test).test, baseTest);
 }

package/artifact-builder/SelectorBuilder.ts

@@ -60,7 +60,7 @@ export class SelectorBuilder {
     );
   }
 
-  public getPageLocatorString(property: string, componentName: SubjectComponents): string {
+  public getLocatorString(property: string, componentName: SubjectComponents): string {
     let elementId = this.getElementId(property, componentName);
 
     if (componentName === 'Grid') elementId = elementId.replace(/-/g, '_');
@@ -69,7 +69,7 @@ export class SelectorBuilder {
     const defaultSuffix = this.getDefaultSuffix(componentName);
     const selectorSuffix = this.determineSelectorSuffix(property, componentName) || defaultSuffix;
 
-    return `page.${this.getLocatorType(componentName)}('${selectorPrefix}${elementId}${selectorSuffix}')`;
+    return `this._context.${this.getLocatorType(componentName)}('${selectorPrefix}${elementId}${selectorSuffix}')`;
   }
 
   private getLocatorType(componentName: SubjectComponents): LocatorType {

package/artifact-builder/SubjectComponentGenerator.ts

@@ -118,9 +118,12 @@ export class SubjectComponentGenerator {
         const classBody =
           componentName === 'Grid'
             ? `\nexport class ${mainInterface}Component extends ${componentName} implements ${mainInterface} {\n\n` +
-              `  constructor(page: Page, context: Locator | null = null) {\n    super(page, context);\n  }\n\n${gridGetters}}\n`
-            : `\nexport class ${mainInterface}Component extends ${componentName} implements ${mainInterface} {\n${propertyDeclarations}\n\n` +
-              `  constructor(page: Page, context: Locator | null = null) {\n    super(page, context);\n${assignments}\n  }\n}\n`;
+              `  private _context: Locator;\n\n` +
+              `  constructor(context: Locator) {\n    super(context);\n    this._context = context;\n  }\n\n${gridGetters}}\n`
+            : `\nexport class ${mainInterface}Component extends ${componentName} implements ${mainInterface} {\n\n` +
+              `  private _context: Locator;\n` +
+              `${propertyDeclarations}\n\n` +
+              `  constructor(context: Locator) {\n    super(context);\n    this._context = context;\n${assignments}\n  }\n}\n`;
 
         componentFile.content += classBody;
       }
@@ -145,7 +148,7 @@ export class SubjectComponentGenerator {
     const interfaceRegex = /export interface \w+ extends Grid \{([\s\S]*?)\}/g;
 
     componentFile.content = componentFile.content.replace(interfaceRegex, (match, body) => {
-      const transformedBody = body.replace(/(\w+)\s*:\s*Locator(?:\[\])?;/g, 'readonly $1: Promise<Locator[]>;');
+      const transformedBody = body.replace(/(\w+)\s*:\s*Locator(?:\[\])?;/g, 'readonly $1: IGridColumnControl;');
       return match.replace(body, transformedBody);
     });
   }
@@ -154,9 +157,9 @@ export class SubjectComponentGenerator {
     return propertyLines
       .map((line) => {
         const property = line.replace('readonly', '').split(':')[0].trim();
-        const pageLocatorString = this._selectorBuilder.getPageLocatorString(property, componentName);
+        const columnId = this._selectorBuilder.getElementId(property, componentName);
 
-        return `  get ${property}(): Promise<Locator[]> {\n    return this.${pageLocatorString}.all();\n  }\n`;
+        return `  public get ${property}(): IGridColumnControl {\n    return createGridColumnControl(this._context, '${columnId}');\n  }\n`;
       })
       .join('\n');
   }
@@ -178,19 +181,20 @@ export class SubjectComponentGenerator {
     return propertyLines
       .map((line) => {
         const property = line.split(':')[0].replace(/\?$/, '').trim();
-        const pageLocatorString = this._selectorBuilder.getPageLocatorString(property, componentName);
+        const pageLocatorString = this._selectorBuilder.getLocatorString(property, componentName);
 
         if (componentName === 'Form') {
-          if (property.endsWith('Lookup')) return `    this.${property} = createLookupDropdown(${pageLocatorString});`;
+          if (property.endsWith('Lookup'))
+            return `    this.${property} = createLookupDropdown(this._context, '${this._selectorBuilder.getElementId(property, componentName)}');`;
 
           if (property.endsWith('DatePicker'))
-            return `    this.${property} = createDateControl(page, '${this._selectorBuilder.getElementId(property, componentName)}');`;
+            return `    this.${property} = createDateControl(this._context, '${this._selectorBuilder.getElementId(property, componentName)}');`;
 
           if (property.endsWith('ComboBox'))
-            return `    this.${property} = createFormComboBox(page, '${this._selectorBuilder.getElementId(property, componentName)}');`;
+            return `    this.${property} = createFormComboBox(this._context, '${this._selectorBuilder.getElementId(property, componentName)}');`;
 
           if (property.endsWith('Field'))
-            return `    this.${property} = createInputFieldControl(page, '${this._selectorBuilder.getElementId(property, componentName)}');`;
+            return `    this.${property} = createInputFieldControl(this._context, '${this._selectorBuilder.getElementId(property, componentName)}');`;
         }
 
         return `    this.${property} = ${pageLocatorString};`;
@@ -304,7 +308,12 @@ export class SubjectComponentGenerator {
 
   private addComponentImports(componentFile: { content: string }, componentName: string): void {
     // biome-ignore lint/style/useTemplate: reason 42
-    componentFile.content = `import type { Locator, Page } from '@playwright/test';\n\n` + componentFile.content;
+    componentFile.content = `import type { Locator } from '@playwright/test';\n\n` + componentFile.content;
+
+    if (componentName === 'Grid') {
+      componentFile.content = `import { createGridColumnControl, type IGridColumnControl } from '../../../../controls/GridColumnControl.js';\n${componentFile.content}`;
+    }
+
     componentFile.content = `import { ${componentName} } from '../../../../components/index.js';\n${componentFile.content}`;
   }
 

package/artifact-builder/SubjectGenerator.ts

@@ -98,11 +98,20 @@ export class SubjectGenerator {
     this.addClassExport(subjectClass, screenInterfaceName);
     this.addComponentDeclarations(subjectClass, componentDictionary, subjectFolderName);
     this.addConstructor(subjectClass, componentDictionary, subjectFolderName, subject);
+    this.addGoToMethod(subjectClass, subject);
     this.addSubjectClassLineEndings(subjectClass);
     this.verifyDirectoryExists(subjectFolderPath);
     fs.writeFileSync(path.join(subjectFolderPath, `${subjectClass.name}.ts`), subjectClass.content, 'utf-8');
   }
 
+  private addGoToMethod(subjectClass: { content: string }, subject: ISubject): void {
+    let url = `subject=${subject.subject}`;
+
+    if (subject.variant !== '') url = `${url}/subjectVariant=${subject.variant}`;
+
+    subjectClass.content += `\n  public async goTo() {\n    await this._subjectPage.goToDeepLink(\`${url}\`);\n    await this._subjectPage.waitForLoadState('networkidle');\n  }\n`;
+  }
+
   private getAllComponentsFromInterface(
     screenFileContent: string,
     screenInterfaceName: string,
@@ -266,6 +275,8 @@ export class SubjectGenerator {
       const componentType = `${subjectFolderName}${component.type}`;
       subjectClass.content += `  ${propertyName}: ${componentType};\n`;
     });
+
+    subjectClass.content += `  private _subjectPage: Page;\n`;
   }
 
   private addConstructor(
@@ -284,23 +295,26 @@ export class SubjectGenerator {
       if (!screenComponents.includes(component.type)) return;
 
       if (coreComponents.includes(component.type)) {
-        subjectClass.content += `    this.${propertyName} = ${this.getComponentInitializer(component)};\n`;
+        const componentId = this._namingHandler.toPascalCase(propertyName);
+        subjectClass.content += `    this.${propertyName} = ${this.getComponentInitializer(component, componentId)};\n`;
         return;
       }
 
       const componentName = component.type;
-      subjectClass.content += `    this.${propertyName} = new ${subjectFolderName}${componentName}Component(page, ${component.context});\n`;
+      subjectClass.content += `    this.${propertyName} = new ${subjectFolderName}${componentName}Component(${component.context});\n`;
     });
+
+    subjectClass.content += `    this._subjectPage = this.context.page();\n`;
+    subjectClass.content += `  }\n`;
   }
 
-  private getComponentInitializer(component: { type: string; context: string }): string {
+  private getComponentInitializer(component: { type: string; context: string }, componentId: string): string {
     const componentNamePascal = this._namingHandler.toPascalCase(component.type);
 
     switch (component.type) {
       case 'Cardlist':
       case 'TaskTiles':
       case 'PrefilterList':
-      case 'TaskBar':
       case 'Chart':
       case 'CubeViewBar':
       case 'PivotGrid':
@@ -309,7 +323,7 @@ export class SubjectGenerator {
       case 'ReportBar':
       case 'ReportTiles':
       case 'Preview':
-        return `new ${component.type}(page, this.context.locator('.${component.type}.${componentNamePascal}'))`;
+        return `new ${component.type}(this.context.locator('.${component.type}.${componentNamePascal}'))`;
       case 'CombinedFilter':
       case 'CustomActionBar':
       case 'ActionBar':
@@ -318,15 +332,17 @@ export class SubjectGenerator {
       case 'Tab':
       case 'FilterForm':
       case 'Scheduler':
-        return `new ${component.type}(page, ${component.context})`;
+        return `new ${component.type}(${component.context})`;
       case 'TreeView':
-        return `new ${component.type}(page, this.context.locator('.Tree.${componentNamePascal}'))`;
+        return `new ${component.type}(this.context.locator('.Tree.${componentNamePascal}'))`;
+      case 'TaskBar':
+        return `new ${component.type}(this.context.locator('.ActionBar.${componentId}'))`;
       default:
         throw new Error(`Unknown core component type: ${component.type}`);
     }
   }
 
   private addSubjectClassLineEndings(subjectClass: { content: string }): void {
-    subjectClass.content += `  }\n}\n`;
+    subjectClass.content += `}\n`;
   }
 }

package/components/action-bar/ActionBar.ts

@@ -4,8 +4,8 @@ import { ActionBarObjects, ActionBarOverflowableObjects } from './ActionBarObjec
 class ActionBarActions {
   private _objects: ActionBarOverflowableObjects;
 
-  constructor(page: Page, context: Locator | null = null) {
-    this._objects = new ActionBarOverflowableObjects(page, context);
+  constructor(context: Locator) {
+    this._objects = new ActionBarOverflowableObjects(context.page(), context);
   }
 
   public getSearchInput = (): Locator => this._objects.searchInput();
@@ -90,10 +90,10 @@ 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);
+  constructor(actionBarContext: Locator) {
+    super(actionBarContext);
+    this._actionBarObjects = new ActionBarObjects(actionBarContext.page(), actionBarContext);
+    this._overflowMenu = new ActionBarOverflow(actionBarContext.page());
   }
 
   public openOverflowMenu = async (): Promise<void> => {
@@ -148,7 +148,7 @@ export class ActionBar extends ActionBarActions {
 
 export class ActionBarOverflow extends ActionBarActions {
   constructor(page: Page) {
-    super(page, page.getByTestId('actionbar__overflow-menu__context'));
+    super(page.getByTestId('actionbar__overflow-menu__context'));
   }
 }
 

package/components/action-bar/CustomActionBar.ts

@@ -1,10 +1,5 @@
-import type { Locator, Page } from '@playwright/test';
 import { ActionBar } from './ActionBar.js';
 
 export class CustomActionBar extends ActionBar {
-  constructor(page: Page, context: Locator | null = null) {
-    super(page, context);
-  }
-
   // What should this do differently?
 }

package/components/cardlist/Cardlist.ts

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

package/components/chart/Chart.ts

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

package/components/combined-filter/CombinedFilter.ts

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

package/components/cube-view-bar/CubeViewBar.ts

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

package/components/filter/ExcelStyleFilterPopup.ts

@@ -0,0 +1,29 @@
+import type { Locator, Page } from '@playwright/test';
+import { ExcelStyleFilterPopupObjects } from './ExcelStyleFilterPopupObjects.js';
+
+export class ExcelStyleFilterPopup {
+  private _excelStyleFilterPopupObjects: ExcelStyleFilterPopupObjects;
+
+  constructor(page: Page) {
+    this._excelStyleFilterPopupObjects = new ExcelStyleFilterPopupObjects(page);
+  }
+
+  async waitForOpen(): Promise<void> {
+    await this._excelStyleFilterPopupObjects.anchor().waitFor({ state: 'visible' });
+  }
+
+  intervalFilters(): Locator {
+    return this._excelStyleFilterPopupObjects.intervalFilters();
+  }
+
+  fromDateInput(fieldTestId: string): Locator {
+    return this._excelStyleFilterPopupObjects.fromDateInput(fieldTestId);
+  }
+
+  async setFromDate(fieldTestId: string, value: string): Promise<void> {
+    await this.waitForOpen();
+    const input = this._excelStyleFilterPopupObjects.fromDateInput(fieldTestId);
+    await input.fill(value);
+    await input.press('Enter');
+  }
+}

package/components/filter/ExcelStyleFilterPopupObjects.ts

@@ -0,0 +1,20 @@
+import type { Page } from '@playwright/test';
+import { BaseComponentObjects } from '../BaseComponentObjects.js';
+
+export class ExcelStyleFilterPopupObjects extends BaseComponentObjects {
+  private _page: Page;
+
+  constructor(page: Page) {
+    super(page, page.locator('body'));
+    this._page = page;
+  }
+
+  public anchor = () => this._page.locator('[data-testid^="date-time-excel-filter__"]').first();
+
+  public intervalFilters = () => this._page.getByTestId('excel-style-filter-popup__interval-filters');
+
+  public fromDateInput = (fieldTestId: string) =>
+    this._page
+      .getByTestId(`date-time-excel-filter__${fieldTestId}__from`)
+      .getByTestId(`form-field__${fieldTestId}__date__input`);
+}

package/components/filter/FilterForm.ts

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

package/components/filter/FilterPopup.ts

@@ -0,0 +1,187 @@
+import type { Locator, Page } from '@playwright/test';
+import { PopUpComponent } from '../pop-up/PopUpComponent.js';
+import { FilterPopupObjects } from './FilterPopupObjects.js';
+
+export type IntervalType =
+  | 'date'
+  | 'date-and-time'
+  | 'time'
+  | 'year'
+  | 'quarter'
+  | 'month'
+  | 'week-of-the-year'
+  | 'day-of-the-month';
+
+export type AutocompleteKey =
+  | IntervalType
+  | 'equal-to'
+  | 'smaller-than'
+  | 'q1'
+  | 'q2'
+  | 'q3'
+  | 'q4'
+  | 'january'
+  | 'february'
+  | 'march'
+  | 'april'
+  | 'may'
+  | 'june'
+  | 'july'
+  | 'august'
+  | 'september'
+  | 'october'
+  | 'november'
+  | 'december'
+  | 'all-of-the-following'
+  | 'any-of-the-following';
+
+export class FilterPopup {
+  readonly page: Page;
+  private _filterPopupObjects: FilterPopupObjects;
+  private _body: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+    this._body = new PopUpComponent(page).getContentBody();
+    this._filterPopupObjects = new FilterPopupObjects(page, this._body);
+  }
+
+  // Root content locator (useful for occasional assertions)
+  public content(): Locator {
+    return this._body;
+  }
+
+  public async waitForOpen(): Promise<void> {
+    await this._filterPopupObjects.applyFilterButton().waitFor();
+  }
+
+  public async applyFilter(): Promise<void> {
+    await this.waitForOpen();
+    await this._filterPopupObjects.applyFilterButton().click();
+  }
+
+  public async applySaveAsPrefilterWithName(name: string): Promise<void> {
+    await this.waitForOpen();
+    await this._filterPopupObjects.applySaveButton().click();
+    await this._filterPopupObjects.saveAsOption().click();
+    await this.saveAsPrefilterPopup(name);
+  }
+
+  public async saveAsPrefilterPopup(name: string): Promise<void> {
+    await this.waitForOpen();
+    await this._filterPopupObjects.prefilterNameInput().fill(name);
+    await this._filterPopupObjects.saveButton().click();
+  }
+  public async setAdvanced(enabled: boolean): Promise<void> {
+    await this.waitForOpen();
+    const checkbox = this._filterPopupObjects.advancedToggleCheckbox();
+    if (enabled) await checkbox.check();
+    else await checkbox.uncheck();
+  }
+
+  public advancedGroupSelect(): Locator {
+    return this._filterPopupObjects.advancedGroupSelect();
+  }
+
+  public async setGroupCondition(key: 'all-of-the-following' | 'any-of-the-following'): Promise<void> {
+    await this.waitForOpen();
+    await this._filterPopupObjects.advancedGroupSelect().click();
+    await this._filterPopupObjects.groupConditionOption(key).click();
+  }
+
+  public fieldInput(fieldId: string): Locator {
+    return this._filterPopupObjects.fieldInput(fieldId);
+  }
+
+  public valueInput(fieldId: string, part: string): Locator {
+    return this._filterPopupObjects.valueInput(fieldId, part);
+  }
+
+  public dateInput(fieldId: string): Locator {
+    return this._filterPopupObjects.dateInput(fieldId);
+  }
+
+  public async setText(fieldId: string, value: string): Promise<void> {
+    await this.waitForOpen();
+    const input = this._filterPopupObjects.fieldInput(fieldId);
+    await input.click();
+    await input.press('ControlOrMeta+a');
+    await input.fill(value);
+  }
+
+  public async setValue(args: { fieldId: string; part: string; value: string }): Promise<void> {
+    await this.waitForOpen();
+    const input = this._filterPopupObjects.valueInput(args.fieldId, args.part);
+    await input.click();
+    await input.press('ControlOrMeta+a');
+    await input.fill(args.value);
+  }
+
+  // Some inputs (date picker) need a blur/commit to apply the value
+  public async commit(args: { fieldId: string; part: string }): Promise<void> {
+    await this.waitForOpen();
+    await this._filterPopupObjects.valueInput(args.fieldId, args.part).press('Tab');
+  }
+
+  public async openControl(fieldId: string, part: string): Promise<void> {
+    await this.waitForOpen();
+    await this._filterPopupObjects.fieldControl(fieldId, part).click();
+  }
+
+  public async openOperator(fieldId: string): Promise<void> {
+    await this.waitForOpen();
+    await this._filterPopupObjects.operatorControl(fieldId).click();
+  }
+
+  public async openTimeOperator(): Promise<void> {
+    await this.waitForOpen();
+    await this._filterPopupObjects.timeOperatorControl().click();
+  }
+
+  public intervalSelector(rowIndex: number, colId: string): Locator {
+    return this._filterPopupObjects.intervalSelector(rowIndex, colId);
+  }
+
+  public intervalSelectorInput(rowIndex: number, colId: string): Locator {
+    return this._filterPopupObjects.intervalSelectorInput(rowIndex, colId);
+  }
+
+  public async openInterval(rowIndex: number, colId: string): Promise<void> {
+    await this.waitForOpen();
+    await this._filterPopupObjects.intervalSelectorInput(rowIndex, colId).click();
+  }
+
+  public async setInterval(rowIndex: number, colId: string, kind: IntervalType): Promise<void> {
+    await this.openInterval(rowIndex, colId);
+    await this.pickAutocomplete(kind);
+  }
+
+  public autocompleteOption(key: AutocompleteKey): Locator {
+    return this._filterPopupObjects.autocompleteOption(key);
+  }
+
+  public async pickAutocomplete(key: AutocompleteKey): Promise<void> {
+    const option = this._filterPopupObjects.autocompleteOption(key);
+    await option.click();
+  }
+
+  public async selectField(field: string): Promise<void> {
+    await this.waitForOpen();
+    const emptyRow = this._filterPopupObjects.emptySelectFieldRow();
+
+    if (await emptyRow.count()) {
+      await this._filterPopupObjects.emptySelectFieldRowButton().click();
+    } else {
+      await this._filterPopupObjects.selectFieldButton().click();
+    }
+
+    await this._filterPopupObjects.colIdOption(field).click();
+  }
+
+  // In advanced mode: add a new row, then select a field into it
+  public async addField(field: string): Promise<void> {
+    await this.waitForOpen();
+    await this._filterPopupObjects.addFieldButton().click();
+    await this.selectField(field);
+  }
+}

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}`);
+}