linkedin-automation-cli 1.0.0

package/src/agent/dom-extractor.ts

@@ -0,0 +1,437 @@
+/**
+ * DOM Extractor Module
+ *
+ * Extracts semantic DOM representation from LinkedIn pages using Playwright.
+ * Provides structured data extraction for AI agent action planning.
+ */
+
+import type { Page } from 'playwright';
+import type {
+  DOMElement,
+  DOMRepresentation,
+  PageMetadata,
+  PageType,
+  ConnectionState,
+} from './types';
+
+/**
+ * Extracts DOM representation from a Playwright page
+ */
+export class DOMExtractor {
+  /**
+   * Extract complete DOM representation from the page
+   */
+  async extract(page: Page): Promise<DOMRepresentation> {
+    const url = page.url();
+    const title = await page.title();
+
+    // Extract elements and metadata in parallel
+    const [elements, metadata] = await Promise.all([
+      this.extractElements(page),
+      this.extractMetadata(page),
+    ]);
+
+    return {
+      url,
+      title,
+      elements,
+      metadata,
+    };
+  }
+
+  /**
+   * Extract interactive elements from the page
+   */
+  private async extractElements(page: Page): Promise<DOMElement[]> {
+    return page.evaluate(() => {
+      const elements: DOMElement[] = [];
+      const seenElements = new Set<Element>();
+
+      // Define selectors for interactive elements
+      const selectors = [
+        'button',
+        'a[href]',
+        'input',
+        'textarea',
+        'select',
+        '[role="button"]',
+        '[role="link"]',
+        '[role="textbox"]',
+        '[role="checkbox"]',
+        '[role="radio"]',
+        '[role="combobox"]',
+        '[role="menuitem"]',
+        '[role="tab"]',
+        '[contenteditable="true"]',
+      ];
+
+      // Find all matching elements
+      const candidates = document.querySelectorAll(selectors.join(', '));
+
+      candidates.forEach((element, index) => {
+        // Skip duplicates
+        if (seenElements.has(element)) return;
+        seenElements.add(element);
+
+        // Check visibility
+        if (!isElementVisible(element)) return;
+
+        const extracted = extractElementData(element, index);
+        if (extracted) {
+          elements.push(extracted);
+        }
+      });
+
+      return elements;
+
+      /**
+       * Check if element is visible
+       */
+      function isElementVisible(element: Element): boolean {
+        const style = window.getComputedStyle(element);
+        if (style.display === 'none' || style.visibility === 'hidden' || style.opacity === '0') {
+          return false;
+        }
+
+        // Check if element has dimensions
+        const rect = element.getBoundingClientRect();
+        if (rect.width === 0 || rect.height === 0) {
+          return false;
+        }
+
+        return true;
+      }
+
+      /**
+       * Extract data from a single element
+       */
+      function extractElementData(element: Element, index: number): DOMElement | null {
+        const rect = element.getBoundingClientRect();
+        const htmlElement = element as HTMLElement;
+
+        // Get basic properties
+        const tag = element.tagName.toLowerCase();
+        const text = getElementText(element);
+        const ariaLabel = element.getAttribute('aria-label') || undefined;
+        const role = element.getAttribute('role') || undefined;
+
+        // Get input-specific properties
+        let type: string | undefined;
+        let value: string | undefined;
+
+        // eslint-disable-next-line no-undef
+        if (element instanceof HTMLInputElement) {
+          type = (element as unknown as { type: string }).type;
+          value = (element as unknown as { value: string }).value || undefined;
+          // eslint-disable-next-line no-undef
+        } else if (element instanceof HTMLSelectElement) {
+          value = (element as unknown as { value: string }).value || undefined;
+          // eslint-disable-next-line no-undef
+        } else if (element instanceof HTMLTextAreaElement) {
+          type = 'textarea';
+          value = (element as unknown as { value: string }).value || undefined;
+        }
+
+        // Check if enabled
+        const enabled = !(
+          'disabled' in htmlElement &&
+          (htmlElement as unknown as { disabled?: boolean }).disabled === true
+        );
+
+        // Generate ID
+        const id = generateElementId(tag, text || ariaLabel || '', index);
+
+        return {
+          id,
+          tag,
+          role,
+          ariaLabel,
+          text: truncateText(text, 200),
+          type,
+          value,
+          visible: true,
+          enabled,
+          bbox: {
+            x: Math.round(rect.x),
+            y: Math.round(rect.y),
+            width: Math.round(rect.width),
+            height: Math.round(rect.height),
+          },
+        };
+      }
+
+      /**
+       * Get visible text content of an element
+       */
+      function getElementText(element: Element): string {
+        // For inputs, use placeholder or value
+        // eslint-disable-next-line no-undef
+        if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement) {
+          return (
+            (element as unknown as { placeholder?: string }).placeholder ||
+            (element as unknown as { value?: string }).value ||
+            ''
+          );
+        }
+
+        // For links, get text content
+        const text = element.textContent?.trim() || '';
+
+        // For buttons, get aria-label if no text
+        if (!text && element.getAttribute('aria-label')) {
+          return element.getAttribute('aria-label')!;
+        }
+
+        return text;
+      }
+
+      /**
+       * Truncate text to max length
+       */
+      function truncateText(text: string, maxLength: number): string {
+        if (!text) return '';
+        if (text.length <= maxLength) return text;
+        return text.substring(0, maxLength) + '...';
+      }
+
+      /**
+       * Generate unique element ID
+       * Format: elem-{tag}-{label}-{index}
+       */
+      function generateElementId(tag: string, label: string, index: number): string {
+        const cleanLabel = label
+          .toLowerCase()
+          .replace(/[^a-z0-9]+/g, '-')
+          .replace(/^-+|-+$/g, '')
+          .substring(0, 30);
+
+        if (cleanLabel) {
+          return `elem-${tag}-${cleanLabel}-${index}`;
+        }
+        return `elem-${tag}-${index}`;
+      }
+    });
+  }
+
+  /**
+   * Extract metadata from the page
+   */
+  private async extractMetadata(page: Page): Promise<PageMetadata> {
+    return page.evaluate(() => {
+      const url = window.location.href;
+      const pageType = detectPageType(url);
+      const profileName = extractProfileName();
+      const profileTitle = extractProfileTitle();
+      const connectionState = detectConnectionState();
+      const statusMessages = extractStatusMessages();
+
+      return {
+        pageType,
+        profileName,
+        profileTitle,
+        connectionState,
+        statusMessages,
+      };
+
+      /**
+       * Detect the type of LinkedIn page
+       */
+      function detectPageType(url: string): PageType {
+        if (url.includes('/in/')) return 'profile';
+        if (url.includes('/messaging')) return 'messaging';
+        if (url.includes('/feed')) return 'feed';
+        if (url.includes('/search')) return 'search';
+        if (url.includes('/notifications')) return 'notifications';
+        return 'unknown';
+      }
+
+      /**
+       * Extract profile name from page
+       */
+      function extractProfileName(): string | undefined {
+        // Try h1 first
+        const h1 = document.querySelector('h1');
+        if (h1) {
+          const text = h1.textContent?.trim();
+          if (text) return text;
+        }
+
+        // Try data-testid attributes common in LinkedIn
+        const selectors = [
+          '[data-testid="profile-name"]',
+          '[data-testid="top-card-profile-name"]',
+          '.profile-name',
+          '.top-card-layout__title',
+          'h1.text-heading-xlarge',
+        ];
+
+        for (const selector of selectors) {
+          const element = document.querySelector(selector);
+          if (element) {
+            const text = element.textContent?.trim();
+            if (text) return text;
+          }
+        }
+
+        return undefined;
+      }
+
+      /**
+       * Extract profile title/headline
+       */
+      function extractProfileTitle(): string | undefined {
+        const selectors = [
+          '[data-testid="profile-headline"]',
+          '[data-testid="top-card-profile-headline"]',
+          '.profile-headline',
+          '.top-card-layout__headline',
+          '.text-body-medium',
+        ];
+
+        for (const selector of selectors) {
+          const element = document.querySelector(selector);
+          if (element) {
+            const text = element.textContent?.trim();
+            if (text) return text;
+          }
+        }
+
+        return undefined;
+      }
+
+      /**
+       * Detect connection state from page
+       */
+      function detectConnectionState(): ConnectionState {
+        // Look for connection indicators
+        const pageText = document.body.innerText.toLowerCase();
+
+        // Check for "Connect" button text
+        const hasConnectButton = document.querySelector(
+          'button[aria-label*="connect" i], button:contains("Connect")'
+        );
+
+        // Check for pending status
+        const hasPendingText = pageText.includes('pending') || pageText.includes('invitation sent');
+
+        // Check for "Message" button (indicates connected)
+        const hasMessageButton = document.querySelector(
+          'button[aria-label*="message" i], button[data-control-name="message"], a[href*="messaging"]:not([href*="invite"])'
+        );
+
+        // Check for "Connected" text or similar indicators
+        const hasConnectedText =
+          pageText.includes('connected') ||
+          pageText.includes('1st') ||
+          pageText.includes('1st degree');
+
+        if (hasConnectedText || hasMessageButton) {
+          return 'connected';
+        }
+
+        if (hasPendingText) {
+          return 'pending';
+        }
+
+        if (hasConnectButton) {
+          return 'not_connected';
+        }
+
+        return 'unknown';
+      }
+
+      /**
+       * Extract status messages/notifications visible on page
+       */
+      function extractStatusMessages(): string[] {
+        const messages: string[] = [];
+
+        // Look for common status message containers
+        const selectors = [
+          '[data-testid="status-message"]',
+          '.artdeco-toast-item',
+          '.alert',
+          '.notification-badge',
+          '[role="alert"]',
+          '[role="status"]',
+          '.feed-shared-update-v2__description',
+          '.artdeco-inline-feedback',
+        ];
+
+        for (const selector of selectors) {
+          const elements = document.querySelectorAll(selector);
+          elements.forEach((el) => {
+            const text = el.textContent?.trim();
+            if (text && text.length > 0 && text.length < 500) {
+              messages.push(text);
+            }
+          });
+        }
+
+        // Deduplicate
+        return [...new Set(messages)];
+      }
+    });
+  }
+
+  /**
+   * Find element by ID in the extracted DOM representation
+   */
+  findElementById(dom: DOMRepresentation, elementId: string): DOMElement | undefined {
+    return dom.elements.find((el) => el.id === elementId);
+  }
+
+  /**
+   * Find elements by tag name
+   */
+  findElementsByTag(dom: DOMRepresentation, tag: string): DOMElement[] {
+    return dom.elements.filter((el) => el.tag === tag.toLowerCase());
+  }
+
+  /**
+   * Find elements by text content (partial match)
+   */
+  findElementsByText(dom: DOMRepresentation, text: string): DOMElement[] {
+    const searchText = text.toLowerCase();
+    return dom.elements.filter(
+      (el) =>
+        el.text.toLowerCase().includes(searchText) ||
+        (el.ariaLabel && el.ariaLabel.toLowerCase().includes(searchText))
+    );
+  }
+
+  /**
+   * Get clickable elements (buttons and links)
+   */
+  getClickableElements(dom: DOMRepresentation): DOMElement[] {
+    return dom.elements.filter(
+      (el) =>
+        (el.tag === 'button' || el.tag === 'a' || el.role === 'button' || el.role === 'link') &&
+        el.visible &&
+        el.enabled
+    );
+  }
+
+  /**
+   * Get input elements (inputs, textareas, selects)
+   */
+  getInputElements(dom: DOMRepresentation): DOMElement[] {
+    return dom.elements.filter(
+      (el) =>
+        (el.tag === 'input' ||
+          el.tag === 'textarea' ||
+          el.tag === 'select' ||
+          el.role === 'textbox' ||
+          el.role === 'combobox') &&
+        el.visible &&
+        el.enabled
+    );
+  }
+}
+
+/**
+ * Create a new DOMExtractor instance
+ */
+export function createDOMExtractor(): DOMExtractor {
+  return new DOMExtractor();
+}