linkedin-automation-cli 1.0.0

package/src/agent/dom-extractor.test.ts

@@ -0,0 +1,574 @@
+/**
+ * DOM Extractor Tests
+ *
+ * Tests for the DOMExtractor class using mocked Playwright page.
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { DOMExtractor, createDOMExtractor } from './dom-extractor';
+import type { Page } from 'playwright';
+
+// Mock Page type for testing
+type MockPage = {
+  url: ReturnType<typeof vi.fn>;
+  title: ReturnType<typeof vi.fn>;
+  evaluate: ReturnType<typeof vi.fn>;
+};
+
+describe('DOMExtractor', () => {
+  let extractor: DOMExtractor;
+  let mockPage: MockPage;
+
+  beforeEach(() => {
+    extractor = new DOMExtractor();
+    mockPage = {
+      url: vi.fn(),
+      title: vi.fn(),
+      evaluate: vi.fn(),
+    };
+  });
+
+  describe('extract', () => {
+    it('should return correct DOM representation structure', async () => {
+      mockPage.url.mockReturnValue('https://www.linkedin.com/in/test-profile/');
+      mockPage.title.mockResolvedValue('Test Profile | LinkedIn');
+      mockPage.evaluate.mockImplementation((fn: unknown) => {
+        if ((fn as { toString(): string }).toString().includes('pageType')) {
+          return Promise.resolve({
+            pageType: 'profile',
+            profileName: 'John Doe',
+            profileTitle: 'Software Engineer',
+            connectionState: 'connected',
+            statusMessages: [],
+          });
+        }
+        return Promise.resolve([]);
+      });
+
+      const result = await extractor.extract(mockPage as unknown as Page);
+
+      expect(result).toHaveProperty('url');
+      expect(result).toHaveProperty('title');
+      expect(result).toHaveProperty('elements');
+      expect(result).toHaveProperty('metadata');
+      expect(result.url).toBe('https://www.linkedin.com/in/test-profile/');
+      expect(result.title).toBe('Test Profile | LinkedIn');
+      expect(Array.isArray(result.elements)).toBe(true);
+    });
+
+    it('should extract elements from the page', async () => {
+      mockPage.url.mockReturnValue('https://www.linkedin.com/in/test/');
+      mockPage.title.mockResolvedValue('Test | LinkedIn');
+
+      const mockElements = [
+        {
+          id: 'elem-button-connect-0',
+          tag: 'button',
+          role: 'button',
+          ariaLabel: 'Connect',
+          text: 'Connect',
+          type: undefined,
+          value: undefined,
+          visible: true,
+          enabled: true,
+          bbox: { x: 100, y: 200, width: 120, height: 40 },
+        },
+        {
+          id: 'elem-a-message-1',
+          tag: 'a',
+          role: 'link',
+          ariaLabel: 'Message',
+          text: 'Message',
+          type: undefined,
+          value: undefined,
+          visible: true,
+          enabled: true,
+          bbox: { x: 240, y: 200, width: 100, height: 40 },
+        },
+      ];
+
+      const mockMetadata = {
+        pageType: 'profile',
+        profileName: 'Jane Doe',
+        profileTitle: 'Product Manager',
+        connectionState: 'connected',
+        statusMessages: [],
+      };
+
+      mockPage.evaluate.mockImplementation((fn: unknown) => {
+        const fnStr = (fn as { toString(): string }).toString();
+        if (fnStr.includes('pageType') || fnStr.includes('detectPageType')) {
+          return Promise.resolve(mockMetadata);
+        }
+        return Promise.resolve(mockElements);
+      });
+
+      const result = await extractor.extract(mockPage as unknown as Page);
+
+      expect(result.elements).toHaveLength(2);
+      expect(result.elements[0].id).toBe('elem-button-connect-0');
+      expect(result.elements[1].id).toBe('elem-a-message-1');
+    });
+
+    it('should extract metadata correctly', async () => {
+      mockPage.url.mockReturnValue('https://www.linkedin.com/in/john-doe/');
+      mockPage.title.mockResolvedValue('John Doe | LinkedIn');
+
+      const mockMetadata = {
+        pageType: 'profile',
+        profileName: 'John Doe',
+        profileTitle: 'Senior Engineer',
+        connectionState: 'not_connected',
+        statusMessages: ['Profile view limit reached'],
+      };
+
+      mockPage.evaluate.mockImplementation((fn: unknown) => {
+        const fnStr = (fn as { toString(): string }).toString();
+        if (fnStr.includes('pageType') || fnStr.includes('detectPageType')) {
+          return Promise.resolve(mockMetadata);
+        }
+        return Promise.resolve([]);
+      });
+
+      const result = await extractor.extract(mockPage as unknown as Page);
+
+      expect(result.metadata.pageType).toBe('profile');
+      expect(result.metadata.profileName).toBe('John Doe');
+      expect(result.metadata.profileTitle).toBe('Senior Engineer');
+      expect(result.metadata.connectionState).toBe('not_connected');
+      expect(result.metadata.statusMessages).toContain('Profile view limit reached');
+    });
+
+    it('should handle messaging page type', async () => {
+      mockPage.url.mockReturnValue('https://www.linkedin.com/messaging/');
+      mockPage.title.mockResolvedValue('Messaging | LinkedIn');
+
+      const mockMetadata = {
+        pageType: 'messaging',
+        connectionState: 'unknown',
+        statusMessages: [],
+      };
+
+      mockPage.evaluate.mockImplementation((fn: unknown) => {
+        const fnStr = (fn as { toString(): string }).toString();
+        if (fnStr.includes('pageType') || fnStr.includes('detectPageType')) {
+          return Promise.resolve(mockMetadata);
+        }
+        return Promise.resolve([]);
+      });
+
+      const result = await extractor.extract(mockPage as unknown as Page);
+
+      expect(result.metadata.pageType).toBe('messaging');
+    });
+
+    it('should handle feed page type', async () => {
+      mockPage.url.mockReturnValue('https://www.linkedin.com/feed/');
+      mockPage.title.mockResolvedValue('Feed | LinkedIn');
+
+      const mockMetadata = {
+        pageType: 'feed',
+        connectionState: 'unknown',
+        statusMessages: ['New posts available'],
+      };
+
+      mockPage.evaluate.mockImplementation((fn: unknown) => {
+        const fnStr = (fn as { toString(): string }).toString();
+        if (fnStr.includes('pageType') || fnStr.includes('detectPageType')) {
+          return Promise.resolve(mockMetadata);
+        }
+        return Promise.resolve([]);
+      });
+
+      const result = await extractor.extract(mockPage as unknown as Page);
+
+      expect(result.metadata.pageType).toBe('feed');
+    });
+  });
+
+  describe('element ID generation', () => {
+    it('should generate unique IDs for elements', async () => {
+      mockPage.url.mockReturnValue('https://www.linkedin.com/in/test/');
+      mockPage.title.mockResolvedValue('Test | LinkedIn');
+
+      const mockElements = [
+        {
+          id: 'elem-button-submit-0',
+          tag: 'button',
+          text: 'Submit',
+          visible: true,
+          enabled: true,
+          bbox: { x: 0, y: 0, width: 100, height: 50 },
+        },
+        {
+          id: 'elem-button-cancel-1',
+          tag: 'button',
+          text: 'Cancel',
+          visible: true,
+          enabled: true,
+          bbox: { x: 110, y: 0, width: 100, height: 50 },
+        },
+      ];
+
+      mockPage.evaluate.mockImplementation((fn: unknown) => {
+        const fnStr = (fn as { toString(): string }).toString();
+        if (fnStr.includes('pageType') || fnStr.includes('detectPageType')) {
+          return Promise.resolve({ pageType: 'profile', connectionState: 'unknown' });
+        }
+        return Promise.resolve(mockElements);
+      });
+
+      const result = await extractor.extract(mockPage as unknown as Page);
+
+      expect(result.elements[0].id).toBe('elem-button-submit-0');
+      expect(result.elements[1].id).toBe('elem-button-cancel-1');
+    });
+
+    it('should format IDs with lowercase and dashes', async () => {
+      mockPage.url.mockReturnValue('https://www.linkedin.com/in/test/');
+      mockPage.title.mockResolvedValue('Test | LinkedIn');
+
+      const mockElements = [
+        {
+          id: 'elem-button-hello-world-0',
+          tag: 'button',
+          text: 'Hello World!',
+          visible: true,
+          enabled: true,
+          bbox: { x: 0, y: 0, width: 100, height: 50 },
+        },
+      ];
+
+      mockPage.evaluate.mockImplementation((fn: unknown) => {
+        const fnStr = (fn as { toString(): string }).toString();
+        if (fnStr.includes('pageType') || fnStr.includes('detectPageType')) {
+          return Promise.resolve({ pageType: 'profile', connectionState: 'unknown' });
+        }
+        return Promise.resolve(mockElements);
+      });
+
+      const result = await extractor.extract(mockPage as unknown as Page);
+
+      expect(result.elements[0].id).toContain('elem-button');
+    });
+  });
+
+  describe('findElementById', () => {
+    it('should find element by ID', () => {
+      const dom = {
+        url: 'https://test.com',
+        title: 'Test',
+        elements: [
+          {
+            id: 'elem-1',
+            tag: 'button',
+            text: 'Click',
+            visible: true,
+            enabled: true,
+            bbox: { x: 0, y: 0, width: 1, height: 1 },
+          },
+          {
+            id: 'elem-2',
+            tag: 'a',
+            text: 'Link',
+            visible: true,
+            enabled: true,
+            bbox: { x: 0, y: 0, width: 1, height: 1 },
+          },
+        ],
+        metadata: { pageType: 'profile' as const },
+      };
+
+      const found = extractor.findElementById(dom, 'elem-1');
+
+      expect(found).toBeDefined();
+      expect(found?.id).toBe('elem-1');
+    });
+
+    it('should return undefined for non-existent ID', () => {
+      const dom = {
+        url: 'https://test.com',
+        title: 'Test',
+        elements: [],
+        metadata: { pageType: 'profile' as const },
+      };
+
+      const found = extractor.findElementById(dom, 'non-existent');
+
+      expect(found).toBeUndefined();
+    });
+  });
+
+  describe('findElementsByTag', () => {
+    it('should find elements by tag', () => {
+      const dom = {
+        url: 'https://test.com',
+        title: 'Test',
+        elements: [
+          {
+            id: '1',
+            tag: 'button',
+            text: 'Btn1',
+            visible: true,
+            enabled: true,
+            bbox: { x: 0, y: 0, width: 1, height: 1 },
+          },
+          {
+            id: '2',
+            tag: 'button',
+            text: 'Btn2',
+            visible: true,
+            enabled: true,
+            bbox: { x: 0, y: 0, width: 1, height: 1 },
+          },
+          {
+            id: '3',
+            tag: 'a',
+            text: 'Link',
+            visible: true,
+            enabled: true,
+            bbox: { x: 0, y: 0, width: 1, height: 1 },
+          },
+        ],
+        metadata: { pageType: 'profile' as const },
+      };
+
+      const buttons = extractor.findElementsByTag(dom, 'button');
+
+      expect(buttons).toHaveLength(2);
+      expect(buttons.every((el) => el.tag === 'button')).toBe(true);
+    });
+
+    it('should be case insensitive', () => {
+      const dom = {
+        url: 'https://test.com',
+        title: 'Test',
+        elements: [
+          {
+            id: '1',
+            tag: 'button',
+            text: 'Btn1',
+            visible: true,
+            enabled: true,
+            bbox: { x: 0, y: 0, width: 1, height: 1 },
+          },
+        ],
+        metadata: { pageType: 'profile' as const },
+      };
+
+      const found = extractor.findElementsByTag(dom, 'BUTTON');
+
+      expect(found).toHaveLength(1);
+    });
+  });
+
+  describe('findElementsByText', () => {
+    it('should find elements by text content', () => {
+      const dom = {
+        url: 'https://test.com',
+        title: 'Test',
+        elements: [
+          {
+            id: '1',
+            tag: 'button',
+            text: 'Connect',
+            visible: true,
+            enabled: true,
+            bbox: { x: 0, y: 0, width: 1, height: 1 },
+          },
+          {
+            id: '2',
+            tag: 'button',
+            text: 'Message',
+            visible: true,
+            enabled: true,
+            bbox: { x: 0, y: 0, width: 1, height: 1 },
+          },
+          {
+            id: '3',
+            tag: 'button',
+            text: 'Reconnect',
+            visible: true,
+            enabled: true,
+            bbox: { x: 0, y: 0, width: 1, height: 1 },
+          },
+        ],
+        metadata: { pageType: 'profile' as const },
+      };
+
+      const found = extractor.findElementsByText(dom, 'conn');
+
+      expect(found).toHaveLength(2); // Connect and Reconnect
+    });
+
+    it('should be case insensitive', () => {
+      const dom = {
+        url: 'https://test.com',
+        title: 'Test',
+        elements: [
+          {
+            id: '1',
+            tag: 'button',
+            text: 'CONNECT',
+            visible: true,
+            enabled: true,
+            bbox: { x: 0, y: 0, width: 1, height: 1 },
+          },
+        ],
+        metadata: { pageType: 'profile' as const },
+      };
+
+      const found = extractor.findElementsByText(dom, 'connect');
+
+      expect(found).toHaveLength(1);
+    });
+
+    it('should search ariaLabel when text is empty', () => {
+      const dom = {
+        url: 'https://test.com',
+        title: 'Test',
+        elements: [
+          {
+            id: '1',
+            tag: 'button',
+            text: '',
+            ariaLabel: 'Send message',
+            visible: true,
+            enabled: true,
+            bbox: { x: 0, y: 0, width: 1, height: 1 },
+          },
+        ],
+        metadata: { pageType: 'profile' as const },
+      };
+
+      const found = extractor.findElementsByText(dom, 'message');
+
+      expect(found).toHaveLength(1);
+    });
+  });
+
+  describe('getClickableElements', () => {
+    it('should return buttons and links that are visible and enabled', () => {
+      const dom = {
+        url: 'https://test.com',
+        title: 'Test',
+        elements: [
+          {
+            id: '1',
+            tag: 'button',
+            text: 'Btn',
+            visible: true,
+            enabled: true,
+            bbox: { x: 0, y: 0, width: 1, height: 1 },
+          },
+          {
+            id: '2',
+            tag: 'a',
+            text: 'Link',
+            visible: true,
+            enabled: true,
+            bbox: { x: 0, y: 0, width: 1, height: 1 },
+          },
+          {
+            id: '3',
+            tag: 'div',
+            role: 'button',
+            text: 'DivBtn',
+            visible: true,
+            enabled: true,
+            bbox: { x: 0, y: 0, width: 1, height: 1 },
+          },
+          {
+            id: '4',
+            tag: 'button',
+            text: 'Hidden',
+            visible: false,
+            enabled: true,
+            bbox: { x: 0, y: 0, width: 1, height: 1 },
+          },
+          {
+            id: '5',
+            tag: 'button',
+            text: 'Disabled',
+            visible: true,
+            enabled: false,
+            bbox: { x: 0, y: 0, width: 1, height: 1 },
+          },
+        ],
+        metadata: { pageType: 'profile' as const },
+      };
+
+      const clickable = extractor.getClickableElements(dom);
+
+      expect(clickable).toHaveLength(3);
+      expect(clickable.some((el) => el.id === '1')).toBe(true);
+      expect(clickable.some((el) => el.id === '2')).toBe(true);
+      expect(clickable.some((el) => el.id === '3')).toBe(true);
+    });
+  });
+
+  describe('getInputElements', () => {
+    it('should return input, textarea, and select elements', () => {
+      const dom = {
+        url: 'https://test.com',
+        title: 'Test',
+        elements: [
+          {
+            id: '1',
+            tag: 'input',
+            type: 'text',
+            text: '',
+            visible: true,
+            enabled: true,
+            bbox: { x: 0, y: 0, width: 1, height: 1 },
+          },
+          {
+            id: '2',
+            tag: 'textarea',
+            text: '',
+            visible: true,
+            enabled: true,
+            bbox: { x: 0, y: 0, width: 1, height: 1 },
+          },
+          {
+            id: '3',
+            tag: 'select',
+            text: '',
+            visible: true,
+            enabled: true,
+            bbox: { x: 0, y: 0, width: 1, height: 1 },
+          },
+          {
+            id: '4',
+            tag: 'div',
+            role: 'textbox',
+            text: '',
+            visible: true,
+            enabled: true,
+            bbox: { x: 0, y: 0, width: 1, height: 1 },
+          },
+          {
+            id: '5',
+            tag: 'button',
+            text: 'Btn',
+            visible: true,
+            enabled: true,
+            bbox: { x: 0, y: 0, width: 1, height: 1 },
+          },
+        ],
+        metadata: { pageType: 'profile' as const },
+      };
+
+      const inputs = extractor.getInputElements(dom);
+
+      expect(inputs).toHaveLength(4);
+    });
+  });
+
+  describe('createDOMExtractor', () => {
+    it('should create a DOMExtractor instance', () => {
+      const extractor = createDOMExtractor();
+      expect(extractor).toBeInstanceOf(DOMExtractor);
+    });
+  });
+});