@thinkwise/testwise 0.2.0-beta.3 → 0.2.4

package/artifact-builder/SubjectComponentGenerator.ts

@@ -85,6 +85,10 @@ export class SubjectComponentGenerator {
       this.addComponentImports(componentFile, componentName);
       this.setSubjectExtendsComponent(componentFile, componentName);
 
+      if (componentName === 'Grid') {
+        this.transformGridInterface(componentFile);
+      }
+
       const interfaceMatches: RegExpMatchArray | null = componentFile.content.match(/export interface (\w+) extends/);
 
       if (interfaceMatches) {
@@ -92,16 +96,29 @@ export class SubjectComponentGenerator {
         const matchingProperties = this.getPropertyNamesFromInterface(componentFile, mainInterface);
         let propertyDeclarations = '';
         let assignments = '';
+        let gridGetters = '';
 
         if (matchingProperties?.[1]) {
           const propertyLines: string[] = this.convertStringsToArray(matchingProperties[1]);
 
-          propertyDeclarations = this.generatePropertyDeclarations(propertyLines);
-
-          assignments = this.getPropertyInitializations(propertyLines, componentName);
+          if (componentName === 'Grid') {
+            gridGetters = this.generateGridGetters(propertyLines, componentName);
+          } else {
+            propertyDeclarations = this.generatePropertyDeclarations(propertyLines, componentName);
+            if (componentName === 'Form') this.transformLookupTypes(componentFile);
+            assignments = this.getPropertyInitializations(propertyLines, componentName);
+            this.addLookupImportIfRequired(componentFile);
+          }
         }
 
-        componentFile.content += `\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`;
+        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`;
+
+        componentFile.content += classBody;
       }
 
       const subjectMatch: RegExpMatchArray | null = componentDirPath.match(/subjects[/](\w+)[/]/);
@@ -113,7 +130,6 @@ export class SubjectComponentGenerator {
         const fileName = path.basename(componentDirPath);
 
         this.verifyDirectoryExists(subjectFolder);
-
         fs.writeFileSync(path.join(subjectFolder, fileName), componentFile.content, 'utf-8');
       } else {
         fs.writeFileSync(componentDirPath, componentFile.content, 'utf-8');
@@ -121,6 +137,26 @@ export class SubjectComponentGenerator {
     }
   }
 
+  private transformGridInterface(componentFile: { content: string }): void {
+    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[]>;');
+      return match.replace(body, transformedBody);
+    });
+  }
+
+  private generateGridGetters(propertyLines: string[], componentName: SubjectComponents): string {
+    return propertyLines
+      .map((line) => {
+        const property = line.replace('readonly', '').split(':')[0].trim();
+        const pageLocatorString = this._selectorBuilder.getPageLocatorString(property, componentName);
+
+        return `  get ${property}(): Promise<Locator[]> {\n    return this.${pageLocatorString}.all();\n  }\n`;
+      })
+      .join('\n');
+  }
+
   private getSubjectFolderPath(formattedSubjectName: string): string {
     return path.resolve(
       this._currentDirname,
@@ -139,20 +175,54 @@ export class SubjectComponentGenerator {
       .map((line) => {
         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});`;
+        }
+
         return `    this.${property} = ${pageLocatorString};`;
       })
       .join('\n');
   }
 
-  private generatePropertyDeclarations(propertiesToConvert: string[]): string {
+  private addLookupImportIfRequired(componentFile: { content: string }): void {
+    const lookupType = 'ILookupDropdown';
+    const lookupImport =
+      "import { createLookupDropdown, type ILookupDropdown } from '../../../../controls/LookupDropdown.js';";
+
+    if (componentFile.content.includes(lookupType) && !componentFile.content.includes(lookupImport)) {
+      componentFile.content = `${lookupImport}\n${componentFile.content}`;
+    }
+  }
+
+  private generatePropertyDeclarations(propertiesToConvert: string[], componentName: SubjectComponents): string {
     return propertiesToConvert
       .map((line) => {
         const property = line.replace(/^\s+/, '').split(':')[0].replace(/\?$/, '').trim();
-        return `  ${property}!: Locator;`;
+
+        if (componentName === 'Form' && property.endsWith('Lookup')) {
+          return `  ${property}: ILookupDropdown;`;
+        }
+
+        return `  ${property}: Locator;`;
       })
       .join('\n');
   }
 
+  private transformLookupTypes(componentFile: { content: string }): void {
+    const interfaceRegex = /export interface \w+ extends Form \{([\s\S]*?)\}/g;
+
+    componentFile.content = componentFile.content.replace(interfaceRegex, (match, interfaceBody) => {
+      const propertyRegex = /(\w+Lookup)\s*:\s*Locator;/g;
+
+      const updatedBody = interfaceBody.replace(propertyRegex, (_propMatch: string, propName: string) => {
+        return `${propName}: ILookupDropdown;`;
+      });
+
+      return match.replace(interfaceBody, updatedBody);
+    });
+  }
+
   private convertStringsToArray(content: string): string[] {
     return content
       .split('\n')

package/artifact-builder/SubjectGenerator.ts

@@ -57,7 +57,7 @@ export class SubjectGenerator {
       const tsFiles = fs.readdirSync(subjectFolderPath).filter((file) => file.endsWith('.ts') && file !== 'index.ts');
       const indexFile = path.join(subjectFolderPath, 'index.ts');
 
-      if(tsFiles.length === 0) return;
+      if (tsFiles.length === 0) return;
 
       if (!fs.existsSync(indexFile)) {
         fs.writeFileSync(indexFile, '', 'utf-8');
@@ -65,7 +65,7 @@ export class SubjectGenerator {
 
       tsFiles.forEach((tsFile) => {
         if (tsFile === 'index.ts') return;
-        
+
         const className = tsFile.replace('.ts', '');
         exportLines.push(`export { ${className} } from './${className}.js';`);
       });
@@ -82,7 +82,7 @@ export class SubjectGenerator {
     const subjectFolderPath = this.getSubjectFolderRelativePath(subjectFolderName);
 
     const subjectClass = {
-      content: `import type { Page } from '@playwright/test';\nimport { SubjectPageBase } from '../../index.js';\n`,
+      content: `import type { Page } from '@playwright/test';\nimport { SubjectPageBase } from '../../SubjectPageBase.js';\n`,
       name: this._namingHandler.generateSubjectClassName(subject)
     };
     const componentDictionary: { name: string; type: SubjectAgnosticComponents; context: string }[] =

package/artifact-builder/SubjectRegistration.ts

@@ -2,55 +2,45 @@ import * as fs from 'node:fs';
 import * as path from 'node:path';
 import { dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
+import * as prettier from 'prettier';
 
 export class SubjectRegistration {
-  private static readonly SUBJECTS_RELATIVE_PATH = 'test-artifacts/subjects';
   private static readonly IMPORT_MATCH_REGEX = /import .*'\.\.\/test-artifacts\/subjects\/index\.js';\n?/g;
 
   private readonly _currentFilename: string;
   private readonly _currentDirname: string;
   private readonly _subjectTypePath: string;
-  private readonly _subjectsIndexDirectory: string;
-  private readonly _subjectBuilderPath: string;
 
   constructor() {
     this._currentFilename = fileURLToPath(import.meta.url);
     this._currentDirname = dirname(this._currentFilename);
     this._subjectTypePath = path.resolve(this._currentDirname, '../../page-extensions/SubjectRegistry.ts');
-    this._subjectsIndexDirectory = path.resolve(
-      this._currentDirname,
-      `../../${SubjectRegistration.SUBJECTS_RELATIVE_PATH}/index.ts`
-    );
-    this._subjectBuilderPath = path.resolve(this._currentDirname, '../../page-extensions/SubjectProvider.ts');
   }
 
   public run(): void {
-    this.registerGeneratedSubjectsAsSubjectTypes();
-    this.registerGeneratedSubjectsUnderPageGet();
+    const subjectDetails = this.getAllSubjectDetails();
+
+    this.registerGeneratedSubjectsAsSubjectTypes(subjectDetails);
   }
 
-  private registerGeneratedSubjectsAsSubjectTypes(): void {
-    const subjectList = this.getAllSubjects();
-    const subjectTypeImportsAndExports = this.getSubjectTypesImportsAndExports(subjectList);
+  private async registerGeneratedSubjectsAsSubjectTypes(subjectDetails: SubjectDetail[]): Promise<void> {
+    const subjectTypeImportsAndExports = this.buildSubjectTypeExport(subjectDetails);
     const subject = { content: this.setSubjectTypeContent() };
 
     this.removeExistingSubjectTypeDefinition(subject);
     this.removeAllImportsFromSubjectIndex(subject);
 
     subject.content = subjectTypeImportsAndExports + subject.content;
-    fs.writeFileSync(this._subjectTypePath, subject.content, 'utf-8');
-  }
-
-  private registerGeneratedSubjectsUnderPageGet(): void {
-    const subjectNames = this.getAllSubjects();
-    const subjectBuilder = { content: fs.readFileSync(this._subjectBuilderPath, 'utf-8') };
+    subject.content = this.addPathRecordsToContent(subject.content, subjectDetails);
 
-    this.removeSubjectBuilderImports(subjectBuilder);
-    this.removeSubjectBuilderSubjectDefinition(subjectBuilder);
-    this.addSubjectBuilderImports(subjectNames, subjectBuilder);
-    this.addSubjectBuilderSubjectDefinition(subjectNames, subjectBuilder);
+    const formattedContent = await prettier.format(subject.content, {
+      parser: 'typescript',
+      singleQuote: true,
+      semi: true,
+      trailingComma: 'all'
+    });
 
-    fs.writeFileSync(this._subjectBuilderPath, subjectBuilder.content, 'utf-8');
+    fs.writeFileSync(this._subjectTypePath, formattedContent, 'utf-8');
   }
 
   private removeExistingSubjectTypeDefinition(subject: { content: string }): void {
@@ -71,12 +61,15 @@ export class SubjectRegistration {
     }
   }
 
-  private getSubjectTypesImportsAndExports(subjectList: string[]): string {
-    const importLine = `import type { ${subjectList.join(', ')} } from '../${SubjectRegistration.SUBJECTS_RELATIVE_PATH}/index.js';`;
-    const subjectTypeEntries = subjectList.map((name) => `  ${name}: typeof ${name};`).join('\n    ');
-    const newSubjectTypes = `${importLine}
-
-  export type SubjectType = {
+  private buildSubjectTypeExport(subjectDetails: SubjectDetail[]): string {
+    const subjectTypeEntries = subjectDetails
+      .map(
+        (details) =>
+          `  ${details.subject}${details.variant ?? ''}${details.screen}: ` +
+          `Promise<import('../test-artifacts/subjects/${details.subject}/index.js').${details.subject}${details.variant ?? ''}${details.screen}>;`
+      )
+      .join('\n    ');
+    const newSubjectTypes = `export type SubjectType = {
   ${subjectTypeEntries}
   };
   `;
@@ -84,53 +77,68 @@ export class SubjectRegistration {
     return newSubjectTypes;
   }
 
-  private getAllSubjects(): string[] {
+  private addPathRecordsToContent(content: string, subjectDetails: SubjectDetail[]): string {
+    const pathRecordsString = this.buildPathRecordsString(subjectDetails);
+    const stringToMatch = "none: ''";
+    return content.replace(stringToMatch, `\n${pathRecordsString}\n    `);
+  }
+
+  private buildPathRecordsString(subjectDetails: SubjectDetail[]): string {
+    return subjectDetails
+      .map(
+        (details) =>
+          `  ${details.subject}${details.variant ?? ''}${details.screen}: ` +
+          `'../test-artifacts/subjects/${details.subject}/index.js',`
+      )
+      .join('\n    ');
+  }
+
+  private getAllSubjectDetails(): SubjectDetail[] {
     const subjectsDir = path.resolve(this._currentDirname, '../../test-artifacts/subjects');
 
     const subjectFolders = fs.readdirSync(subjectsDir).filter((file) => {
       return fs.statSync(path.join(subjectsDir, file)).isDirectory();
     });
 
-    const subjectNames: string[] = [];
+    const subjectDetails: SubjectDetail[] = [];
+    const seenFullNames = new Set<string>();
 
     subjectFolders.forEach((folder) => {
       const folderPath = path.join(subjectsDir, folder);
-      const tsFiles = fs.readdirSync(folderPath).filter((file) => file.endsWith('.ts'));
+      const tsFiles = fs.readdirSync(folderPath).filter((file) => file.endsWith('.ts') && file !== 'index.ts');
 
       tsFiles.forEach((tsFile) => {
         const classContent = fs.readFileSync(path.join(folderPath, tsFile), 'utf-8');
         const classMatches = classContent.matchAll(/export\s+class\s+(\w+)/g);
+
         for (const match of classMatches) {
-          subjectNames.push(match[1]);
+          const className = match[1];
+          const pattern = new RegExp(`^(${folder})(.*)(Main|Popup|Zoom|Detail)$`);
+          const variantMatch = className.match(pattern);
+
+          if (variantMatch) {
+            const fullName = variantMatch[0];
+            if (!seenFullNames.has(fullName)) {
+              const variant = variantMatch[2] || '';
+              const screen = variantMatch[3] as SubjectDetail['screen'];
+
+              subjectDetails.push({
+                subject: folder,
+                variant: variant,
+                screen: screen
+              });
+              seenFullNames.add(fullName);
+            }
+          }
         }
       });
     });
-    return subjectNames;
-  }
-
-  private addSubjectBuilderSubjectDefinition(subjectNames: string[], subjectBuilder: { content: string }): void {
-    const pageSubjectDefinition = `page.subject = {\n${subjectNames.map((name) => `    ${name},`).join('\n')}\n};\n`;
-
-    subjectBuilder.content = subjectBuilder.content.replace(
-      /(\/\/ page\.subject definition goes here\n)/,
-      `$1        ${pageSubjectDefinition}        `
-    );
-  }
-
-  private removeSubjectBuilderSubjectDefinition(subjectBuilder: { content: string }): void {
-    subjectBuilder.content = subjectBuilder.content.replace(/page\.subject\s*=\s*{[\s\S]*?};\s*/m, '');
-  }
-
-  private addSubjectBuilderImports(subjectNames: string[], subjectBuilder: { content: string }): void {
-    const importLine = `import { ${subjectNames.join(', ')} } from '../${SubjectRegistration.SUBJECTS_RELATIVE_PATH}/index.js';`;
-
-    subjectBuilder.content = subjectBuilder.content.replace(
-      /(import type { Test } from '\.\.\/types\/Test\.js';)/,
-      `$1\n${importLine}`
-    );
+    return subjectDetails;
   }
+}
 
-  private removeSubjectBuilderImports(subjectBuilder: { content: string }): void {
-    subjectBuilder.content = subjectBuilder.content.replace(SubjectRegistration.IMPORT_MATCH_REGEX, '');
-  }
+export interface SubjectDetail {
+  subject: string;
+  variant?: string;
+  screen: 'Main' | 'Popup' | 'Zoom' | 'Detail';
 }

package/artifact-builder/helpers/DataRetriever.ts

@@ -19,8 +19,10 @@ export class DataRetriever {
 
   public getRegisteredSubjects(): IRegisteredSubjects[] | null {
     const registeredSubjectsPath = path.join(this._consumerRootDirectory, 'seed-data/registeredSubjects.json');
+
     if (!fs.existsSync(registeredSubjectsPath)) {
-      console.error(`Seed data file not found at: ${registeredSubjectsPath}`);
+      console.info(`Seed data file not found at: ${registeredSubjectsPath}`);
+
       return null;
     }
 
@@ -31,7 +33,7 @@ export class DataRetriever {
   public getSubjectsToBuild(): ISubject[] {
     const subjectsToBuildPath = path.join(this._consumerRootDirectory, 'seed-data/subjectsToBuild.json');
     if (!fs.existsSync(subjectsToBuildPath)) {
-      console.error(`subjectsToBuild.json not found at: ${subjectsToBuildPath}. Using all subjects as fallback.`);
+      console.info(`subjectsToBuild.json not found at: ${subjectsToBuildPath}. Using all subjects as fallback.`);
 
       return this.getSubjectsSeedData();
     }
@@ -43,7 +45,8 @@ export class DataRetriever {
   public getScreensToBuild(): string[] {
     const screensToBuildPath = path.join(this._consumerRootDirectory, 'seed-data/screensToBuild.json');
     if (!fs.existsSync(screensToBuildPath)) {
-      console.error(`screensToBuild.json not found at: ${screensToBuildPath}. Using all screens as fallback.`);
+      console.info(`screensToBuild.json not found.`);
+      return [];
     }
 
     const json = fs.readFileSync(screensToBuildPath, 'utf-8');

package/artifact-builder/helpers/NamingHandler.ts

@@ -25,7 +25,8 @@ export class NamingHandler {
       Form: {
         email: formDefaultSuffix,
         phone_number: formDefaultSuffix,
-        suggestion_starts_with: KnownElementTypes.Lookup,
+        suggestion_starts_with: formDefaultSuffix,
+        lookup_dropdown: KnownElementTypes.Lookup,
         checkbox: KnownElementTypes.Checkbox,
         multiline: KnownElementTypes.Textarea,
         combo: KnownElementTypes.Dropdown
@@ -34,6 +35,7 @@ export class NamingHandler {
         email: gridDefaultSuffix,
         phone_number: gridDefaultSuffix,
         suggestion_starts_with: gridDefaultSuffix,
+        lookup_dropdown: gridDefaultSuffix,
         checkbox: gridDefaultSuffix,
         multiline: gridDefaultSuffix,
         combo: gridDefaultSuffix
@@ -46,17 +48,16 @@ export class NamingHandler {
     ).toLowerCase();
   }
 
-  public getIdFromElementName(elementName: string): string {
-    return (
-      elementName
-        // Remove the suffix at the end
-        .replace(/([A-Z][a-z0-9]*)$/, '')
-        // Convert to kebab-case
-        .replace(/([a-z])([A-Z])/g, '$1-$2')
-        .toLowerCase()
-        // Replace underscores with hyphens
-        .replace(/_/g, '-')
-    );
+  public getIdFromElementName(elementName: string, componentType: SubjectComponents, controlType: string): string {
+    const elementSuffixToRemove = this.getElementSuffixFromControlTypeAndComponentType(controlType, componentType);
+    const snakeCaseElementName = this.pascalToSnakeCase(elementName);
+
+    return snakeCaseElementName
+      .replace(new RegExp(`${elementSuffixToRemove}$`, 'i'), '')
+      .replace(/([a-z])([A-Z])/g, '$1-$2')
+      .toLowerCase()
+      .replace(/_/g, '-')
+      .replace(/-+$/g, '');
   }
 
   public getComponentTypeFromFileName(fileName: string): SubjectComponents {
@@ -71,18 +72,18 @@ export class NamingHandler {
   }
 
   public getElementTypeFromElementName(elementName: string): string {
-    // Get the suffix at the end of the element name
-    const match = elementName.match(/([A-Z][a-z0-9]*)$/);
+    const snakeCaseElementName = this.pascalToSnakeCase(elementName);
+    const parts = snakeCaseElementName.split('_');
 
-    // verify that match is a known element type
-    if (match) {
-      const elementType = match[1].toLowerCase();
-      if (Object.values(KnownElementTypes).includes(elementType as KnownElementTypes)) {
-        return elementType;
+    for (let i = parts.length - 1; i > 0; i--) {
+      const candidate = parts.slice(i).join('_');
+
+      if (Object.values(KnownElementTypes).includes(candidate as KnownElementTypes)) {
+        return candidate;
       }
     }
 
-    throw new Error(`Could not extract element type from element name: ${elementName}`);
+    throw new Error(`No KnownElementType match found for a partial suffix of "${elementName}"`);
   }
 
   public getSubjectFromFileName(fileName: string): string {
@@ -136,6 +137,13 @@ export class NamingHandler {
       .join('');
   }
 
+  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 getComponentIdFromName(componentName: string, componentType: ScreenComponents): string {
     if (componentType === 'ActionBar' || componentType === 'CustomActionBar') {
       const capitalizedComponentName = this.capitalizeFirstLetter(componentName);

package/artifact-builder/helpers/Stopwatch.ts

@@ -0,0 +1,13 @@
+import { performance } from 'node:perf_hooks';
+
+export class Stopwatch {
+  start(message: string) {
+    const startTime = performance.now();
+    return {
+      stop() {
+        const duration = ((performance.now() - startTime) / 1000).toFixed(3);
+        console.log(`[${duration}s]: ${message}`);
+      }
+    };
+  }
+}

package/artifact-builder/helpers/index.ts

@@ -1,2 +1,3 @@
 export * from './DataRetriever.js';
 export * from './NamingHandler.js';
+export * from './Stopwatch.js';

package/components/BaseComponentObjects.ts

@@ -3,8 +3,11 @@ import type { IComponentObjects } from '../interfaces/IComponentObjects.js';
 
 export abstract class BaseComponentObjects implements IComponentObjects {
   context: Locator;
+  mainHeader: Locator;
 
   constructor(page: Page, context: Locator | null = null) {
-    this.context = context ? context : page.locator('body');
+    this.mainHeader = page.locator('main header');
+    const body = page.locator('body');
+    this.context = context ? context : body;
   }
 }

package/components/action-bar/ActionBar.ts

@@ -90,9 +90,9 @@ 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);
+  constructor(page: Page, actionBarContext: Locator | null = null) {
+    super(page, actionBarContext);
+    this._actionBarObjects = new ActionBarObjects(page, actionBarContext);
     this._overflowMenu = new ActionBarOverflow(page);
   }
 

package/components/grid/Grid.ts

@@ -12,6 +12,10 @@ export class Grid {
     this._page = page;
   }
 
+  protected get page() {
+    return this._page;
+  }
+
   /**
    * Retrieves a column header element by its text content.
    * @param text
@@ -253,7 +257,7 @@ export class Grid {
     const optionButton = this._gridObjects.excelStyleFilterPopupOptionByText(columnId, valueRegex);
     await optionButton.locator('input[type="checkbox"]').check();
 
-    await this._gridObjects.gridCell().first().click();
+    await this._gridObjects.mainHeader.click(); // Click outside to close the popup
     await popup.waitFor({ state: 'detached' });
   }
 
@@ -281,11 +285,11 @@ export class Grid {
   }
 
   /**
-   * Verifies the number of rows in the grid and checks for "No result" overlay if zero.
-   * @param expectedRowCount The expected number of rows.
+   * Verifies the number of records in the grid and checks for "No result" overlay if zero.
+   * @param expectedRecordCount The expected number of records.
    */
-  public async verifyNumberOfRowsInGrid(expectedRowCount: number): Promise<void> {
-    if (expectedRowCount === 0) {
+  public async verifyGridRecordCount(expectedRecordCount: number): Promise<void> {
+    if (expectedRecordCount === 0) {
       if (await this.hasNoRowsOverlay()) {
         return;
       } else {
@@ -294,29 +298,22 @@ export class Grid {
     }
 
     await pollUntil(() => this.rows().count(), {
-      predicate: (n: number) => n === expectedRowCount
+      predicate: (n: number) => n === expectedRecordCount + 1 // +1 to account for header row
     });
   }
 
   /**
    * Verifies if the "No result" overlay is visible in the grid.
-   * @returns A promise that resolves to true if the overlay is visible, otherwise false.
+   * @returns A promise that resolves to true if the overlay is visible and , otherwise false.
    */
   public async hasNoRowsOverlay(): Promise<boolean> {
-    try {
-      const overlay = this._gridObjects.noRowsOverlay();
-      await pollUntil(
-        async () => {
-          const txt = (await overlay.textContent())?.trim() ?? '';
-          return txt.includes('No result');
-        },
-        { predicate: Boolean }
-      );
-    } catch {
-      console.error('The "No result" overlay is not displaying the expected text.');
-      return false;
-    }
+    const overlay = this._gridObjects.noRowsOverlay();
+
+    const hasCorrectWording = await pollUntil(
+      async () => (await overlay.textContent())?.trim().includes('No result') ?? false,
+      { predicate: Boolean }
+    );
 
-    return await this._gridObjects.noRowsOverlay().isVisible();
+    return hasCorrectWording && (await overlay.isVisible());
   }
 }

package/components/tab/BaseTab.ts

@@ -22,11 +22,11 @@ export class BaseTab {
   }
 
   // --- Useful getters ---
-  public async getTabById(name: string): Promise<Locator> {
+  public getTabById(name: string): Locator {
     return this._objects.tabByTestId(name);
   }
 
-  public async getTabByIndex(index: number): Promise<Locator> {
+  public getTabByIndex(index: number): Locator {
     return this._objects.tabByIndex(index);
   }
 

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/components/tab/DetailTabPage.ts

@@ -10,11 +10,11 @@ export class DetailTabPage extends BaseTab {
     this._objects = new DetailTabPageObjects(page, context);
   }
 
-  public async getDetailTabPageById(name: string): Promise<Locator> {
+  public getDetailTabPageById(name: string): Locator {
     return this._objects.detailTab(name);
   }
 
-  public async getDetailTabPageByIndex(index: number): Promise<Locator> {
+  public getDetailTabPageByIndex(index: number): Locator {
     return this._objects.tabByIndex(index);
   }
 }

package/components/tab/Tab.ts

@@ -19,7 +19,7 @@ export class Tab extends BaseTab {
   }
 
   // Returns the “List” tab locator (scoped).
-  public async getListTab(tabindex: string = '-1'): Promise<Locator> {
+  public getListTab(tabindex: string = '-1'): Locator {
     return this._objects.listTab(tabindex);
   }
 
@@ -29,12 +29,12 @@ export class Tab extends BaseTab {
   }
 
   // Returns the “Form” tab locator (scoped).
-  public async getFormTab(): Promise<Locator> {
+  public getFormTab(): Locator {
     return this._objects.formTab();
   }
 
   // Opens a component tab by its ID in this tabstrip (scoped).
-  public async openTabByID(tabid: string): Promise<void> {
-    await this._objects.tab(tabid).click();
+  public async openTabById(tabId: string): Promise<void> {
+    await this._objects.tab(tabId).click();
   }
 }