@empiricalrun/test-gen 0.45.1 → 0.46.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @empiricalrun/test-gen
 
+## 0.46.1
+
+### Patch Changes
+
+- 0aa2054: test: add failing test for annotation enrichment for iframes
+- 21f5534: fix: enrich annotations inside iframes
+
+## 0.46.0
+
+### Minor Changes
+
+- b6dfc91: feat: create icon registry for test repositories
+
+### Patch Changes
+
+- b6dfc91: feat: cache icon description generated through LLM
+
 ## 0.45.1
 
 ### Patch Changes

package/dist/agent/master/browser-tests/index.spec.js

@@ -4,8 +4,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const test_1 = require("@playwright/test");
+const fs_1 = __importDefault(require("fs"));
 const http_server_1 = __importDefault(require("http-server"));
 const path_1 = __importDefault(require("path"));
+const utils_1 = require("../../browsing/utils");
+const element_annotation_1 = require("../element-annotation");
 const run_1 = require("../run");
 let server;
 let PORT = 2345;
@@ -57,9 +60,35 @@ test_1.test.afterAll(() => {
         page,
         options: {},
     });
+    // Validate code generated and action performed
     await (0, test_1.expect)(page.getByText("you clicked Gear")).toBeVisible();
     console.log(response);
     (0, test_1.expect)(response.importPaths.length).toBe(0);
-    (0, test_1.expect)(response.code).toContain("page.getByRole");
+    (0, test_1.expect)(response.code).toContain("page.locator");
     (0, test_1.expect)(response.code).toContain("click()");
+    // Validate icons registry
+    const iconsRegistryFile = path_1.default.join(process.cwd(), "icons.json");
+    const icons = JSON.parse(fs_1.default.readFileSync(iconsRegistryFile, "utf-8"));
+    (0, test_1.expect)(icons.length).toBe(4); // 1 for each unique icon
+    fs_1.default.unlinkSync(iconsRegistryFile);
+});
+(0, test_1.test)("annotate and enrich annotations correctly", async ({ page }) => {
+    await (0, utils_1.injectPwLocatorGenerator)(page);
+    await page.goto(`http://localhost:${PORT}/iframe-elements.html`);
+    const { annotationKeys: keys } = await (0, element_annotation_1.getAnnotationKeys)({
+        page,
+        preference: {
+            actionType: "all",
+        },
+        options: {},
+    });
+    console.log(keys);
+    (0, test_1.expect)(keys.length).toBe(6);
+    // 2 icons: 1 in main frame, 1 in iframe
+    (0, test_1.expect)(keys.filter((k) => k.text.includes("icon") && k.text.includes("close"))
+        .length).toBe(2);
+    // 2 text inputs: 1 in main frame, 1 in iframe
+    (0, test_1.expect)(keys.filter((k) => k.text.includes("Enter your name")).length).toBe(2);
+    // 2 clickable divs: 1 in main frame, 1 in iframe
+    (0, test_1.expect)(keys.filter((k) => k.text.includes("Lorem Ipsum")).length).toBe(2);
 });

package/dist/agent/master/element-annotation.d.ts

@@ -15,10 +15,11 @@ export type AnnotationPreference = {
     actionType: "all" | ActionType.FILL | ActionType.ASSERT_TEXT | ActionType.SCROLL;
     assertionText?: string | undefined;
 };
-export declare function getAnnotationKeys({ page, preference, options, }: {
+export declare function getAnnotationKeys({ page, preference, options, trace, }: {
     page: Page;
     preference: AnnotationPreference;
     options: BrowsingAgentOptions;
+    trace?: TraceClient;
 }): Promise<{
     annotationKeys: {
         elementID: string;

package/dist/agent/master/element-annotation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"element-annotation.d.ts","sourceRoot":"","sources":["../../../src/agent/master/element-annotation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,GAAG,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACpE,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAQlC,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAEnD,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AA0DjD,wBAAsB,oBAAoB,CAAC,EACzC,kBAAkB,EAClB,WAAW,EACX,mBAAmB,EACnB,KAAK,EACL,GAAG,EACH,OAAO,EACP,UAAU,GACX,EAAE;IACD,kBAAkB,EAAE,MAAM,CAAC;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,GAAG,CAAC,EAAE,GAAG,CAAC;IACV,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B,UAAU,EAAE,oBAAoB,CAAC;CAClC,GAAG,OAAO,CAAC,MAAM,GAAG,SAAS,CAAC,CA8C9B;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,UAAU,EACN,KAAK,GACL,UAAU,CAAC,IAAI,GACf,UAAU,CAAC,WAAW,GACtB,UAAU,CAAC,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACpC,CAAC;AAEF,wBAAsB,iBAAiB,CAAC,EACtC,IAAI,EACJ,UAAU,EACV,OAAO,GACR,EAAE;IACD,IAAI,EAAE,IAAI,CAAC;IACX,UAAU,EAAE,oBAAoB,CAAC;IACjC,OAAO,EAAE,oBAAoB,CAAC;CAC/B,GAAG,OAAO,CAAC;IACV,cAAc,EAAE;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACtD,gBAAgB,EAAE,MAAM,CAAC;IACzB,uBAAuB,EAAE,MAAM,CAAC;CACjC,CAAC,CAoDD"}
+{"version":3,"file":"element-annotation.d.ts","sourceRoot":"","sources":["../../../src/agent/master/element-annotation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,GAAG,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACpE,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAQlC,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAEnD,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AA2DjD,wBAAsB,oBAAoB,CAAC,EACzC,kBAAkB,EAClB,WAAW,EACX,mBAAmB,EACnB,KAAK,EACL,GAAG,EACH,OAAO,EACP,UAAU,GACX,EAAE;IACD,kBAAkB,EAAE,MAAM,CAAC;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,GAAG,CAAC,EAAE,GAAG,CAAC;IACV,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B,UAAU,EAAE,oBAAoB,CAAC;CAClC,GAAG,OAAO,CAAC,MAAM,GAAG,SAAS,CAAC,CA8C9B;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,UAAU,EACN,KAAK,GACL,UAAU,CAAC,IAAI,GACf,UAAU,CAAC,WAAW,GACtB,UAAU,CAAC,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACpC,CAAC;AAgBF,wBAAsB,iBAAiB,CAAC,EACtC,IAAI,EACJ,UAAU,EACV,OAAO,EACP,KAAK,GACN,EAAE;IACD,IAAI,EAAE,IAAI,CAAC;IACX,UAAU,EAAE,oBAAoB,CAAC;IACjC,OAAO,EAAE,oBAAoB,CAAC;IAC9B,KAAK,CAAC,EAAE,WAAW,CAAC;CACrB,GAAG,OAAO,CAAC;IACV,cAAc,EAAE;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACtD,gBAAgB,EAAE,MAAM,CAAC;IACzB,uBAAuB,EAAE,MAAM,CAAC;CACjC,CAAC,CAoFD"}

package/dist/agent/master/element-annotation.js

@@ -5,6 +5,7 @@ const llm_1 = require("@empiricalrun/llm");
 const constants_1 = require("../../constants");
 const promptTemplate_0 = "{{#section \"system\"}}\nYou are an expert in describing the images and it's content. You need to provide the descriptions of annotated elements\npresent in the image.\n\nYou will be provided with an annotated screenshot where interact-able / clickable elements are annotated. The annotation\nis done by drawing a red box around the element and a small yellow box on it which contains unique element id.\n\nYou are given a Annotations which contains list of unique element id and description of the element separated by \":\".\n\nYou are also given the description of the element on which the action needs to be taken. The description includes\ninformation about how the element looks, it's position etc.\n\nYour task is to provide the annotation of the element on which the action needs to be performed based on the element\ndescription.\n\nFollow steps to fulfil your task:\n- Using the list of all element Ids provided to you, map all the element Ids on the annotated screen and describe each\nelement.\n- For describing each element Id\n-- iterate over each element Id in annotation list\n-- check if the description is already present for the element Id in the Annotation provided to you. If present skip\ndescribing it and use it as is.\n-- if the description is NA, then identify the element in the annotated screenshot and describe it using the image or\nicon enclosed in the element.\n- Respond with the mapped element Ids as \"enriched_annotations\"\n- Based on the description provided to you and the enriched annotations, first identify the element Id whose description\nmatches the task provided\n\nNote:\n- Ensure providing the description of all the elements in the list.\n- Don't update the description if its already present in the given annotations\n- Replace all the \"NA\" with description of the element. Its position, how does it look like etc.\n- There should be no \"NA\" present in any of the element description\n{{/section}}\n\n{{#section \"user\"}}\nElement description:\n{{elementDescription}}\n\nAnnotations:\n{{annotations}}\n\n{{image annotatedScreenshot}}\n{{/section}}";
 const utils_1 = require("../utils");
+const icon_descriptor_1 = require("./icon-descriptor");
 const annotationToolAction = {
     name: "element_annotation",
     schema: {
@@ -99,8 +100,8 @@ async function getElementAnnotation({ elementDescription, annotations, annotated
     return;
 }
 exports.getElementAnnotation = getElementAnnotation;
-async function getAnnotationKeys({ page, preference, options, }) {
-    const annotationKeys = await page.evaluate(({ preference, options }) => {
+async function getAnnotationKeys({ page, preference, options, trace, }) {
+    const annotatedElements = await page.evaluate(({ preference, options }) => {
         // @ts-ignore
         // eslint-disable-next-line no-undef
         window.annotationInstance = annotateElementsWithPreference({
@@ -109,17 +110,37 @@ async function getAnnotationKeys({ page, preference, options, }) {
         });
         const annotations = Object.entries(
         // @ts-ignore
-        window.annotationInstance.annotations).map(([key, value]) => ({
-            elementID: key,
-            text: 
-            //@ts-ignore
-            value.node.innerText?.trim() ||
-                //@ts-ignore
-                value.node.placeholder?.trim() ||
-                "NA",
-        }));
-        return annotations;
+        window.annotationInstance.annotations).map(([key, value]) => {
+            // Helper function to safely get text content
+            const getTextContent = (node) => {
+                try {
+                    return node?.innerText?.trim() || null;
+                }
+                catch {
+                    return null;
+                }
+            };
+            // Helper function to safely get placeholder
+            const getPlaceholder = (node) => {
+                try {
+                    return node?.placeholder?.trim() || null;
+                }
+                catch {
+                    return null;
+                }
+            };
+            return {
+                elementID: key,
+                innerText: getTextContent(value.node),
+                innerHTML: value.node.innerHTML,
+                outerHTML: value.node.outerHTML,
+                placeholder: getPlaceholder(value.node),
+            };
+        });
+        const fullPageHTML = document.documentElement.outerHTML;
+        return { annotations, fullPageHTML };
     }, { preference, options });
+    const annotationKeys = await enrichAnnotations(annotatedElements.annotations, annotatedElements.fullPageHTML, trace);
     const annotationBuffer = await page.screenshot({
     // path: `screenshots/screenshot-${screenshotIndex++}.png`,
     });
@@ -145,3 +166,30 @@ async function getAnnotationKeys({ page, preference, options, }) {
     };
 }
 exports.getAnnotationKeys = getAnnotationKeys;
+async function enrichAnnotations(annotatedElements, pageHtml, trace) {
+    // create icon descriptor span
+    const iconDescriptionSpan = trace?.span({
+        name: "describe-icons",
+    });
+    const results = [];
+    for (const element of annotatedElements) {
+        const text = element.innerText?.trim() || element.placeholder?.trim();
+        if (text) {
+            results.push({
+                elementID: element.elementID,
+                text,
+            });
+            continue;
+        }
+        const description = await (0, icon_descriptor_1.getIconDescription)({
+            htmlString: element.outerHTML,
+            pageHtml: pageHtml,
+            trace: iconDescriptionSpan,
+        });
+        results.push({
+            elementID: element.elementID,
+            text: description || "NA",
+        });
+    }
+    return results;
+}

package/dist/agent/master/icon-descriptor/index.d.ts

@@ -0,0 +1,22 @@
+import { TraceClient } from "@empiricalrun/llm";
+type IconKnowledge = {
+    description: string;
+    key: string;
+    normalized: string;
+    createdAt: Date;
+};
+export declare function loadIconsKnowledge(): Array<IconKnowledge>;
+export declare function saveIconsKnowledge(iconsData: Array<IconKnowledge>): Promise<void>;
+export declare function generateKey(htmlString: string): string;
+export declare function reverseKey(hash: string): string;
+export declare function createNodeFromHTML(htmlString: string): {
+    node: Element | null;
+    children: Element[];
+};
+export declare function getIconDescription({ htmlString, pageHtml, trace, }: {
+    htmlString: string;
+    trace?: TraceClient;
+    pageHtml: string;
+}): Promise<string | undefined>;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/agent/master/icon-descriptor/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/agent/master/icon-descriptor/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAWrD,KAAK,aAAa,GAAG;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,IAAI,CAAC;CACjB,CAAC;AAEF,wBAAgB,kBAAkB,IAAI,KAAK,CAAC,aAAa,CAAC,CAczD;AAED,wBAAsB,kBAAkB,CACtC,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,GAC9B,OAAO,CAAC,IAAI,CAAC,CAGf;AAED,wBAAgB,WAAW,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAKtD;AAED,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAG/C;AAED,wBAAgB,kBAAkB,CAAC,UAAU,EAAE,MAAM;;;EAUpD;AAqKD,wBAAsB,kBAAkB,CAAC,EACvC,UAAU,EACV,QAAQ,EACR,KAAK,GACN,EAAE;IACD,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;CAClB,GAAG,OAAO,CAAC,MAAM,GAAG,SAAS,CAAC,CAkC9B"}

package/dist/agent/master/icon-descriptor/index.js

@@ -0,0 +1,211 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getIconDescription = exports.createNodeFromHTML = exports.reverseKey = exports.generateKey = exports.saveIconsKnowledge = exports.loadIconsKnowledge = void 0;
+const llm_1 = require("@empiricalrun/llm");
+const fs_1 = __importDefault(require("fs"));
+const jsdom_1 = require("jsdom");
+const path_1 = __importDefault(require("path"));
+const constants_1 = require("../../../constants");
+const normalize_svg_1 = require("./normalize-svg");
+const ICONS_KNOWLEDGE_PATH = path_1.default.join(process.cwd(), "icons.json");
+function loadIconsKnowledge() {
+    if (!fs_1.default.existsSync(ICONS_KNOWLEDGE_PATH)) {
+        return [];
+    }
+    const raw = fs_1.default.readFileSync(ICONS_KNOWLEDGE_PATH, "utf-8");
+    if (raw) {
+        try {
+            return JSON.parse(raw);
+        }
+        catch (err) {
+            console.log("error parsing iconsKnowledge json");
+            return [];
+        }
+    }
+    return [];
+}
+exports.loadIconsKnowledge = loadIconsKnowledge;
+async function saveIconsKnowledge(iconsData) {
+    const content = JSON.stringify(iconsData, null, 2);
+    fs_1.default.writeFileSync(ICONS_KNOWLEDGE_PATH, content, "utf-8");
+}
+exports.saveIconsKnowledge = saveIconsKnowledge;
+function generateKey(htmlString) {
+    const normalized = (0, normalize_svg_1.normalizeSVG)(htmlString);
+    // generate base64 string
+    const encoded = Buffer.from(normalized).toString("base64");
+    return `icon_${encoded}`;
+}
+exports.generateKey = generateKey;
+function reverseKey(hash) {
+    const encoded = hash.replace(/^icon_/, "");
+    return Buffer.from(encoded, "base64").toString();
+}
+exports.reverseKey = reverseKey;
+function createNodeFromHTML(htmlString) {
+    const dom = new jsdom_1.JSDOM(htmlString);
+    const document = dom.window.document;
+    const node = document.body.firstElementChild;
+    return {
+        node, // Return the first node
+        children: node?.children ? Array.from(node.children) : [], // Convert HTMLCollection to array
+    };
+}
+exports.createNodeFromHTML = createNodeFromHTML;
+function processSvgWithUseElements(svgElement, document) {
+    try {
+        const useElements = svgElement.querySelectorAll("use");
+        for (const useEl of Array.from(useElements)) {
+            const href = useEl.getAttribute("href") || useEl.getAttribute("xlink:href");
+            if (!href)
+                continue;
+            const id = href.startsWith("#") ? href.substring(1) : href;
+            const referencedElement = document.getElementById(id);
+            if (referencedElement) {
+                if (referencedElement.tagName.toLowerCase() === "symbol" ||
+                    referencedElement.tagName.toLowerCase() === "svg") {
+                    const group = document.createElement("g");
+                    Array.from(useEl.attributes).forEach((attr) => {
+                        if (attr.name !== "href" && attr.name !== "xlink:href") {
+                            group.setAttribute(attr.name, attr.value);
+                        }
+                    });
+                    if (referencedElement.hasAttribute("viewBox")) {
+                        group.setAttribute("viewBox", referencedElement.getAttribute("viewBox") || "");
+                    }
+                    group.innerHTML = referencedElement.innerHTML;
+                    useEl.parentNode?.replaceChild(group, useEl);
+                }
+            }
+        }
+    }
+    catch (error) {
+        console.error("Error processing SVG with use elements:", error);
+    }
+}
+/**
+ * Extracts and returns an SVG element from a given HTML string.
+ *
+ * This function checks whether the provided HTML string contains an SVG element
+ * either as the root node or as a child node.
+ */
+function getHtmlForDescription(elementHtml, pageHtml) {
+    const dom = new jsdom_1.JSDOM(pageHtml);
+    const page = dom.window.document;
+    const { node, children } = createNodeFromHTML(elementHtml);
+    if (!node) {
+        return undefined;
+    }
+    if (node.tagName.toLowerCase() === "svg") {
+        processSvgWithUseElements(node, page);
+        return node.outerHTML;
+    }
+    const svgChildren = children?.filter((child) => child?.tagName?.toLowerCase() === "svg");
+    if (svgChildren && svgChildren.length > 0) {
+        for (const svgChild of svgChildren) {
+            processSvgWithUseElements(svgChild, page);
+        }
+        return node.outerHTML;
+    }
+    return undefined;
+}
+async function describeSVGElementWithLLM({ element, trace, }) {
+    try {
+        const svgDescriptionSpan = trace?.span({
+            name: "get-svg-description",
+            input: {
+                element,
+            },
+        });
+        const messages = [
+            {
+                role: "system",
+                content: `
+You are an expert at reading svg icons. You are given a task to provide the description of an icon based on the given HTML element string.
+If the string does not contain any svg element, return NA.
+          `,
+            },
+            {
+                role: "user",
+                content: `
+Provide the description of below element:
+${element}
+
+Follow below steps to provide the description:
+- Identify the svg element in the given HTML string
+- If the string does not contain any svg element, return NA
+- Else, read the svg element and provide a single line description for the element
+- The description should be precise and readable
+- Only provide the element description and nothing else
+`,
+            },
+        ];
+        const llm = new llm_1.LLM({
+            trace: svgDescriptionSpan,
+            provider: "anthropic",
+            defaultModel: "claude-3-5-sonnet-latest",
+            providerApiKey: constants_1.MODEL_API_KEYS["anthropic"],
+        });
+        const svgDescription = await llm.createChatCompletion({
+            messages,
+            modelParameters: {
+                temperature: 0.3,
+            },
+            responseFormat: {
+                type: "json_schema",
+                json_schema: {
+                    name: "describe-svg-element",
+                    strict: true,
+                    schema: {
+                        type: "object",
+                        properties: {
+                            description: {
+                                type: "string",
+                                description: "A clear description of what the SVG visually represents",
+                            },
+                        },
+                        additionalProperties: false,
+                        required: ["description"],
+                    },
+                },
+            },
+        });
+        svgDescriptionSpan?.end({ output: svgDescription });
+        return svgDescription?.content ?? undefined;
+    }
+    catch (err) {
+        console.error(`Error generating svg description ${err}`);
+        return undefined;
+    }
+}
+async function getIconDescription({ htmlString, pageHtml, trace, }) {
+    const elementStringForDescription = getHtmlForDescription(htmlString, pageHtml);
+    if (!elementStringForDescription) {
+        return undefined;
+    }
+    const key = generateKey(elementStringForDescription);
+    const iconsData = loadIconsKnowledge();
+    const cachedIcon = iconsData.find((icon) => icon.key === key);
+    if (cachedIcon) {
+        return cachedIcon.description;
+    }
+    const description = await describeSVGElementWithLLM({
+        element: elementStringForDescription,
+        trace,
+    });
+    if (description) {
+        const newIconEntry = {
+            description,
+            key,
+            normalized: htmlString,
+            createdAt: new Date(),
+        };
+        iconsData.push(newIconEntry);
+        await saveIconsKnowledge(iconsData);
+    }
+    return description;
+}
+exports.getIconDescription = getIconDescription;

package/dist/agent/master/icon-descriptor/normalize-svg.d.ts

@@ -0,0 +1,2 @@
+export declare function normalizeSVG(svgHtml: string): string;
+//# sourceMappingURL=normalize-svg.d.ts.map

package/dist/agent/master/icon-descriptor/normalize-svg.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"normalize-svg.d.ts","sourceRoot":"","sources":["../../../../src/agent/master/icon-descriptor/normalize-svg.ts"],"names":[],"mappings":"AAEA,wBAAgB,YAAY,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CA8BpD"}

package/dist/agent/master/icon-descriptor/normalize-svg.js

@@ -0,0 +1,248 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeSVG = void 0;
+const jsdom_1 = require("jsdom");
+function normalizeSVG(svgHtml) {
+    // Parse the SVG HTML into a DOM structure using JSDOM
+    const dom = new jsdom_1.JSDOM(svgHtml);
+    const document = dom.window.document;
+    const svgElement = document.querySelector("svg");
+    if (!svgElement) {
+        throw new Error("No SVG element found in the provided HTML");
+    }
+    // Normalize whitespace and formatting
+    normalizeWhitespace(svgElement);
+    // Normalize attribute order
+    normalizeAttributeOrder(svgElement);
+    // Normalize transform values
+    normalizeTransforms(svgElement);
+    // Normalize color formats (convert rgb to hex, standardize hex case)
+    normalizeColors(svgElement);
+    // Normalize path data (standardize spacing, remove redundant commands)
+    normalizePaths(svgElement);
+    // Normalize viewBox and preserveAspectRatio
+    normalizeViewBox(svgElement);
+    // Return the normalized SVG string
+    return svgElement.outerHTML;
+}
+exports.normalizeSVG = normalizeSVG;
+/**
+ * Normalizes whitespace in SVG element
+ * @param element - The element to normalize
+ */
+function normalizeWhitespace(element) {
+    // Convert text nodes to have consistent spacing
+    const walkNodes = (node) => {
+        if (node.nodeType === 3) {
+            // TEXT_NODE
+            if (node.textContent?.trim() === "") {
+                node.textContent = "";
+            }
+            else if (node.textContent) {
+                node.textContent = node.textContent.trim().replace(/\s+/g, " ");
+            }
+        }
+        else if (node.nodeType === 1) {
+            // ELEMENT_NODE
+            for (let child of Array.from(node.childNodes)) {
+                walkNodes(child);
+            }
+        }
+    };
+    walkNodes(element);
+}
+/**
+ * Normalizes attribute order on SVG elements
+ * @param element - The element to normalize
+ */
+function normalizeAttributeOrder(element) {
+    const walkElements = (node) => {
+        if (node.nodeType === 1) {
+            // ELEMENT_NODE
+            const elementNode = node;
+            // Get all attributes in a sorted array
+            const attributes = Array.from(elementNode.attributes);
+            const sortedAttributes = attributes.sort((a, b) => a.name.localeCompare(b.name));
+            // Remove all attributes
+            for (const attr of attributes) {
+                elementNode.removeAttribute(attr.name);
+            }
+            // Add them back in sorted order
+            for (const attr of sortedAttributes) {
+                elementNode.setAttribute(attr.name, attr.value);
+            }
+            // Process children
+            for (let child of Array.from(node.childNodes)) {
+                walkElements(child);
+            }
+        }
+    };
+    walkElements(element);
+}
+/**
+ * Normalizes transform values to a consistent format
+ * @param element - The element to normalize
+ */
+function normalizeTransforms(element) {
+    const walkElements = (node) => {
+        if (node.nodeType === 1) {
+            // ELEMENT_NODE
+            const elementNode = node;
+            if (elementNode.hasAttribute("transform")) {
+                const transform = elementNode.getAttribute("transform");
+                if (transform) {
+                    // Normalize transform by ensuring consistent spacing and order
+                    const normalizedTransform = transform
+                        .replace(/\s*,\s*/g, ",")
+                        .replace(/\s+/g, " ")
+                        .replace(/\(\s+/g, "(")
+                        .replace(/\s+\)/g, ")");
+                    elementNode.setAttribute("transform", normalizedTransform);
+                }
+            }
+            // Process children
+            for (let child of Array.from(node.childNodes)) {
+                walkElements(child);
+            }
+        }
+    };
+    walkElements(element);
+}
+/**
+ * Normalizes color formats to consistent hex values
+ * @param element - The element to normalize
+ */
+function normalizeColors(element) {
+    const colorAttributes = ["fill", "stroke", "stop-color", "color"];
+    const convertRgbToHex = (rgb) => {
+        // Convert rgb(r, g, b) or rgba(r, g, b, a) to hex
+        const rgbMatch = rgb.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([0-9.]+))?\)/);
+        if (rgbMatch) {
+            const r = parseInt(rgbMatch[1], 10);
+            const g = parseInt(rgbMatch[2], 10);
+            const b = parseInt(rgbMatch[3], 10);
+            // Convert to hex
+            const toHex = (c) => {
+                const hex = c.toString(16);
+                return hex.length === 1 ? "0" + hex : hex;
+            };
+            let hexColor = "#" + toHex(r) + toHex(g) + toHex(b);
+            // If there's alpha, we need to handle it separately (SVG doesn't use hex for alpha)
+            if (rgbMatch[4] && rgbMatch[4] !== "1") {
+                // Keep original rgba format but with normalized spacing
+                return `rgba(${r},${g},${b},${parseFloat(rgbMatch[4])})`;
+            }
+            return hexColor.toLowerCase();
+        }
+        return rgb;
+    };
+    const normalizeHex = (hex) => {
+        // Ensure lowercase for hex colors
+        if (hex.match(/#[0-9a-fA-F]{3,8}/)) {
+            return hex.toLowerCase();
+        }
+        return hex;
+    };
+    const walkElements = (node) => {
+        if (node.nodeType === 1) {
+            // ELEMENT_NODE
+            const elementNode = node;
+            // Check for color attributes
+            for (const attr of colorAttributes) {
+                if (elementNode.hasAttribute(attr)) {
+                    let value = elementNode.getAttribute(attr);
+                    if (value) {
+                        value = convertRgbToHex(value);
+                        value = normalizeHex(value);
+                        elementNode.setAttribute(attr, value);
+                    }
+                }
+            }
+            // Check for style attribute with colors
+            if (elementNode.hasAttribute("style")) {
+                let style = elementNode.getAttribute("style");
+                if (style) {
+                    // Replace any colors in the style attribute
+                    for (const attr of colorAttributes) {
+                        style = style.replace(new RegExp(`${attr}:\\s*([^;]+)`, "g"), (match, color) => {
+                            const normalizedColor = normalizeHex(convertRgbToHex(color));
+                            return `${attr}: ${normalizedColor}`;
+                        });
+                    }
+                    elementNode.setAttribute("style", style);
+                }
+            }
+            // Process children
+            for (let child of Array.from(node.childNodes)) {
+                walkElements(child);
+            }
+        }
+    };
+    walkElements(element);
+}
+/**
+ * Normalizes SVG path data
+ * @param element - The element to normalize
+ */
+function normalizePaths(element) {
+    const walkElements = (node) => {
+        if (node.nodeType === 1) {
+            // ELEMENT_NODE
+            const elementNode = node;
+            if (elementNode.tagName.toLowerCase() === "path" &&
+                elementNode.hasAttribute("d")) {
+                const pathData = elementNode.getAttribute("d");
+                if (pathData) {
+                    // Normalize spacing in path data
+                    const normalizedPathData = pathData
+                        .replace(/\s+/g, " ")
+                        .replace(/\s*([MmLlHhVvCcSsQqTtAaZz])\s*/g, "$1")
+                        .replace(/\s*,\s*/g, ",")
+                        .trim();
+                    elementNode.setAttribute("d", normalizedPathData);
+                }
+            }
+            // Process children
+            for (let child of Array.from(node.childNodes)) {
+                walkElements(child);
+            }
+        }
+    };
+    walkElements(element);
+}
+/**
+ * Normalizes viewBox and preserveAspectRatio attributes
+ * @param element - The element to normalize
+ */
+function normalizeViewBox(element) {
+    if (element.tagName.toLowerCase() === "svg") {
+        if (element.hasAttribute("viewBox")) {
+            const viewBoxAttr = element.getAttribute("viewBox");
+            if (viewBoxAttr) {
+                // Normalize viewBox format
+                const viewBox = viewBoxAttr
+                    .trim()
+                    .replace(/\s+/g, " ")
+                    .split(" ")
+                    .map((val) => parseFloat(val).toString())
+                    .join(" ");
+                element.setAttribute("viewBox", viewBox);
+            }
+        }
+        if (element.hasAttribute("preserveAspectRatio")) {
+            const aspectRatio = element.getAttribute("preserveAspectRatio");
+            if (aspectRatio) {
+                // Normalize preserveAspectRatio to consistent formatting
+                const value = aspectRatio.trim();
+                element.setAttribute("preserveAspectRatio", value);
+            }
+        }
+    }
+    // Process children (in case of nested SVGs)
+    for (let child of Array.from(element.childNodes)) {
+        if (child.nodeType === 1) {
+            // ELEMENT_NODE
+            normalizeViewBox(child);
+        }
+    }
+}

package/dist/agent/master/run.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"run.d.ts","sourceRoot":"","sources":["../../../src/agent/master/run.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAqBlC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,OAAO,EACL,oBAAoB,EAErB,MAAM,aAAa,CAAC;AA6BrB,wBAAsB,0BAA0B,CAAC,EAC/C,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,SAAS,GACV,EAAE;IACD,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,IAAI,CAAC;IACX,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,oBAAoB,CAAC;IAC9B,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;;;GA4XA"}
+{"version":3,"file":"run.d.ts","sourceRoot":"","sources":["../../../src/agent/master/run.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAqBlC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,OAAO,EACL,oBAAoB,EAErB,MAAM,aAAa,CAAC;AA6BrB,wBAAsB,0BAA0B,CAAC,EAC/C,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,SAAS,GACV,EAAE;IACD,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,IAAI,CAAC;IACX,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,oBAAoB,CAAC;IAC9B,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;;;GA8XA"}

package/dist/agent/master/run.js

@@ -224,6 +224,7 @@ async function createTestUsingMasterAgent({ task, page, testCase, specPath, opti
                         page,
                         preference,
                         options,
+                        trace: masterAgentActionSpan,
                     });
                     if (annotationKeys.length > 0) {
                         // TODO: this string has newline characters that makes it harder to read

package/dist/agent/master/scroller.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scroller.d.ts","sourceRoot":"","sources":["../../../src/agent/master/scroller.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGrE,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAElC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAchD,MAAM,MAAM,cAAc,GAAG;IAC3B,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;CACzB,CAAC;AA2ZF,wBAAsB,QAAQ,CAAC,EAC7B,kBAAkB,EAClB,IAAI,EACJ,KAAK,EACL,cAAc,EACd,MAAM,GACP,EAAE;IACD,kBAAkB,EAAE,MAAM,CAAC;IAC3B,IAAI,EAAE,IAAI,CAAC;IACX,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB,GAAG,OAAO,CAAC,cAAc,EAAE,CAAC,CA6D5B"}
+{"version":3,"file":"scroller.d.ts","sourceRoot":"","sources":["../../../src/agent/master/scroller.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGrE,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAElC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAchD,MAAM,MAAM,cAAc,GAAG;IAC3B,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;CACzB,CAAC;AA4ZF,wBAAsB,QAAQ,CAAC,EAC7B,kBAAkB,EAClB,IAAI,EACJ,KAAK,EACL,cAAc,EACd,MAAM,GACP,EAAE;IACD,kBAAkB,EAAE,MAAM,CAAC;IAC3B,IAAI,EAAE,IAAI,CAAC;IACX,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB,GAAG,OAAO,CAAC,cAAc,EAAE,CAAC,CA6D5B"}

package/dist/agent/master/scroller.js

@@ -188,6 +188,7 @@ async function getDivAnnotationToScrollOn({ elementDescription, page, trace, log
             actionType: action_tool_calls_1.ActionType.SCROLL,
         },
         options: {},
+        trace,
     });
     // Remove the used annotations from the list
     annotationKeys = annotationKeys.filter((key) => !usedAnnotations.includes(key.elementID));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empiricalrun/test-gen",
-  "version": "0.45.1",
+  "version": "0.46.1",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
@@ -59,6 +59,7 @@
     "google-spreadsheet": "^4.1.2",
     "ignore": "^5.3.1",
     "inquirer": "^12.4.2",
+    "jsdom": "^26.0.0",
     "lodash.isequal": "^4.5.0",
     "md5": "^2.3.0",
     "mime": "^4.0.4",
@@ -73,9 +74,9 @@
     "ts-morph": "^23.0.0",
     "tsx": "^4.16.2",
     "typescript": "^5.3.3",
-    "@empiricalrun/llm": "^0.9.35",
     "@empiricalrun/r2-uploader": "^0.3.8",
-    "@empiricalrun/reporter": "^0.23.1"
+    "@empiricalrun/reporter": "^0.23.1",
+    "@empiricalrun/llm": "^0.9.35"
   },
   "devDependencies": {
     "@playwright/test": "1.47.1",
@@ -84,6 +85,7 @@
     "@types/fs-extra": "^11.0.4",
     "@types/http-server": "^0.12.4",
     "@types/js-levenshtein": "^1.1.3",
+    "@types/jsdom": "^21.1.7",
     "@types/lodash.isequal": "^4.5.8",
     "@types/md5": "^2.3.5",
     "http-server": "^14.1.1",