@thinkwise/testwise 0.2.7 → 0.2.20

package/artifact-builder/InterfaceGenerator.ts

@@ -77,7 +77,7 @@ export class InterfaceGenerator {
       const baseFileName = file.slice(0, file.lastIndexOf('.'));
       const correctInterfaceName = isInterface
         ? this._namingHandler.generateScreenInterfaceName(baseFileName)
-        : this._namingHandler.snakeToPascalCase(baseFileName);
+        : this._namingHandler.toPascalCase(baseFileName);
 
       const schemaPath = path.join(schemasDirectory, file);
       const schemaContent = fs.readFileSync(schemaPath, 'utf-8');
@@ -139,7 +139,7 @@ export class InterfaceGenerator {
       }
 
       if (schemaType === SchemaType.Screen) {
-        const fileNameSnakeCase = this._namingHandler.pascalToSnakeCase(fileName);
+        const fileNameSnakeCase = this._namingHandler.toSnakeCase(fileName);
 
         if (this._screensToBuild.length > 0 && !this._screensToBuild.includes(fileNameSnakeCase)) {
           return Promise.resolve(true);

package/artifact-builder/SchemaGenerator.ts

@@ -75,7 +75,7 @@ export class SchemaGenerator {
   }
 
   private getScreenContent(screenTypeId: string): string {
-    const screenFileName = this._namingHandler.formatPascalCaseName(screenTypeId);
+    const screenFileName = this._namingHandler.toPascalCase(screenTypeId);
     const _filename = fileURLToPath(import.meta.url);
     const _dirname = path.dirname(_filename);
     const screenLocation = path.resolve(_dirname, '..', '..', 'test-artifacts/screens/');
@@ -86,7 +86,7 @@ export class SchemaGenerator {
   private createComponentSchema(subject: ISubject, componentType: SubjectComponents): void {
     const interfaceName = `${subject.subject}_${componentType.toLowerCase()}`;
     const schemasDir = path.join(currentDirname, '..', '..', 'dist/test-artifacts/schemas');
-    const fileName = `${this._namingHandler.snakeToPascalCase(interfaceName)}.json`;
+    const fileName = `${this._namingHandler.toPascalCase(interfaceName)}.json`;
 
     if (fs.existsSync(path.join(schemasDir, fileName))) {
       return;

package/artifact-builder/SelectorBuilder.ts

@@ -52,12 +52,16 @@ export class SelectorBuilder {
     return suffix;
   }
 
-  public getPageLocatorString(property: string, componentName: SubjectComponents): string {
-    let elementId = this._namingHandler.getIdFromElementName(
+  public getElementId(property: string, componentName: SubjectComponents): string {
+    return this._namingHandler.getIdFromElementName(
       property,
       componentName,
       this._namingHandler.getElementTypeFromElementName(property)
     );
+  }
+
+  public getPageLocatorString(property: string, componentName: SubjectComponents): string {
+    let elementId = this.getElementId(property, componentName);
 
     if (componentName === 'Grid') elementId = elementId.replace(/-/g, '_');
 

package/artifact-builder/SubjectComponentGenerator.ts

@@ -105,9 +105,13 @@ export class SubjectComponentGenerator {
             gridGetters = this.generateGridGetters(propertyLines, componentName);
           } else {
             propertyDeclarations = this.generatePropertyDeclarations(propertyLines, componentName);
-            if (componentName === 'Form') this.transformLookupTypes(componentFile);
+
+            if (componentName === 'Form') {
+              this.transformInterfaceTypes(componentFile);
+            }
+
             assignments = this.getPropertyInitializations(propertyLines, componentName);
-            this.addLookupImportIfRequired(componentFile);
+            this.addImportsDynamically(componentFile);
           }
         }
 
@@ -125,7 +129,7 @@ export class SubjectComponentGenerator {
       const subjectName: string | null = subjectMatch ? subjectMatch[1] : null;
 
       if (subjectName) {
-        const formattedSubjectName = this._namingHandler.formatSubjectName(subjectName);
+        const formattedSubjectName = this._namingHandler.toPascalCase(subjectName);
         const subjectFolder = this.getSubjectFolderPath(formattedSubjectName);
         const fileName = path.basename(componentDirPath);
 
@@ -176,8 +180,17 @@ export class SubjectComponentGenerator {
         const property = line.split(':')[0].replace(/\?$/, '').trim();
         const pageLocatorString = this._selectorBuilder.getPageLocatorString(property, componentName);
 
-        if (componentName === 'Form' && property.endsWith('Lookup')) {
-          return `    this.${property} = createLookupDropdown(${pageLocatorString});`;
+        if (componentName === 'Form') {
+          if (property.endsWith('Lookup')) return `    this.${property} = createLookupDropdown(${pageLocatorString});`;
+
+          if (property.endsWith('DatePicker'))
+            return `    this.${property} = createDateControl(page, '${this._selectorBuilder.getElementId(property, componentName)}');`;
+
+          if (property.endsWith('ComboBox'))
+            return `    this.${property} = createFormComboBox(page, '${this._selectorBuilder.getElementId(property, componentName)}');`;
+
+          if (property.endsWith('Field'))
+            return `    this.${property} = createInputFieldControl(page, '${this._selectorBuilder.getElementId(property, componentName)}');`;
         }
 
         return `    this.${property} = ${pageLocatorString};`;
@@ -185,14 +198,39 @@ export class SubjectComponentGenerator {
       .join('\n');
   }
 
-  private addLookupImportIfRequired(componentFile: { content: string }): void {
+  private addImportsDynamically(componentFile: { content: string }): void {
     const lookupType = 'ILookupDropdown';
+    const comboBoxType = 'IFormComboBox';
+    const inputFieldType = 'IInputFieldControl';
+    const datePickerType = 'IDateControl';
+
+    const inputFieldImport =
+      "import { createInputFieldControl, type IInputFieldControl } from '../../../../controls/InputFieldControl.js';";
+
     const lookupImport =
       "import { createLookupDropdown, type ILookupDropdown } from '../../../../controls/LookupDropdown.js';";
 
+    const comboBoxImport =
+      "import { createFormComboBox, type IFormComboBox } from '../../../../controls/FormComboBox.js';";
+
+    const datePickerImport =
+      "import { createDateControl, type IDateControl } from '../../../../controls/DateControl.js';";
+
     if (componentFile.content.includes(lookupType) && !componentFile.content.includes(lookupImport)) {
       componentFile.content = `${lookupImport}\n${componentFile.content}`;
     }
+
+    if (componentFile.content.includes(comboBoxType) && !componentFile.content.includes(comboBoxImport)) {
+      componentFile.content = `${comboBoxImport}\n${componentFile.content}`;
+    }
+
+    if (componentFile.content.includes(inputFieldType) && !componentFile.content.includes(inputFieldImport)) {
+      componentFile.content = `${inputFieldImport}\n${componentFile.content}`;
+    }
+
+    if (componentFile.content.includes(datePickerType) && !componentFile.content.includes(datePickerImport)) {
+      componentFile.content = `${datePickerImport}\n${componentFile.content}`;
+    }
   }
 
   private generatePropertyDeclarations(propertiesToConvert: string[], componentName: SubjectComponents): string {
@@ -204,19 +242,39 @@ export class SubjectComponentGenerator {
           return `  ${property}: ILookupDropdown;`;
         }
 
+        if (componentName === 'Form' && property.endsWith('ComboBox')) {
+          return `  ${property}: IFormComboBox;`;
+        }
+
+        if (componentName === 'Form' && property.endsWith('Field')) {
+          return `  ${property}: IInputFieldControl;`;
+        }
+
+        if (componentName === 'Form' && property.endsWith('DatePicker')) {
+          return `  ${property}: IDateControl;`;
+        }
+
         return `  ${property}: Locator;`;
       })
       .join('\n');
   }
 
-  private transformLookupTypes(componentFile: { content: string }): void {
+  private transformInterfaceTypes(componentFile: { content: string }): void {
     const interfaceRegex = /export interface \w+ extends Form \{([\s\S]*?)\}/g;
 
+    const typeMapping: Record<string, string> = {
+      Lookup: 'ILookupDropdown',
+      ComboBox: 'IFormComboBox',
+      Field: 'IInputFieldControl',
+      DatePicker: 'IDateControl'
+    };
+
     componentFile.content = componentFile.content.replace(interfaceRegex, (match, interfaceBody) => {
-      const propertyRegex = /(\w+Lookup)\s*:\s*Locator;/g;
+      const propertyRegex = /(\w+(Lookup|ComboBox|Field|DatePicker))\s*:\s*Locator;/g;
 
-      const updatedBody = interfaceBody.replace(propertyRegex, (_propMatch: string, propName: string) => {
-        return `${propName}: ILookupDropdown;`;
+      const updatedBody = interfaceBody.replace(propertyRegex, (_match: string, propName: string, suffix: string) => {
+        const newType = typeMapping[suffix];
+        return `${propName}: ${newType};`;
       });
 
       return match.replace(interfaceBody, updatedBody);

package/artifact-builder/SubjectGenerator.ts

@@ -78,7 +78,7 @@ export class SubjectGenerator {
     const screenInterfaceName = this._namingHandler.generateScreenInterfaceName(subject.screentype_id);
     const screenInterfacePath = this.getScreenInterfacePath(screenInterfaceName);
     const screenFileContent = fs.readFileSync(screenInterfacePath, 'utf-8');
-    const subjectFolderName = this._namingHandler.formatPascalCaseName(subject.subject);
+    const subjectFolderName = this._namingHandler.toPascalCase(subject.subject);
     const subjectFolderPath = this.getSubjectFolderRelativePath(subjectFolderName);
 
     const subjectClass = {
@@ -294,7 +294,7 @@ export class SubjectGenerator {
   }
 
   private getComponentInitializer(component: { type: string; context: string }): string {
-    const componentNamePascal = this._namingHandler.formatPascalCaseName(component.type);
+    const componentNamePascal = this._namingHandler.toPascalCase(component.type);
 
     switch (component.type) {
       case 'Cardlist':

package/artifact-builder/SubjectRegistration.ts

@@ -23,6 +23,20 @@ export class SubjectRegistration {
     await this.registerGeneratedSubjectsAsSubjectTypes(subjectDetails);
   }
 
+  public resetSubjectRegistry(): void {
+    const root = path.resolve(this._currentDirname, '../../');
+    const registryPath = path.join(root, 'page-extensions', 'SubjectRegistry.ts');
+    const templatePath = path.join(root, 'templates', 'SubjectRegistry.template.ts');
+
+    if (fs.existsSync(registryPath)) {
+      fs.rmSync(registryPath, { force: true });
+    }
+
+    if (fs.existsSync(templatePath)) {
+      fs.copyFileSync(templatePath, registryPath);
+    }
+  }
+
   private async registerGeneratedSubjectsAsSubjectTypes(subjectDetails: SubjectDetail[]): Promise<void> {
     const subjectTypeImportsAndExports = this.buildSubjectTypeExport(subjectDetails);
     const subject = { content: this.setSubjectTypeContent() };

package/artifact-builder/helpers/NamingHandler.ts

@@ -1,11 +1,12 @@
 import * as path from 'node:path';
+import { pascalCase, snakeCase } from 'change-case';
 import { KnownElementTypes } from '../../enums/ElementTypes.js';
 import type { ScreenComponents, SubjectComponents } from '../../types/Components.js';
 
 export class NamingHandler {
   public getDefaultElementSuffixFromComponentType(componentType: SubjectComponents): KnownElementTypes {
     const controlTypeMapping: Record<SubjectComponents, KnownElementTypes> = {
-      Form: KnownElementTypes.Input,
+      Form: KnownElementTypes.Field,
       Grid: KnownElementTypes.Column
     };
 
@@ -19,7 +20,6 @@ export class NamingHandler {
     controlType = controlType.toLowerCase();
 
     const formDefaultSuffix: KnownElementTypes = this.getDefaultElementSuffixFromComponentType('Form');
-    const gridDefaultSuffix: KnownElementTypes = this.getDefaultElementSuffixFromComponentType('Grid');
 
     const controlTypeMappingMatrix: Record<SubjectComponents, Record<string, KnownElementTypes>> = {
       Form: {
@@ -27,37 +27,41 @@ export class NamingHandler {
         phone_number: formDefaultSuffix,
         suggestion_starts_with: formDefaultSuffix,
         lookup_dropdown: KnownElementTypes.Lookup,
+        dropdown: KnownElementTypes.Dropdown,
+        lookup: KnownElementTypes.Lookup,
         checkbox: KnownElementTypes.Checkbox,
         multiline: KnownElementTypes.Textarea,
-        combo: KnownElementTypes.Dropdown
+        combo: KnownElementTypes.ComboBox,
+        combo_box: KnownElementTypes.ComboBox,
+        date: KnownElementTypes.DatePicker,
+        date_picker: KnownElementTypes.DatePicker
       },
       Grid: {
-        email: gridDefaultSuffix,
-        phone_number: gridDefaultSuffix,
-        suggestion_starts_with: gridDefaultSuffix,
-        lookup_dropdown: gridDefaultSuffix,
-        checkbox: gridDefaultSuffix,
-        multiline: gridDefaultSuffix,
-        combo: gridDefaultSuffix
+        // Insert Grid-specific control type mappings here
       }
     };
 
     const componentMapping = controlTypeMappingMatrix[componentType];
     return (
-      componentMapping[controlType] || this.getDefaultElementSuffixFromComponentType(componentType)
+      componentMapping[controlType.toLowerCase()] || this.getDefaultElementSuffixFromComponentType(componentType)
     ).toLowerCase();
   }
 
   public getIdFromElementName(elementName: string, componentType: SubjectComponents, controlType: string): string {
     const elementSuffixToRemove = this.getElementSuffixFromControlTypeAndComponentType(controlType, componentType);
-    const snakeCaseElementName = this.pascalToSnakeCase(elementName);
+    const elementSuffixToRemoveFormatted = elementSuffixToRemove.replace(/_/g, '-').toLowerCase();
 
-    return snakeCaseElementName
-      .replace(new RegExp(`${elementSuffixToRemove}$`, 'i'), '')
+    let id = this.toSnakeCase(elementName)
       .replace(/([a-z])([A-Z])/g, '$1-$2')
       .toLowerCase()
-      .replace(/_/g, '-')
-      .replace(/-+$/g, '');
+      .replace(/_/g, '-');
+
+    if (elementSuffixToRemove) {
+      const suffixRegex = new RegExp(`-?${elementSuffixToRemoveFormatted}$`, 'i');
+      id = id.replace(suffixRegex, '');
+    }
+
+    return id.replace(/-+/g, '-').replace(/-+$/g, '');
   }
 
   public getComponentTypeFromFileName(fileName: string): SubjectComponents {
@@ -72,7 +76,7 @@ export class NamingHandler {
   }
 
   public getElementTypeFromElementName(elementName: string): string {
-    const snakeCaseElementName = this.pascalToSnakeCase(elementName);
+    const snakeCaseElementName = this.toSnakeCase(elementName);
     const parts = snakeCaseElementName.split('_');
 
     for (let i = parts.length - 1; i > 0; i--) {
@@ -91,24 +95,11 @@ export class NamingHandler {
   }
 
   public getPascalSubjectComponentName(file: string): string {
-    return this.formatPascalCaseName(path.basename(file, '.json'));
-  }
-
-  public formatPascalCaseName(name: string): string {
-    if (!name.includes('_')) {
-      return name.charAt(0).toUpperCase() + name.slice(1);
-    }
-
-    return name
-      .toLowerCase()
-      .split('_')
-      .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
-      .join('');
+    return this.toPascalCase(path.basename(file, '.json'));
   }
 
-  public formatSubjectName(subjectName: string): string {
-    subjectName.replace(/_([a-z])/g, (g: string) => g[1].toUpperCase());
-    return subjectName.charAt(0).toUpperCase() + subjectName.slice(1);
+  public toPascalCase(name: string): string {
+    return pascalCase(name);
   }
 
   public formatPropertyName(name: string): string {
@@ -116,30 +107,11 @@ export class NamingHandler {
   }
 
   public generateScreenInterfaceName(screentypeId: string): string {
-    return `I${screentypeId
-      .toLowerCase()
-      .split('_')
-      .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
-      .join('')}`;
-  }
-
-  public snakeToPascalCase(value: string): string {
-    if (!value.includes('_')) {
-      return value.charAt(0).toUpperCase() + value.slice(1);
-    }
-
-    return value
-      .toLowerCase()
-      .split('_')
-      .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
-      .join('');
+    return `I${this.toPascalCase(screentypeId)}`;
   }
 
-  public pascalToSnakeCase(value: string): string {
-    return value
-      .replace(/([A-Z]+)([A-Z][a-z])/g, '$1_$2')
-      .replace(/([a-z\d])([A-Z])/g, '$1_$2')
-      .toLowerCase();
+  public toSnakeCase(value: string): string {
+    return snakeCase(value);
   }
 
   public getComponentIdFromName(componentName: string, componentType: ScreenComponents): string {
@@ -181,6 +153,6 @@ export class NamingHandler {
   public generateSubjectClassName(subject: { subject: string; screentype_context: string; variant: string }): string {
     const uniqueSubjectIdentifier = subject.variant !== '' ? `${subject.subject}_${subject.variant}` : subject.subject;
     const className = `${uniqueSubjectIdentifier}_${subject.screentype_context}`;
-    return this.formatPascalCaseName(className);
+    return this.toPascalCase(className);
   }
 }

package/components/export/ExportComponent.ts

@@ -26,6 +26,7 @@ export class ExportComponent {
   public async selectColumns(columns: string[]): Promise<void> {
     for (const column of columns) {
       const checkbox = this._objects.selectColumnsCheckbox(column);
+      await this._page.waitForTimeout(100);
       await checkbox.check();
     }
   }

package/components/tab/BaseTabObjects.ts

@@ -12,7 +12,7 @@ export class BaseTabObjects extends BaseComponentObjects {
   public tabList = (): Locator => this.context.getByRole('tablist');
 
   public tabByTestId = (name: string): Locator =>
-    this.tabList().locator(`[role="tab"][data-testid^="tabstrip__tab__${name.toLowerCase()}"]`);
+    this.tabList().locator(`[role="tab"][data-testid^="tabstrip__tab__${name.toLowerCase()}__"]`);
 
   // use role for generic index-based selection
   public tabByIndex = (index: number): Locator => this.tabList().getByRole('tab').nth(index);

package/controls/DateControl.ts

@@ -0,0 +1,67 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* biome-ignore-all lint/suspicious/noExplicitAny: reason42 */
+import type { Locator, Page } from '@playwright/test';
+
+export type IDateControl = Locator & IDateControlCore;
+
+export type IDateControlCore = {
+  fill(value: string): Promise<void>;
+  clear(): Promise<void>;
+  inputValue(): Promise<string>;
+  inputElement(): Locator;
+};
+
+export class DateControl implements IDateControlCore {
+  private _dateFieldLocator: Locator;
+  private _inputLocator: Locator;
+
+  constructor(page: Page, id: string) {
+    this._dateFieldLocator = page.getByTestId(`form-field__${id}`);
+    this._inputLocator = this._dateFieldLocator.locator('input');
+  }
+
+  /**
+   * Enter a date value in any common format (e.g., "MM/DD/YYYY", "YYYY-MM-DD", "DD-MM-YYYY").
+   * The method will extract the numbers and input them sequentially, allowing the date picker to format it correctly.
+   * For example, entering "01012025" will be interpreted as "01/01/2025".
+   * This approach provides flexibility in how dates can be entered while ensuring compatibility with various date picker implementations.
+   * @param value
+   */
+  public async fill(value: string): Promise<void> {
+    const numbersOnlyValue = value.replace(/\D/g, '');
+
+    await this._inputLocator.focus();
+    await this._inputLocator.pressSequentially(numbersOnlyValue);
+  }
+
+  public async clear(): Promise<void> {
+    await this._inputLocator.fill('');
+  }
+
+  public async inputValue(): Promise<string> {
+    return await this._inputLocator.inputValue();
+  }
+
+  public inputElement(): Locator {
+    return this._inputLocator;
+  }
+}
+
+export function createDateControl(page: Page, id: string): IDateControl {
+  const inputFieldControl = new DateControl(page, id);
+  const locator = page.getByTestId(`form-field__${id}`);
+
+  return new Proxy(inputFieldControl, {
+    get(target, prop, receiver) {
+      if (prop in target) {
+        return Reflect.get(target, prop, receiver);
+      }
+      const value = (locator as any)[prop];
+
+      if (typeof value === 'function') {
+        return value.bind(locator);
+      }
+      return value;
+    }
+  }) as unknown as IDateControl;
+}

package/controls/FormComboBox.ts

@@ -0,0 +1,74 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* biome-ignore-all lint/suspicious/noExplicitAny: Reason42 */
+import type { Locator, Page } from '@playwright/test';
+
+export type IFormComboBox = Locator & IFormComboBoxCore;
+
+export type IFormComboBoxCore = {
+  lookupSelect(optionToSelect: string): Promise<void>;
+  selectOption(optionText: string): Promise<void>;
+  getValidationMessage(): Promise<string>;
+  clearByClick(): Promise<void>;
+};
+
+class FormComboBox implements IFormComboBoxCore {
+  private _formFieldLocator: Locator;
+  private _autoCompleteMenu: Locator;
+  private _id: string;
+
+  constructor(page: Page, id: string) {
+    this._id = id;
+    this._formFieldLocator = page.getByTestId(`form-field__${id}`);
+    this._autoCompleteMenu = page.getByTestId(`form-field__${id}__select__options-list`);
+  }
+
+  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();
+  }
+
+  async getValidationMessage(): Promise<string> {
+    await this._formFieldLocator.locator('.TooltipContainer p').waitFor({ state: 'visible' });
+    return await this._formFieldLocator.locator('.TooltipContainer p').innerText();
+  }
+  async clearByClick(): Promise<void> {
+    await this._formFieldLocator.locator('Button[aria-label="Clear"]').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();
+  }
+}
+
+export function createFormComboBox(page: Page, id: string): IFormComboBox {
+  const comboBox = new FormComboBox(page, id);
+  const locator = page.getByTestId(`form-field__${id}`);
+
+  return new Proxy(comboBox, {
+    get(target, prop, receiver) {
+      if (prop in target) {
+        return Reflect.get(target, prop, receiver);
+      }
+
+      const value = (locator as any)[prop];
+
+      if (typeof value === 'function') {
+        return value.bind(locator);
+      }
+      return value;
+    }
+  }) as unknown as IFormComboBox;
+}

package/controls/InputFieldControl.ts

@@ -0,0 +1,79 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/** biome-ignore-all lint/suspicious/noExplicitAny: reason42 */
+import type { Locator, Page } from '@playwright/test';
+
+export type IInputFieldControl = Locator & ICoreInputFieldControl;
+
+export type ICoreInputFieldControl = {
+  getValidationMessage(): Promise<string>;
+  getLabelText(): Promise<string>;
+  fill(value: string): Promise<void>;
+  click(): Promise<void>;
+  clear(): Promise<void>;
+  inputValue(): Promise<string>;
+  inputElement(): Locator;
+};
+
+export class InputFieldControl implements ICoreInputFieldControl {
+  private _formFieldLocator: Locator;
+  private _inputLocator: Locator;
+  private _id: string;
+
+  constructor(page: Page, id: string) {
+    this._id = id;
+    this._formFieldLocator = page.getByTestId(`form-field__${id}`);
+    this._inputLocator = this._formFieldLocator.locator('input');
+  }
+
+  public async getValidationMessage(): Promise<string> {
+    await this._formFieldLocator.locator('.TooltipContainer p').waitFor({ state: 'visible' });
+    return await this._formFieldLocator.locator('.TooltipContainer p').innerText();
+  }
+
+  public async fill(value: string): Promise<void> {
+    await this._inputLocator.fill(value);
+  }
+
+  public async click(): Promise<void> {
+    await this._inputLocator.click();
+  }
+
+  public async clear(): Promise<void> {
+    await this._inputLocator.fill('');
+  }
+
+  public async inputValue(): Promise<string> {
+    return await this._inputLocator.inputValue();
+  }
+
+  public inputElement(): Locator {
+    return this._inputLocator;
+  }
+
+  public async getLabelText(): Promise<string> {
+    let returnText = (await this._formFieldLocator.getByTestId(`form-field__${this._id}__label`).textContent()) || '';
+
+    returnText = returnText.replace(/\s+/g, ' ').trim();
+
+    return returnText;
+  }
+}
+
+export function createInputFieldControl(page: Page, id: string): IInputFieldControl {
+  const inputFieldControl = new InputFieldControl(page, id);
+  const locator = page.getByTestId(`form-field__${id}`);
+
+  return new Proxy(inputFieldControl, {
+    get(target, prop, receiver) {
+      if (prop in target) {
+        return Reflect.get(target, prop, receiver);
+      }
+      const value = (locator as any)[prop];
+
+      if (typeof value === 'function') {
+        return value.bind(locator);
+      }
+      return value;
+    }
+  }) as unknown as IInputFieldControl;
+}

package/controls/LookupDropdown.ts

@@ -3,12 +3,14 @@
 import type { Locator } from '@playwright/test';
 import { escapeRegex } from '../helpers/RegexHelper.js';
 
-export type ILookupDropdown = Locator & {
+export type ILookupDropdown = Locator & ILookupDropdownCore;
+
+export type ILookupDropdownCore = {
   lookupSelect(optionToSelect: string): Promise<void>;
   selectOption(optionText: string): Promise<void>;
 };
 
-class LookupDropdown {
+class LookupDropdown implements ILookupDropdownCore {
   private _locator: Locator;
 
   constructor(locator: Locator) {

package/controls/index.ts

@@ -1 +1,4 @@
+export * from './DateControl.js';
+export * from './FormComboBox.js';
+export * from './InputFieldControl.js';
 export * from './LookupDropdown.js';