lexxit-automation-framework 2.0.20 → 3.0.0

package/src/actions/dropdownHandler.ts

@@ -0,0 +1,501 @@
+import { Page, Locator } from 'playwright';
+import { StepResult, ScreenshotMode } from '../types/types';
+import { LocatorService } from '../utils/locatorService';
+import { BaseHandler } from './baseHandler';
+import { DEFAULT_SCREENSHOT_MODE } from '../config';
+
+
+type DropdownType = 'native' | 'combobox' | 'multiselect';
+export class DropdownHandler extends BaseHandler{
+  // private page: Page;
+    protected page: Page;
+  // private lastApiResponse: { status: number; url: string; body: any } | null = null;
+
+  constructor(page: Page, screenshotMode: ScreenshotMode = DEFAULT_SCREENSHOT_MODE) {
+  super();
+  this.page = page;
+  this.screenshotMode = screenshotMode;
+  this.setupNetworkCapture(page);
+}
+
+
+
+
+  // ─── Helpers ───────────────────────────────────────────────────────────────
+
+  // private getStartTime(): string {
+  //   return new Date().toISOString();
+  // }
+
+  // private getDuration(startMs: number): number {
+  //   return Date.now() - startMs;
+  // }
+
+  // private buildResult(
+  //   status: 'PASS' | 'FAIL',
+  //   expected_result: string,
+  //   comments: string,
+  //   startMs: number,
+  //   startTime: string,
+  //   step_name: string = '',
+  //   uid: string | null = null,
+  //   obj_uid: string | null = null,
+  //   page_uid: string | null = null
+  // ): StepResult {
+  //   return {
+  //     uid,
+  //     obj_uid,
+  //     page_uid,
+  //     step_name,
+  //     step_script: '',
+  //     status,
+  //     expected_result,
+  //     comments,
+  //     duration:   this.getDuration(startMs),
+  //     start_time: startTime
+  //   };
+  // }
+
+  // private async captureScreenshot(isFailure: boolean): Promise<string | undefined> {
+  //   if (this.screenshotMode === 'never') return undefined;
+  //   if (this.screenshotMode === 'on_failure' && !isFailure) return undefined;
+  //   try {
+  //     if (!this.page || this.page.isClosed()) return undefined;
+  //     const buf = await this.page.screenshot({ type: 'png', fullPage: false });
+  //     return buf.toString('base64');
+  //   } catch {
+  //     return undefined;
+  //   }
+  // }
+
+  // private classifyError(error: any): string {
+  //   const msg: string = error?.message || String(error);
+
+  //   if (msg.includes('Element not found') || msg.includes('not visible')) {
+  //     return `Element not found or not visible: ${msg}`;
+  //   }
+  //   if (msg.includes('Timeout') || msg.includes('timeout')) {
+  //     return `Timeout error - element took too long to respond: ${msg}`;
+  //   }
+  //   if (msg.includes('not enabled')) {
+  //     return `Element is disabled: ${msg}`;
+  //   }
+  //   if (msg.includes('detached')) {
+  //     return `Element got detached from DOM: ${msg}`;
+  //   }
+  //   if (msg.includes('Target closed') || msg.includes('has been closed')) {
+  //     return `Browser or page closed unexpectedly: ${msg}`;
+  //   }
+
+  //   return `Unexpected error: ${msg}`;
+  // }
+
+  // private appendMatchedLocatorInfo(comments: string, matchedIndex: number, matchedXPath: string): string {
+  //   if (matchedIndex > 0) {
+  //     return `${comments} (Matched locator at position ${matchedIndex}: ${matchedXPath})`;
+  //   }
+  //   return comments;
+  // }
+
+  // ─── detectType ────────────────────────────────────────────────────────────
+
+  private async detectType(element: Locator): Promise<DropdownType> {
+    const tagName = await element.evaluate((el) => el.tagName.toLowerCase()).catch(() => '');
+    if (tagName === 'select') {
+      const isMultiple = await element.evaluate((el) => (el as HTMLSelectElement).multiple).catch(() => false);
+      return isMultiple ? 'multiselect' : 'native';
+    }
+
+    const role = await element.getAttribute('role').catch(() => null);
+    if (role === 'combobox') return 'combobox';
+
+    const ariaMultiselectable = await element.getAttribute('aria-multiselectable').catch(() => null);
+    if (ariaMultiselectable === 'true') return 'multiselect';
+
+    return 'combobox';
+  }
+
+  // ─── openDropdown (for combobox/multiselect) ──────────────────────────────
+
+  private async openDropdown(element: Locator): Promise<void> {
+    const isExpanded = await element.getAttribute('aria-expanded').catch(() => null);
+    if (isExpanded !== 'true') {
+      await element.click();
+    }
+  }
+
+  private getOptionLocator(optionText: string): Locator {
+    return this.page.locator(
+      `[role="option"]:has-text("${optionText}"), li:has-text("${optionText}"), div[role="listbox"] >> text="${optionText}"`
+    ).first();
+  }
+
+ // ─── selectOption ──────────────────────────────────────────────────────────
+
+  // async selectOption(label: string, locators: string[], optionText: string, step_name: string = 'Select dropdown option'): Promise<StepResult> {
+  //   const startMs = Date.now();
+  //   const startTime = this.getStartTime();
+  //   const expected = `'${optionText}' selected in '${label}' successfully`;
+
+  //   try {
+  //     const resolved = await LocatorService.resolveElement(this.page, locators);
+  //     const type = await this.detectType(resolved.element);
+
+  //     if (type === 'native') {
+  //       await resolved.element.selectOption({ label: optionText });
+  //     } else {
+  //       await this.openDropdown(resolved.element);
+  //       const option = this.getOptionLocator(optionText);
+  //       await option.waitFor({ state: 'visible', timeout: 10000 });
+  //       await option.click();
+  //     }
+
+  //     const comments = this.appendMatchedLocatorInfo(expected, resolved.matchedIndex, resolved.matchedXPath);
+  //     return this.buildResult('pass', expected, comments, startMs, startTime, step_name);
+  //   } catch (error: any) {
+  //     const sc = await this.captureScreenshot(true);
+  //     return this.buildResult('fail', expected, this.classifyError(error), startMs, startTime, step_name, sc);
+  //   }
+  // }
+  async selectOption(label: string, locators: string[], optionText: string, step_name: string = 'Select dropdown option'): Promise<StepResult> {
+    const startMs = Date.now();
+    const startTime = this.getStartTime();
+    const expected = `'${optionText}' selected in '${label}' successfully`;
+
+    try {
+      const resolved = await LocatorService.resolveElement(this.page, locators);
+      const tagName = await resolved.element.evaluate((e: Element) => e.tagName.toLowerCase());
+
+      if (tagName === 'select') {
+        // Try by label, value, and partial text match
+        const byLabel = resolved.element.selectOption({ label: optionText });
+        const byValue = resolved.element.selectOption({ value: optionText });
+        const byPartial = (async () => {
+          const options = await resolved.element.locator('option').all();
+          for (const opt of options) {
+            const txt = (await opt.textContent() ?? '').trim();
+            if (txt.toLowerCase().includes(optionText.toLowerCase())) {
+              const val = await opt.getAttribute('value');
+              if (!val) throw new Error(`Option "${optionText}" has no value`);
+              return resolved.element.selectOption({ value: val });
+            }
+          }
+          throw new Error(`Option "${optionText}" not found`);
+        })();
+
+        await Promise.any([byLabel, byValue, byPartial]);
+
+      } else {
+        // Custom dropdown — click to open then find option
+        await resolved.element.click();
+
+        const optionSelectors = [
+          `[role="option"]:has-text("${optionText}")`,
+          `mat-option:has-text("${optionText}")`,
+          `.ng-option:has-text("${optionText}")`,
+          `li:has-text("${optionText}")`,
+          `div:has-text("${optionText}")`
+        ];
+
+        let found = false;
+        for (const opt of optionSelectors) {
+          const option = this.page.locator(opt).first();
+          if (await option.isVisible().catch(() => false)) {
+            await option.click();
+            found = true;
+            break;
+          }
+        }
+
+        if (!found) {
+          throw new Error(`Option "${optionText}" not found`);
+        }
+      }
+
+      const comments = this.appendMatchedLocatorInfo(expected, resolved.matchedIndex, resolved.matchedXPath);
+      return this.buildResult('PASS', expected, comments, startMs, startTime, step_name);
+
+    } catch (error: any) {
+      // const sc = await this.captureScreenshot(true);
+      const msg = (error?.message || String(error)).toLowerCase();
+
+      if (
+        msg.includes('waiting for locator') ||
+        msg.includes('timeout') ||
+        msg.includes('no element') ||
+        msg.includes('not found') ||
+        msg.includes('not visible') ||
+        msg.includes('not attached') ||
+        msg.includes('strict mode violation')
+      ) {
+        const captured = this.getLastApiResponse();
+        if (captured) {
+          const bodyText = typeof captured.body === 'object' ? JSON.stringify(captured.body, null, 2) : String(captured.body);
+          const comments = `Element "${label}" not found on page.\nNetwork response [HTTP ${captured.status}] from ${captured.url}:\n${bodyText}`;
+          return this.buildResult('FAIL', expected, comments, startMs, startTime, step_name);
+        }
+        return this.buildResult('FAIL', expected, `"${label}" not found`, startMs, startTime, step_name);
+      }
+
+      return this.buildResult('FAIL', expected, this.classifyError(error), startMs, startTime, step_name);
+    }
+  }
+
+  // ─── selectMultipleOptions ─────────────────────────────────────────────────
+
+  async selectMultipleOptions(label: string, locators: string[], optionTexts: string[], step_name: string = 'Select multiple dropdown options'): Promise<StepResult> {
+    const startMs = Date.now();
+    const startTime = this.getStartTime();
+    const expected = `[${optionTexts.join(', ')}] selected in '${label}' successfully`;
+
+    try {
+      const resolved = await LocatorService.resolveElement(this.page, locators);
+      const type = await this.detectType(resolved.element);
+
+      if (type === 'native') {
+        await resolved.element.selectOption(optionTexts.map((text) => ({ label: text })));
+      } else {
+        await this.openDropdown(resolved.element);
+        for (const optionText of optionTexts) {
+          const option = this.getOptionLocator(optionText);
+          await option.waitFor({ state: 'visible', timeout: 10000 });
+          await option.click();
+        }
+      }
+
+      const comments = this.appendMatchedLocatorInfo(expected, resolved.matchedIndex, resolved.matchedXPath);
+      return this.buildResult('PASS', expected, comments, startMs, startTime, step_name);
+    } catch (error: any) {
+      // const sc = await this.captureScreenshot(true);
+      return this.buildResult('FAIL', expected, this.classifyError(error), startMs, startTime, step_name);
+    }
+  }
+
+  // ─── deselectOption ────────────────────────────────────────────────────────
+
+  async deselectOption(label: string, locators: string[], optionText: string, step_name: string = 'Deselect dropdown option'): Promise<StepResult> {
+    const startMs = Date.now();
+    const startTime = this.getStartTime();
+    const expected = `'${optionText}' deselected in '${label}' successfully`;
+
+    try {
+      const resolved = await LocatorService.resolveElement(this.page, locators);
+      const type = await this.detectType(resolved.element);
+
+      if (type === 'native') {
+        const currentValues = await resolved.element.evaluate((el) =>
+          Array.from((el as HTMLSelectElement).selectedOptions).map((opt) => opt.label)
+        );
+        const remaining = currentValues.filter((val: string) => val !== optionText);
+        await resolved.element.selectOption(remaining.map((text: string) => ({ label: text })));
+      } else {
+        const chip = this.page.locator(`text="${optionText}"`).first();
+        const isChipVisible = await chip.isVisible().catch(() => false);
+
+        if (isChipVisible) {
+          await chip.click();
+        } else {
+          await this.openDropdown(resolved.element);
+          const option = this.getOptionLocator(optionText);
+          await option.waitFor({ state: 'visible', timeout: 10000 });
+          await option.click();
+        }
+      }
+
+      const comments = this.appendMatchedLocatorInfo(expected, resolved.matchedIndex, resolved.matchedXPath);
+      return this.buildResult('PASS', expected, comments, startMs, startTime, step_name);
+    } catch (error: any) {
+      // const sc = await this.captureScreenshot(true);
+      return this.buildResult('FAIL', expected, this.classifyError(error), startMs, startTime, step_name);
+    }
+  }
+
+  // ─── getSelectedOption ─────────────────────────────────────────────────────
+
+  async getSelectedOption(label: string, locators: string[], step_name: string = 'Get selected dropdown option'): Promise<StepResult> {
+    const startMs = Date.now();
+    const startTime = this.getStartTime();
+    const expected = `Selected option retrieved from '${label}' successfully`;
+
+    try {
+      const resolved = await LocatorService.resolveElement(this.page, locators);
+      const type = await this.detectType(resolved.element);
+
+      let selectedText = '';
+
+      if (type === 'native') {
+        selectedText = await resolved.element.evaluate((el) => {
+          const select = el as HTMLSelectElement;
+          return select.selectedOptions[0]?.label || '';
+        });
+      } else {
+        selectedText = await resolved.element.innerText();
+      }
+
+      const comments = this.appendMatchedLocatorInfo(
+        `Selected option in '${label}' is: ${selectedText}`,
+        resolved.matchedIndex,
+        resolved.matchedXPath
+      );
+      return this.buildResult('PASS', expected, comments, startMs, startTime, step_name);
+    } catch (error: any) {
+      // const sc = await this.captureScreenshot(true);
+      return this.buildResult('FAIL', expected, this.classifyError(error), startMs, startTime, step_name);
+    }
+  }
+
+  // ─── getSelectedOptions ────────────────────────────────────────────────────
+
+  async getSelectedOptions(label: string, locators: string[], step_name: string = 'Get selected dropdown options'): Promise<StepResult> {
+    const startMs = Date.now();
+    const startTime = this.getStartTime();
+    const expected = `Selected options retrieved from '${label}' successfully`;
+
+    try {
+      const resolved = await LocatorService.resolveElement(this.page, locators);
+      const type = await this.detectType(resolved.element);
+
+      let selectedTexts: string[] = [];
+
+      if (type === 'native') {
+        selectedTexts = await resolved.element.evaluate((el) =>
+          Array.from((el as HTMLSelectElement).selectedOptions).map((opt) => opt.label)
+        );
+      } else {
+        const chips = this.page.locator('[class*="chip"], [class*="tag"]');
+        const count = await chips.count();
+        for (let i = 0; i < count; i++) {
+          selectedTexts.push(await chips.nth(i).innerText());
+        }
+      }
+
+      const comments = this.appendMatchedLocatorInfo(
+        `Selected options in '${label}' are: [${selectedTexts.join(', ')}]`,
+        resolved.matchedIndex,
+        resolved.matchedXPath
+      );
+      return this.buildResult('PASS', expected, comments, startMs, startTime, step_name);
+    } catch (error: any) {
+      // const sc = await this.captureScreenshot(true);
+      return this.buildResult('FAIL', expected, this.classifyError(error), startMs, startTime, step_name);
+    }
+  }
+
+  // ─── getAllOptions ─────────────────────────────────────────────────────────
+
+  async getAllOptions(label: string, locators: string[], step_name: string = 'Get all dropdown options'): Promise<StepResult> {
+    const startMs = Date.now();
+    const startTime = this.getStartTime();
+    const expected = `All options retrieved from '${label}' successfully`;
+
+    try {
+      const resolved = await LocatorService.resolveElement(this.page, locators);
+      const type = await this.detectType(resolved.element);
+
+      let allOptions: string[] = [];
+
+      if (type === 'native') {
+        allOptions = await resolved.element.evaluate((el) =>
+          Array.from((el as HTMLSelectElement).options).map((opt) => opt.label)
+        );
+      } else {
+        await this.openDropdown(resolved.element);
+        const options = this.page.locator('[role="option"], div[role="listbox"] li');
+        const count = await options.count();
+        for (let i = 0; i < count; i++) {
+          allOptions.push(await options.nth(i).innerText());
+        }
+      }
+
+      const comments = this.appendMatchedLocatorInfo(
+        `Options in '${label}' are: [${allOptions.join(', ')}]`,
+        resolved.matchedIndex,
+        resolved.matchedXPath
+      );
+      return this.buildResult('PASS', expected, comments, startMs, startTime, step_name);
+    } catch (error: any) {
+      // const sc = await this.captureScreenshot(true);
+      return this.buildResult('FAIL', expected, this.classifyError(error), startMs, startTime, step_name);
+    }
+  }
+
+  // ─── isOptionPresent ───────────────────────────────────────────────────────
+
+  async isOptionPresent(label: string, locators: string[], optionText: string, step_name: string = 'Check if dropdown option is present'): Promise<StepResult> {
+    const startMs = Date.now();
+    const startTime = this.getStartTime();
+    const expected = `Option '${optionText}' presence checked in '${label}' successfully`;
+
+    try {
+      const resolved = await LocatorService.resolveElement(this.page, locators);
+      const type = await this.detectType(resolved.element);
+
+      let isPresent = false;
+
+      if (type === 'native') {
+        const allOptions = await resolved.element.evaluate((el) =>
+          Array.from((el as HTMLSelectElement).options).map((opt) => opt.label)
+        );
+        isPresent = allOptions.includes(optionText);
+      } else {
+        await this.openDropdown(resolved.element);
+        const option = this.getOptionLocator(optionText);
+        isPresent = await option.isVisible().catch(() => false);
+      }
+
+      const comments = this.appendMatchedLocatorInfo(
+        `Option '${optionText}' is ${isPresent ? 'present' : 'not present'} in '${label}'`,
+        resolved.matchedIndex,
+        resolved.matchedXPath
+      );
+      return this.buildResult('PASS', expected, comments, startMs, startTime, step_name);
+    } catch (error: any) {
+      // const sc = await this.captureScreenshot(true);
+      return this.buildResult('FAIL', expected, this.classifyError(error), startMs, startTime, step_name);
+    }
+  }
+
+  // ─── isEnabled ─────────────────────────────────────────────────────────────
+
+  async isEnabled(label: string, locators: string[], step_name: string = 'Check if dropdown is enabled'): Promise<StepResult> {
+    const startMs = Date.now();
+    const startTime = this.getStartTime();
+    const expected = `'${label}' enabled state retrieved successfully`;
+
+    try {
+      const resolved = await LocatorService.resolveElement(this.page, locators);
+      const enabled = await resolved.element.isEnabled();
+
+      const comments = this.appendMatchedLocatorInfo(
+        `'${label}' is ${enabled ? 'enabled' : 'disabled'}`,
+        resolved.matchedIndex,
+        resolved.matchedXPath
+      );
+      return this.buildResult('PASS', expected, comments, startMs, startTime, step_name);
+    } catch (error: any) {
+      return this.buildResult('FAIL', expected, this.classifyError(error), startMs, startTime, step_name);
+    }
+  }
+
+  // ─── isVisible ─────────────────────────────────────────────────────────────
+
+  async isVisible(label: string, locators: string[], step_name: string = 'Check if dropdown is visible'): Promise<StepResult> {
+    const startMs = Date.now();
+    const startTime = this.getStartTime();
+    const expected = `'${label}' visibility state retrieved successfully`;
+
+    try {
+      const resolved = await LocatorService.resolveElement(this.page, locators);
+      const visible = await resolved.element.isVisible();
+
+      const comments = this.appendMatchedLocatorInfo(
+        `'${label}' is ${visible ? 'visible' : 'not visible'}`,
+        resolved.matchedIndex,
+        resolved.matchedXPath
+      );
+      return this.buildResult('PASS', expected, comments, startMs, startTime, step_name);
+    } catch (error: any) {
+      return this.buildResult('FAIL', expected, this.classifyError(error), startMs, startTime, step_name);
+    }
+  }
+}