cbrowser 10.7.1 → 10.9.1

package/dist/browser.js

@@ -779,6 +779,11 @@ export class CBrowser {
     // =========================================================================
     /**
      * Navigate to a URL.
+     *
+     * v10.10.0: Uses progressive loading strategy to avoid hangs on SPAs:
+     * 1. Try networkidle with short timeout (10s)
+     * 2. Fall back to domcontentloaded + stability check
+     * 3. Always succeeds if page loads at all
      */
     async navigate(url) {
         // Skip session restore since we're explicitly navigating to a new URL
@@ -797,10 +802,36 @@ export class CBrowser {
                 warnings.push(msg.text());
             }
         });
-        await page.goto(url, {
-            waitUntil: "networkidle",
-            timeout: this.config.timeout,
-        });
+        // Progressive loading strategy (v10.10.0)
+        // Many SPAs (GitHub, NYT, etc.) never reach networkidle
+        const networkIdleTimeout = Math.min(10000, this.config.timeout || 30000);
+        try {
+            // Try networkidle first with short timeout
+            await page.goto(url, {
+                waitUntil: "networkidle",
+                timeout: networkIdleTimeout,
+            });
+        }
+        catch (e) {
+            const error = e;
+            if (error.message?.includes("Timeout") || error.message?.includes("timeout")) {
+                // Fallback: Use domcontentloaded + manual stability check
+                if (this.config.verbose) {
+                    console.log(`⚠️ networkidle timeout, falling back to domcontentloaded...`);
+                }
+                // v10.10.0: Fallback to domcontentloaded (rethrows on failure)
+                await page.goto(url, {
+                    waitUntil: "domcontentloaded",
+                    timeout: this.config.timeout || 30000,
+                });
+                // Wait for page to stabilize (no major DOM changes for 500ms)
+                await this.waitForStability(page, 2000);
+            }
+            else {
+                // Non-timeout error, rethrow
+                throw e;
+            }
+        }
         const loadTime = Date.now() - startTime;
         const screenshot = await this.screenshot();
         return {
@@ -812,6 +843,44 @@ export class CBrowser {
             loadTime,
         };
     }
+    /**
+     * Wait for page to stabilize (minimal DOM mutations).
+     * Used as fallback when networkidle times out on SPAs.
+     * @internal
+     */
+    async waitForStability(page, maxWaitMs = 2000) {
+        const checkInterval = 200;
+        const minStableChecks = 2; // Require 2 consecutive stable checks
+        let stableChecks = 0;
+        let elapsed = 0;
+        while (elapsed < maxWaitMs && stableChecks < minStableChecks) {
+            const mutationCount = await page.evaluate(() => {
+                return new Promise((resolve) => {
+                    let mutations = 0;
+                    const observer = new MutationObserver((records) => {
+                        mutations += records.length;
+                    });
+                    observer.observe(document.body || document.documentElement, {
+                        childList: true,
+                        subtree: true,
+                        attributes: true,
+                    });
+                    setTimeout(() => {
+                        observer.disconnect();
+                        resolve(mutations);
+                    }, 150);
+                });
+            });
+            if (mutationCount < 3) {
+                stableChecks++;
+            }
+            else {
+                stableChecks = 0;
+            }
+            await page.waitForTimeout(checkInterval);
+            elapsed += checkInterval + 150;
+        }
+    }
     // =========================================================================
     // Interaction
     // =========================================================================
@@ -1903,39 +1972,78 @@ export class CBrowser {
     async findAlternativeSelectors(originalSelector) {
         const page = await this.getPage();
         const alternatives = [];
+        // v10.10.0: Tokenize selector for better word-level matching
+        const selectorLower = originalSelector.toLowerCase();
+        const selectorWords = selectorLower
+            .replace(/[^\w\s]/g, " ")
+            .split(/\s+/)
+            .filter(w => w.length > 2 && !["the", "a", "an", "to", "for", "of", "in", "on"].includes(w));
         try {
             // Try to find elements with similar text
             const elements = await page.$$('button, a, [role="button"], input[type="submit"]');
-            for (const el of elements.slice(0, 10)) {
+            for (const el of elements.slice(0, 20)) {
                 const text = await el.textContent().catch(() => "");
                 const ariaLabel = await el.getAttribute("aria-label").catch(() => "");
-                const _title = await el.getAttribute("title").catch(() => "");
+                const title = await el.getAttribute("title").catch(() => "");
                 const id = await el.getAttribute("id").catch(() => "");
-                const _className = await el.getAttribute("class").catch(() => "");
-                // Check if text matches original selector
-                if (text && originalSelector.toLowerCase().includes(text.toLowerCase().trim().substring(0, 20))) {
-                    alternatives.push({
-                        selector: `text="${text.trim()}"`,
-                        confidence: 0.8,
-                        reason: `Text match: "${text.trim()}"`,
-                    });
+                const href = await el.getAttribute("href").catch(() => "");
+                const textLower = (text || "").toLowerCase().trim();
+                const ariaLower = (ariaLabel || "").toLowerCase();
+                // v10.10.0: Bidirectional word-level matching for text
+                if (textLower) {
+                    const textWords = textLower.replace(/[^\w\s]/g, " ").split(/\s+/).filter(w => w.length > 2);
+                    const matchingWords = selectorWords.filter(sw => textWords.some(tw => tw.includes(sw) || sw.includes(tw)));
+                    const matchRatio = selectorWords.length > 0 ? matchingWords.length / selectorWords.length : 0;
+                    // Also check if text IS a word in the selector (e.g., "submit" in "submit a story")
+                    const exactWordMatch = selectorWords.includes(textLower);
+                    if (matchRatio >= 0.5 || exactWordMatch || selectorLower.includes(textLower)) {
+                        // v10.10.0: Use plain text (not text="...") since findElement uses getByText
+                        const textTrimmed = text?.trim() || "";
+                        alternatives.push({
+                            selector: textTrimmed,
+                            confidence: exactWordMatch ? 0.9 : matchRatio >= 0.7 ? 0.85 : 0.75,
+                            reason: `Text match: "${textTrimmed}"`,
+                        });
+                    }
+                }
+                // Check aria-label with word matching
+                if (ariaLower) {
+                    const ariaWords = ariaLower.replace(/[^\w\s]/g, " ").split(/\s+/).filter(w => w.length > 2);
+                    const matchingWords = selectorWords.filter(sw => ariaWords.some(aw => aw.includes(sw) || sw.includes(aw)));
+                    const matchRatio = selectorWords.length > 0 ? matchingWords.length / selectorWords.length : 0;
+                    if (matchRatio >= 0.5 || selectorLower.includes(ariaLower)) {
+                        // CSS selector works with findElement's Strategy 7
+                        alternatives.push({
+                            selector: `css:[aria-label="${ariaLabel}"]`,
+                            confidence: 0.9,
+                            reason: `Aria-label: "${ariaLabel}"`,
+                        });
+                    }
                 }
-                // Check aria-label
-                if (ariaLabel && originalSelector.toLowerCase().includes(ariaLabel.toLowerCase().substring(0, 20))) {
+                // Check title attribute
+                if (title && selectorLower.includes(title.toLowerCase())) {
                     alternatives.push({
-                        selector: `[aria-label="${ariaLabel}"]`,
-                        confidence: 0.9,
-                        reason: `Aria-label: "${ariaLabel}"`,
+                        selector: `css:[title="${title}"]`,
+                        confidence: 0.85,
+                        reason: `Title: "${title}"`,
                     });
                 }
                 // Check id
-                if (id && originalSelector.toLowerCase().includes(id.toLowerCase())) {
+                if (id && selectorLower.includes(id.toLowerCase())) {
                     alternatives.push({
-                        selector: `#${id}`,
+                        selector: `css:#${id}`,
                         confidence: 0.95,
                         reason: `ID match: #${id}`,
                     });
                 }
+                // v10.10.0: Check href for link selectors
+                if (href && selectorWords.some(w => href.toLowerCase().includes(w))) {
+                    alternatives.push({
+                        selector: `css:a[href*="${href.slice(0, 50)}"]`,
+                        confidence: 0.7,
+                        reason: `Href match: ${href.slice(0, 30)}...`,
+                    });
+                }
             }
             // Sort by confidence
             alternatives.sort((a, b) => b.confidence - a.confidence);