@dyyz1993/agent-browser 0.9.2 → 0.11.1

package/dist/browser.js

@@ -1,7 +1,7 @@
 import { chromium, firefox, webkit, devices, } from 'playwright-core';
 import path from 'node:path';
 import os from 'node:os';
-import { existsSync, mkdirSync, rmSync, readFileSync } from 'node:fs';
+import { existsSync, mkdirSync, rmSync, readFileSync, writeFileSync, statSync } from 'node:fs';
 import { fileURLToPath } from 'node:url';
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 import { getEnhancedSnapshot, parseRef } from './snapshot.js';
@@ -24,6 +24,13 @@ export class BrowserManager {
     activePageIndex = 0;
     dialogHandler = null;
     trackedRequests = [];
+    isRequestTrackingEnabled = false;
+    isResponseCaptureEnabled = false;
+    // Map to track requests for response matching (instance variable for cross-listener access)
+    pendingRequests = new Map();
+    // Store request listener references for proper cleanup
+    requestListener = null;
+    responseListener = null;
     routes = new Map();
     consoleMessages = [];
     pageErrors = [];
@@ -252,27 +259,104 @@ export class BrowserManager {
     }
     /**
      * Start tracking requests
+     * @param captureResponse - Whether to capture response body (default: false for backward compatibility)
      */
-    startRequestTracking() {
+    startRequestTracking(captureResponse = false) {
         const page = this.getPage();
-        page.on('request', (request) => {
-            this.trackedRequests.push({
+        // If already tracking with the same captureResponse setting, do nothing
+        if (this.isRequestTrackingEnabled && this.isResponseCaptureEnabled === captureResponse) {
+            return;
+        }
+        // Remove existing listeners if any
+        if (this.requestListener) {
+            page.off('request', this.requestListener);
+        }
+        if (this.responseListener) {
+            page.off('response', this.responseListener);
+        }
+        // Update flags
+        this.isRequestTrackingEnabled = true;
+        this.isResponseCaptureEnabled = captureResponse;
+        // Create request listener
+        this.requestListener = (request) => {
+            const trackedRequest = {
                 url: request.url(),
                 method: request.method(),
                 headers: request.headers(),
                 timestamp: Date.now(),
                 resourceType: request.resourceType(),
-            });
-        });
+            };
+            // Store the request
+            this.trackedRequests.push(trackedRequest);
+            // Store for response matching
+            const key = `${request.url()}:${trackedRequest.timestamp}`;
+            this.pendingRequests.set(key, trackedRequest);
+        };
+        page.on('request', this.requestListener);
+        // Listen for response event (more reliable than request.response())
+        if (captureResponse) {
+            this.responseListener = async (response) => {
+                const request = response.request();
+                const url = request.url();
+                // Find the matching tracked request
+                for (const [key, trackedRequest] of this.pendingRequests.entries()) {
+                    if (key.startsWith(url + ':')) {
+                        trackedRequest.status = response.status();
+                        trackedRequest.statusText = response.statusText();
+                        trackedRequest.responseHeaders = response.headers();
+                        trackedRequest.contentType = response.headers()['content-type'] || '';
+                        // Try to get response body
+                        try {
+                            const body = await response.text();
+                            // Try to parse as JSON if content-type indicates JSON
+                            if (trackedRequest.contentType.includes('application/json') ||
+                                trackedRequest.contentType.includes('text/json')) {
+                                try {
+                                    trackedRequest.responseBody = JSON.parse(body);
+                                }
+                                catch {
+                                    trackedRequest.responseBody = body;
+                                }
+                            }
+                            else {
+                                trackedRequest.responseBody = body;
+                            }
+                        }
+                        catch {
+                            // Response body not available (e.g., for binary data or failed requests)
+                            trackedRequest.responseBody = undefined;
+                        }
+                        // Remove from pending after processing
+                        this.pendingRequests.delete(key);
+                        break;
+                    }
+                }
+            };
+            page.on('response', this.responseListener);
+        }
+        else {
+            this.responseListener = null;
+        }
     }
     /**
      * Get tracked requests
+     * @param filter - URL pattern to filter
+     * @param type - Filter by response type (e.g., 'json')
      */
-    getRequests(filter) {
+    getRequests(filter, type) {
+        let requests = this.trackedRequests;
+        // Filter by URL pattern
         if (filter) {
-            return this.trackedRequests.filter((r) => r.url.includes(filter));
+            requests = requests.filter((r) => r.url.includes(filter));
         }
-        return this.trackedRequests;
+        // Filter by response type
+        if (type === 'json') {
+            requests = requests.filter((r) => {
+                const contentType = r.contentType || '';
+                return contentType.includes('application/json') || contentType.includes('text/json');
+            });
+        }
+        return requests;
     }
     /**
      * Clear tracked requests
@@ -280,6 +364,79 @@ export class BrowserManager {
     clearRequests() {
         this.trackedRequests = [];
     }
+    /**
+     * Save tracked requests to a directory
+     * @param outputDir - Directory path to save requests
+     * @param filter - URL pattern to filter
+     * @param type - Filter by response type (e.g., 'json')
+     * @returns Object with saved count and output path
+     */
+    saveRequestsToDir(outputDir, filter, type) {
+        // Get filtered requests
+        const requests = this.getRequests(filter, type);
+        // Resolve to absolute path
+        const absolutePath = path.resolve(outputDir);
+        // Check if path looks like a file (has extension and not already a directory)
+        const hasExtension = path.extname(absolutePath) !== '';
+        const isExistingDirectory = existsSync(absolutePath) && statSync(absolutePath).isDirectory();
+        // If path looks like a file and doesn't exist as directory, use parent directory
+        let targetPath = absolutePath;
+        let warningMessage;
+        if (hasExtension && !isExistingDirectory) {
+            // User specified a file path, use parent directory instead
+            targetPath = path.dirname(absolutePath);
+            warningMessage = `Warning: "${outputDir}" looks like a file path. Using directory: "${targetPath}"`;
+            console.warn(warningMessage);
+        }
+        // Create output directory if not exists
+        if (!existsSync(targetPath)) {
+            mkdirSync(targetPath, { recursive: true });
+        }
+        // Build index data
+        const indexData = {
+            capturedAt: new Date().toISOString(),
+            totalRequests: requests.length,
+            requests: [],
+        };
+        // Save each request to a separate file
+        requests.forEach((request, index) => {
+            const fileIndex = String(index + 1).padStart(3, '0');
+            // Generate filename from URL or use index
+            const urlObj = new URL(request.url);
+            const pathParts = urlObj.pathname.split('/').filter(Boolean);
+            const baseName = pathParts.length > 0 ? pathParts.join('_').substring(0, 50) : 'request';
+            const fileName = `${fileIndex}_${baseName}.json`;
+            const filePath = path.join(targetPath, fileName);
+            // Save individual request file
+            const requestData = {
+                url: request.url,
+                method: request.method,
+                status: request.status,
+                contentType: request.contentType,
+                timestamp: request.timestamp,
+                body: request.responseBody,
+            };
+            writeFileSync(filePath, JSON.stringify(requestData, null, 2), 'utf-8');
+            // Add to index
+            indexData.requests.push({
+                index: index + 1,
+                file: fileName,
+                url: request.url,
+                method: request.method,
+                status: request.status,
+                contentType: request.contentType,
+                timestamp: request.timestamp,
+            });
+        });
+        // Save index file
+        const indexPath = path.join(targetPath, 'index.json');
+        writeFileSync(indexPath, JSON.stringify(indexData, null, 2), 'utf-8');
+        return {
+            savedCount: requests.length,
+            outputPath: targetPath,
+            indexPath,
+        };
+    }
     /**
      * Add a route to intercept requests
      */
@@ -986,16 +1143,15 @@ export class BrowserManager {
             ? ['--allow-file-access-from-files', '--allow-file-access']
             : [];
         // Add anti-detection args
+        const isHeaded = hasExtensions || options.headless === false;
         const antiDetectionArgs = [
             '--disable-blink-features=AutomationControlled',
             '--disable-dev-shm-usage',
             '--no-sandbox',
-            '--disable-gpu',
-            '--disable-software-rasterizer',
+            ...(isHeaded ? [] : ['--disable-gpu']),
             '--enable-features=WebGL',
             '--ignore-gpu-blacklist',
-            '--use-gl=desktop',
-            '--enable-gpu-compositing',
+            ...(isHeaded ? ['--use-gl=desktop', '--enable-gpu-compositing'] : []),
         ];
         const baseArgs = options.args
             ? [...fileAccessArgs, ...antiDetectionArgs, ...options.args]
@@ -1565,6 +1721,162 @@ export class BrowserManager {
         const cdp = await this.getCDPSession();
         await cdp.send('Input.insertText', { text });
     }
+    _lastFillSelector = '';
+    _lastFillValue = '';
+    _fillFocusedSelector = '';
+    async fillValue(selector, value) {
+        const page = this.getPage();
+        if (!page)
+            return;
+        if (!selector || value === undefined)
+            return;
+        if (value === this._lastFillValue && selector === this._lastFillSelector)
+            return;
+        this._lastFillSelector = selector;
+        this._lastFillValue = value;
+        const needsFocus = !this._fillFocusedSelector || this._fillFocusedSelector !== selector;
+        await page.evaluate(({ selector, value, needsFocus }) => {
+            const el = document.querySelector(selector);
+            if (!el)
+                return { ok: false, reason: 'not_found' };
+            const isContentEditable = el instanceof HTMLElement &&
+                (el.isContentEditable || el.getAttribute('contenteditable') === 'true');
+            if (needsFocus && !isContentEditable) {
+                el.focus();
+            }
+            if (isContentEditable) {
+                if (needsFocus)
+                    el.focus();
+                document.execCommand('selectAll', false, undefined);
+                document.execCommand('insertText', false, value);
+                return { ok: true, method: 'contenteditable' };
+            }
+            const tag = el.tagName.toLowerCase();
+            const isInput = tag === 'input';
+            const isTextarea = tag === 'textarea';
+            if (!isInput && !isTextarea) {
+                return { ok: false, reason: 'not_input' };
+            }
+            const proto = isInput
+                ? window.HTMLInputElement.prototype
+                : window.HTMLTextAreaElement.prototype;
+            const nativeInputValueSetter = Object.getOwnPropertyDescriptor(proto, 'value')?.set;
+            if (nativeInputValueSetter) {
+                nativeInputValueSetter.call(el, value);
+            }
+            else {
+                el.value = value;
+            }
+            el.dispatchEvent(new InputEvent('input', {
+                bubbles: true,
+                cancelable: true,
+                inputType: 'insertReplacementText',
+                data: value,
+            }));
+            return { ok: true, method: 'native_setter' };
+        }, { selector, value, needsFocus });
+        if (needsFocus) {
+            this._fillFocusedSelector = selector;
+        }
+    }
+    clearFillState(selector) {
+        if (selector && this._fillFocusedSelector === selector) {
+            this._fillFocusedSelector = '';
+        }
+        if (!selector) {
+            this._fillFocusedSelector = '';
+            this._lastFillSelector = '';
+            this._lastFillValue = '';
+        }
+    }
+    async blurElement(selector) {
+        const page = this.getPage();
+        if (!page)
+            return;
+        await page.evaluate((sel) => {
+            const el = document.querySelector(sel);
+            if (el)
+                el.blur();
+        }, selector);
+    }
+    /**
+     * Press a key on the page via Playwright.
+     */
+    async pressKey(key) {
+        const page = this.getPage();
+        if (!page)
+            return;
+        await page.keyboard.press(key);
+    }
+    /**
+     * Inject focus/input/blur event listeners into the remote page.
+     * Uses Playwright exposeFunction + addInitScript so the
+     * injected script can call back to Node.js when input elements are focused.
+     */
+    async injectFocusListener(onEvent) {
+        const page = this.getPage();
+        if (!page)
+            return;
+        try {
+            await page.exposeFunction('__agentBrowserInputEvent', (data) => {
+                onEvent(data);
+            });
+        }
+        catch {
+            // Already registered from previous injection - safe to continue
+        }
+        const injectScript = `
+      (function() {
+        if (window.__agentBrowserListenerInjected) return;
+        window.__agentBrowserListenerInjected = true;
+
+        document.addEventListener('focus', function(e) {
+          var el = e.target;
+          if (!el) return;
+          var tag = el.tagName;
+          if (tag !== 'INPUT' && tag !== 'TEXTAREA' && !el.isContentEditable) return;
+          try {
+            window.__agentBrowserInputEvent({
+              type: 'input_focused',
+              tag: tag,
+              inputType: el.type || '',
+              value: typeof el.value === 'string' ? el.value : '',
+              placeholder: el.placeholder || '',
+              id: el.id || '',
+              selector: (function() {
+                if (el.id) return '#' + el.id;
+                if (el.name && el.name) return '[name="' + el.name + '"]';
+                return el.tagName.toLowerCase();
+              })()
+            });
+          } catch(ex) {}
+        }, true);
+
+        document.addEventListener('input', function(e) {
+          var el = e.target;
+          if (!el) return;
+          var tag = el.tagName;
+          if (tag !== 'INPUT' && tag !== 'TEXTAREA' && !el.isContentEditable) return;
+          try {
+            window.__agentBrowserInputEvent({
+              type: 'input_value',
+              text: typeof el.value === 'string' ? el.value : ''
+            });
+          } catch(ex) {}
+        }, true);
+
+        document.addEventListener('blur', function() {
+          try {
+            window.__agentBrowserInputEvent({ type: 'input_blur' });
+          } catch(ex) {}
+        }, true);
+      })();
+    `;
+        // Inject into future navigations
+        await page.addInitScript(injectScript);
+        // Also inject into current page (already loaded)
+        await page.evaluate(injectScript);
+    }
     /**
      * Check if video recording is currently active
      */
@@ -2510,6 +2822,24 @@ export class BrowserManager {
                 this.recorderPageHandler = null;
             }
         }
+        // Clean up network tracking state and listeners
+        if (page) {
+            if (this.requestListener) {
+                page.off('request', this.requestListener);
+                this.requestListener = null;
+            }
+            if (this.responseListener) {
+                page.off('response', this.responseListener);
+                this.responseListener = null;
+            }
+        }
+        this.trackedRequests = [];
+        this.pendingRequests.clear();
+        this.isRequestTrackingEnabled = false;
+        this.isResponseCaptureEnabled = false;
+        this.routes.clear();
+        this.consoleMessages = [];
+        this.pageErrors = [];
         // Clean up navigation state
         this.navigationHistory = [];
         this.navigationHistoryIndex = -1;