qazen-cli 0.2.2 → 0.2.3

package/dist/lib/visionNavigator.js

@@ -187,7 +187,10 @@ export class VisionNavigator {
             // Mark original URL as visited too — prevents re-queuing via redirect.
             this.visitedUrls.add(normalizedUrl);
             const screenshot = await this.takeScreenshot(url);
-            const analysis = await this.analyzeScreenshot(screenshot, url, context, onEvent);
+            // Call 1 — Navigation mapping (fast + cheap, Haiku)
+            const navItems = await this.analyzeNavigation(screenshot, url, onEvent);
+            // Call 2 — Interaction analysis (thorough, Opus)
+            const analysis = await this.analyzeInteractions(screenshot, url, context, onEvent);
             if (!analysis)
                 return;
             const testScenariosFound = analysis.elements.flatMap((el) => el.testScenarios || []);
@@ -196,6 +199,7 @@ export class VisionNavigator {
                 title: await this.page.title(),
                 visualDescription: analysis.pageDescription,
                 elements: analysis.elements,
+                interactiveSurfaces: analysis.elements,
                 screenshot,
                 ...(analysis.workflow ? { workflow: analysis.workflow } : {}),
                 ...(analysis.pageType ? { pageType: analysis.pageType } : {}),
@@ -204,13 +208,13 @@ export class VisionNavigator {
             };
             onEvent({
                 type: "page_mapped",
-                message: `${analysis.pageDescription} — ${analysis.elements.length} elements found`,
+                message: `${analysis.pageDescription} — ${analysis.elements.length} interactive surfaces`,
             });
             const scenarioCount = pageMap.testScenariosFound.length;
             if (scenarioCount > 0) {
                 onEvent({
                     type: "vision_analysis",
-                    message: `${scenarioCount} test scenarios identified across ${analysis.elements.length} interactive surfaces`,
+                    message: `${scenarioCount} test scenarios across ${analysis.elements.length} surfaces`,
                 });
                 const topSurfaces = analysis.elements
                     .filter((e) => (e.testScenarios?.length ?? 0) > 2)
@@ -218,87 +222,27 @@ export class VisionNavigator {
                 for (const s of topSurfaces) {
                     onEvent({
                         type: "vision_analysis",
-                        message: `  · ${s.interactionType}: ${s.testScenarios.length} scenarios (e.g. "${s.testScenarios[0]}")`,
+                        message: `  · ${s.interactionType}: ${s.testScenarios.length} scenarios`,
                     });
                 }
             }
-            // Debug: log every elementType:priority Claude returned, so we can see
-            // why the highPriority filter may be excluding everything.
-            const elementTypes = analysis.elements
-                .map((e) => `${e.elementType}:${e.priority}`)
-                .join(", ");
-            onEvent({
-                type: "vision_analysis",
-                message: `Element types found: ${elementTypes}`,
-            });
-            const NAV_TYPES = ["link", "tab", "menu"];
-            const NAV_TYPES_EXPANDED = [...NAV_TYPES, "button", "other"];
-            const highPriority = analysis.elements
-                .filter((e) => {
-                if (e.priority !== "high")
-                    return false;
-                const desc = e.description.toLowerCase();
-                const isNavElement = desc.includes("navigation") ||
-                    desc.includes("menu") ||
-                    desc.includes("nav link") ||
-                    desc.includes("sidebar");
-                // Allow strict nav types, OR an expanded type set when the
-                // description itself signals navigation intent.
-                if (!isNavElement && !NAV_TYPES.includes(e.elementType))
-                    return false;
-                if (!NAV_TYPES_EXPANDED.includes(e.elementType))
-                    return false;
-                // Skip if this action URL is already visited
-                if (e.action && e.action.startsWith("http")) {
-                    const normalized = this.normalizeUrl(e.action);
-                    if (this.visitedUrls.has(normalized))
-                        return false;
-                }
-                // Skip if element description indicates it's the current page
-                if (desc.includes("currently active") ||
-                    desc.includes("current page") ||
-                    desc.includes("(active)")) {
-                    return false;
-                }
-                return true;
-            })
-                .slice(0, 4);
-            onEvent({
-                type: "vision_analysis",
-                message: `Navigation candidates: ${highPriority.length} (of ${analysis.elements.length})`,
-            });
-            for (const element of highPriority) {
+            this.pages.push(pageMap);
+            // Navigate using nav items from Call 1
+            for (const navItem of navItems.slice(0, 4)) {
                 try {
-                    const newUrl = await this.clickElement(element, pageMap, onEvent);
+                    const newUrl = await this.clickNavItem(navItem, pageMap, onEvent);
                     if (newUrl && !this.visitedUrls.has(this.normalizeUrl(newUrl))) {
                         this.explorationQueue.push({
                             url: newUrl,
-                            context: `Navigated from ${url} by clicking "${element.description}"`,
+                            context: `Navigated via "${navItem.description}"`,
                         });
                     }
+                    // Return to original page so the next nav-item click starts fresh.
                     await this.page.goto(url, { waitUntil: "domcontentloaded", timeout: 20000 });
                     await this.page.waitForTimeout(1500);
                 }
                 catch {
-                    // click failed — continue
-                }
-            }
-            this.pages.push(pageMap);
-            const links = analysis.elements
-                .filter((e) => e.elementType === "link" && e.action.startsWith("http"))
-                .map((e) => e.action)
-                .filter((href) => {
-                try {
-                    const hostname = new URL(href).hostname;
-                    return hostname.includes(baseRegistrable);
-                }
-                catch {
-                    return false;
-                }
-            });
-            for (const link of links) {
-                if (!this.visitedUrls.has(this.normalizeUrl(link))) {
-                    this.explorationQueue.push({ url: link, context: `Link found on ${url}` });
+                    // Continue to next nav item
                 }
             }
         }
@@ -309,7 +253,71 @@ export class VisionNavigator {
             });
         }
     }
-    async analyzeScreenshot(screenshot, url, context, onEvent) {
+    async analyzeNavigation(screenshot, _url, onEvent) {
+        try {
+            const response = await this.anthropic.messages.create({
+                model: "claude-haiku-4-5",
+                max_tokens: 800,
+                messages: [
+                    {
+                        role: "user",
+                        content: [
+                            {
+                                type: "image",
+                                source: { type: "base64", media_type: "image/jpeg", data: screenshot },
+                            },
+                            {
+                                type: "text",
+                                text: `Look at this web page screenshot.
+
+Find ONLY elements that will navigate the user to a DIFFERENT page or section of the application.
+
+This includes:
+- Sidebar menu items
+- Top navigation links
+- Tab bars that switch between pages
+- Breadcrumb links
+- "Back" or "Next" navigation buttons
+
+Do NOT include:
+- Dropdowns that filter data on the current page
+- Buttons that submit forms
+- Elements that open modals
+- Date pickers or search boxes
+
+Already visited pages — skip links to these:
+${Array.from(this.visitedUrls).join("\n")}
+
+Return ONLY valid JSON array:
+[
+  {
+    "description": "exact label of the nav item",
+    "visualLocation": "where it appears on screen",
+    "priority": "high or medium"
+  }
+]
+
+Return empty array [] if no navigation found.
+Return ONLY the JSON array, nothing else.`,
+                            },
+                        ],
+                    },
+                ],
+            });
+            const text = firstTextBlock(response.content) || "[]";
+            const parsed = JSON.parse(stripCodeFences(text));
+            const navItems = Array.isArray(parsed) ? parsed : [];
+            onEvent({
+                type: "vision_analysis",
+                message: `Navigation: ${navItems.length} items found`,
+            });
+            return navItems;
+        }
+        catch {
+            return [];
+        }
+    }
+    async analyzeInteractions(screenshot, url, context, onEvent) {
         onEvent({ type: "vision_analysis", message: "Sending screenshot to Claude Vision..." });
         try {
             const response = await this.anthropic.messages.create({
@@ -325,18 +333,20 @@ export class VisionNavigator {
                             },
                             {
                                 type: "text",
-                                text: `You are a senior QA engineer with 15 years experience testing enterprise web applications.
+                                text: `You are a senior QA engineer analysing a web application page for testable interactions.
 
 Current URL: ${url}
-Context: ${context}
-Already visited (do not prioritise these):
-${Array.from(this.visitedUrls).join("\n")}
+Page context: ${context}
+
+Analyse this screenshot and identify ALL interactive elements that need QA testing.
 
-Analyse this screenshot carefully. For EVERY interactive element visible on screen, identify:
+For EACH interactive element visible on screen, identify:
 1. What TYPE of interaction it represents
 2. What TEST SCENARIOS it generates for QA
 3. What INPUT DATA would properly exercise it
 
+Do NOT include navigation links, sidebar menu items, top-nav links, breadcrumbs, or tab bars that switch pages — those are handled separately. Focus only on on-page test surfaces.
+
 Interactive surface types to identify:
 
 SEARCH — What can be searched? Generate scenarios:
@@ -490,12 +500,12 @@ If not found, return {"x": 0, "y": 0, "found": false}`,
             return null;
         }
     }
-    async clickElement(element, pageMap, onEvent) {
+    async clickNavItem(navItem, pageMap, onEvent) {
         onEvent({
             type: "action",
-            message: `Clicking "${element.description}"`,
+            message: `Clicking "${navItem.description}"`,
         });
-        const coords = await this.getElementCoordinates(element.description, element.visualLocation);
+        const coords = await this.getElementCoordinates(navItem.description, navItem.visualLocation);
         if (!coords?.found)
             return null;
         // Set up navigation listener BEFORE clicking so we catch the redirect.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qazen-cli",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "QAZen CLI — capture authenticated browser sessions for enterprise SSO testing",
   "license": "MIT",
   "author": "QAZen",