@empiricalrun/test-gen 0.42.8 → 0.42.10

package/dist/agent/master/scroller.js

@@ -0,0 +1,375 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.scroller = void 0;
+const llm_1 = require("@empiricalrun/llm");
+const vision_1 = require("@empiricalrun/llm/vision");
+const constants_1 = require("../../constants");
+const reporter_1 = require("../../reporter");
+const utils_1 = require("../utils");
+const action_tool_calls_1 = require("./action-tool-calls");
+const element_annotation_1 = require("./element-annotation");
+let usedAnnotations = [];
+// This checks whether scroll is possible or not
+// If the div annotation is undefined, we check the scrollability of the page
+// else we check for the element
+async function isScrollable({ scrollDirection, page, divAnnotation, }) {
+    if (divAnnotation) {
+        return await page.evaluate(({ scrollDirection, divAnnotation }) => {
+            if (
+            // @ts-ignore
+            window?.annotationInstance?.annotations?.[divAnnotation]) {
+                let element = // @ts-ignore
+                 window?.annotationInstance?.annotations?.[divAnnotation]?.node;
+                if (scrollDirection === "up") {
+                    return element.scrollTop > 0;
+                }
+                else {
+                    return (element.scrollHeight > element.clientHeight + element.scrollTop);
+                }
+            }
+            return false;
+        }, { scrollDirection, divAnnotation });
+    }
+    return await page.evaluate(({ scrollDirection }) => {
+        if (scrollDirection === "up") {
+            return window.scrollY > 0;
+        }
+        else {
+            return (document.documentElement.scrollHeight >
+                window.innerHeight + window.scrollY);
+        }
+    }, { scrollDirection });
+}
+// Performs scroll on page or the element
+// If the div annotation is undefined, we scroll the page
+// else we scroll the element
+async function scroll({ scrollBy, page, direction, divAnnotation, logger, }) {
+    const testGenUpdatesReporter = new reporter_1.TestGenUpdatesReporter();
+    if (divAnnotation) {
+        await testGenUpdatesReporter.sendMessage("Scrolling the div since element is not in view");
+        logger?.log("Scrolling the div since element is not in view");
+        return await page.evaluate(({ scrollBy, direction, divAnnotation }) => {
+            if (
+            // @ts-ignore
+            window?.annotationInstance?.annotations?.[divAnnotation]) {
+                let element = // @ts-ignore
+                 window?.annotationInstance?.annotations?.[divAnnotation]?.node;
+                let scrollHeight = scrollBy || element.clientHeight;
+                element.scrollBy(0, scrollHeight * (direction === "up" ? -1 : 1));
+                return scrollHeight;
+            }
+            return 0;
+        }, { scrollBy, direction, divAnnotation });
+    }
+    await testGenUpdatesReporter.sendMessage("Scrolling the page since element is not in view");
+    logger?.log("Scrolling the page since element is not in view");
+    return await page.evaluate(({ scrollBy, direction }) => {
+        let scrollHeight = scrollBy || window.innerHeight;
+        window.scrollBy(0, scrollHeight * (direction === "up" ? -1 : 1));
+        return scrollHeight;
+    }, { scrollBy, direction });
+}
+// Scrolls the page to top
+async function scrollToTop(page) {
+    await page.evaluate(() => {
+        window.scrollTo({ top: 0 });
+    });
+}
+// Checks if the element is visible in the current frame
+async function isElementVisibleInFrame({ elementDescription, page, trace, logger, }) {
+    const buffer = await page.screenshot();
+    const frameScreenshot = buffer.toString("base64");
+    const systemMessage = {
+        role: "system",
+        content: `
+You are a web automation tool having extraordinary capabilities of going through the webpage screenshots. You are given a task to identify whether the element with given element description is present on the screen.
+You need to make a decision whether the element is visible or not. Only consider an element to be visible if it's completely visible, otherwise respond false.`,
+    };
+    const userMessage = {
+        role: "user",
+        content: [
+            {
+                type: "text",
+                text: `
+Element description:
+${elementDescription}
+
+----            
+
+Follow the instructions before responding:
+- Scan through the content in the screenshot
+- While scanning check whether there is any element for which the given element description matches.
+- If it matches set is_visible as true
+- else set is_visible as false
+            `,
+            },
+            {
+                type: "text",
+                text: "Screenshot",
+            },
+            {
+                type: "image_url",
+                image_url: {
+                    url: (0, vision_1.imageFormatForProvider)(constants_1.DEFAULT_MODEL_PROVIDER, frameScreenshot),
+                },
+            },
+        ],
+    };
+    const tool = {
+        type: "function",
+        function: {
+            name: "is-element-visible",
+            description: "Is the element with given element description present in the screenshot",
+            parameters: {
+                type: "object",
+                properties: {
+                    reason: {
+                        type: "string",
+                        description: "Explain why the element is marked as visible and its location. The reason should be clear and concise.",
+                    },
+                    is_visible: {
+                        type: "boolean",
+                        description: "Boolean value for whether the element is completely visible in the screenshot.",
+                    },
+                },
+                required: ["reason", "is_visible"],
+            },
+        },
+    };
+    const messages = [
+        systemMessage,
+        userMessage,
+    ];
+    const scrollSpan = trace?.span({
+        name: "is-element-visible-after-scroll",
+        input: {
+            elementDescription,
+            messages,
+        },
+    });
+    const llm = new llm_1.LLM({
+        provider: constants_1.DEFAULT_MODEL_PROVIDER,
+        defaultModel: constants_1.DEFAULT_MODEL,
+    });
+    const completion = await llm.createChatCompletion({
+        messages,
+        modelParameters: {
+            ...constants_1.DEFAULT_MODEL_PARAMETERS,
+            tool_choice: "required",
+            temperature: 1,
+        },
+        trace: scrollSpan,
+        tools: [tool],
+    });
+    let isVisible = false;
+    const toolCall = completion?.tool_calls?.[0];
+    scrollSpan?.end({ output: toolCall });
+    if (toolCall) {
+        const args = (0, utils_1.parseJson)(toolCall.function.arguments);
+        isVisible = args.is_visible || false;
+    }
+    else {
+        logger?.error(`No tool call found in completion. [Trace](${trace?.getTraceUrl()})`);
+    }
+    return {
+        isVisible,
+        frameScreenshot,
+    };
+}
+// Returns the element annotation to scroll on
+// if there is no element matching the description we return "NA"
+async function getDivAnnotationToScrollOn({ elementDescription, page, trace, logger, }) {
+    const preference = {
+        actionType: action_tool_calls_1.ActionType.SCROLL,
+    };
+    let { annotationKeys, annotatedPageScreenshot } = await (0, element_annotation_1.getAnnotationKeys)({
+        page,
+        preference: {
+            actionType: action_tool_calls_1.ActionType.SCROLL,
+        },
+        options: {},
+    });
+    // Remove the used annotations from the list
+    annotationKeys = annotationKeys.filter((key) => !usedAnnotations.includes(key.elementID));
+    if (annotationKeys.length === 0) {
+        return;
+    }
+    const annotationKeysString = annotationKeys
+        ?.map((a) => `${a.elementID}:${a.text}`)
+        .join("\n");
+    const annotationsSpan = trace?.span({
+        name: "get-div-annotation",
+        input: {
+            elementDescription,
+            annotationKeys,
+            annotatedPageScreenshot,
+            preference,
+        },
+    });
+    const systemMessage = {
+        role: "system",
+        content: `
+You are an expert in describing the images and it's content. You will be provided with an annotated screenshot where scrollable divs are annotated. 
+    
+The annotation is done by drawing a red box around the element and a small yellow box on it which contains unique element id.
+
+You are given a "Annotations" which contains list of unique element Id and description of the element separated by ":". 
+
+You are also given the description of the element which can be present inside the annotated element. The description includes information about how the element looks, it's position etc.
+
+Your task is to provide the annotation of the div on which the scroll action needs to be performed based on whether the provided element is inside the div. You can use the description of the annotated element as well. E.g. text in the div contains the text as described in the element description.
+
+You also need to extract the relevant information like the element text or position from the provided element description, this can be used to match the div content with the element.
+
+If there is a match provide the annotation for the div else respond with "NA".
+
+Follow steps to fulfil your task:
+- If the provided "Annotations" is empty, respond with "NA"
+- For each element Id, read the description for the div element
+- If the description contains the element description or anything on similar lines
+- Respond with the element Id
+- If none of the description contains the element description respond with "NA"
+- If the specified element Id is not found in the "Annotations" section, the response is invalid.
+    `,
+    };
+    const userMessage = {
+        role: "user",
+        content: [
+            {
+                type: "text",
+                text: `
+Element description:
+${elementDescription}
+
+Annotations:
+${annotationKeysString}`,
+            },
+            {
+                type: "image_url",
+                image_url: {
+                    url: (0, vision_1.imageFormatForProvider)(constants_1.DEFAULT_MODEL_PROVIDER, annotatedPageScreenshot),
+                },
+            },
+        ],
+    };
+    const messages = [
+        systemMessage,
+        userMessage,
+    ];
+    const annotationToolAction = {
+        name: "element_annotation",
+        schema: {
+            type: "function",
+            function: {
+                name: "element_annotation",
+                description: "Handles annotations for elements",
+                parameters: {
+                    type: "object",
+                    properties: {
+                        element: {
+                            type: "string",
+                            description: "Relevant information from the provided element description.",
+                        },
+                        reason: {
+                            type: "string",
+                            description: "Explain why this element is selected. The reason should be clear and align with the task or purpose.",
+                        },
+                        element_annotation: {
+                            type: "string",
+                            description: "Return the unique element ID for the element on which the action needs to be performed.",
+                        },
+                    },
+                    required: ["element", "reason", "element_annotation"],
+                },
+            },
+        },
+    };
+    const llm = new llm_1.LLM({
+        provider: constants_1.DEFAULT_MODEL_PROVIDER,
+        defaultModel: constants_1.DEFAULT_MODEL,
+    });
+    const completion = await llm.createChatCompletion({
+        messages,
+        modelParameters: {
+            ...constants_1.DEFAULT_MODEL_PARAMETERS,
+            tool_choice: "required",
+            temperature: 1,
+        },
+        trace: annotationsSpan,
+        traceName: "get-element-from-action",
+        //@ts-ignore
+        tools: [annotationToolAction.schema],
+    });
+    const toolCall = completion?.tool_calls?.[0];
+    annotationsSpan?.end({ output: toolCall });
+    if (toolCall) {
+        const args = (0, utils_1.parseJson)(toolCall.function.arguments);
+        const isAnnotationPresentInKeys = annotationKeys.some((annotation) => annotation.elementID === args.element_annotation);
+        if (args.element_annotation !== "NA" && isAnnotationPresentInKeys) {
+            usedAnnotations.push(args.element_annotation);
+            return args.element_annotation;
+        }
+    }
+    else {
+        logger?.error(`No tool call found in completion. [Trace](${trace?.getTraceUrl()})`);
+    }
+    return;
+}
+// Scrolls the page and returns the reference to the frame in which the element is visible
+async function scroller({ elementDescription, page, trace, frameReference, logger, }) {
+    await scrollToTop(page);
+    if (frameReference) {
+        await scroll({
+            scrollBy: frameReference.scrollPosition,
+            page,
+            direction: "down",
+        });
+        return [frameReference];
+    }
+    let referenceImages = [];
+    let scrolledHeight = 0;
+    let isScrollAvailable = true;
+    const divAnnotation = await getDivAnnotationToScrollOn({
+        elementDescription,
+        page,
+        trace,
+        logger,
+    });
+    while (isScrollAvailable) {
+        // Perform action to check for visibility
+        const { isVisible, frameScreenshot } = await isElementVisibleInFrame({
+            elementDescription,
+            page,
+            trace,
+            logger,
+        });
+        if (isVisible) {
+            usedAnnotations = [];
+            referenceImages.push({
+                scrollPosition: scrolledHeight,
+                frameScreenshot,
+            });
+            // TODO: remove this to support multiple images
+            break;
+        }
+        isScrollAvailable = await isScrollable({
+            scrollDirection: "down",
+            page,
+            divAnnotation,
+        });
+        if (isScrollAvailable) {
+            scrolledHeight += await scroll({
+                page,
+                divAnnotation,
+                direction: "down",
+                logger,
+            });
+        }
+    }
+    if (referenceImages.length === 0) {
+        logger?.log("Element not found in the current scroll");
+    }
+    await (0, llm_1.flushAllTraces)();
+    return referenceImages;
+}
+exports.scroller = scroller;

package/dist/agent/utils.d.ts

@@ -0,0 +1,2 @@
+export declare function parseJson(args: string): any;
+//# sourceMappingURL=utils.d.ts.map

package/dist/agent/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/agent/utils.ts"],"names":[],"mappings":"AAAA,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,OAMrC"}

package/dist/agent/utils.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseJson = void 0;
+function parseJson(args) {
+    try {
+        return JSON.parse(args);
+    }
+    catch (e) {
+        console.error("Failed to parse JSON", e);
+    }
+}
+exports.parseJson = parseJson;

package/dist/browser-injected-scripts/annotate-elements.js

@@ -9,7 +9,10 @@
  * @param {string} options.markerClass - CSS class to apply to hint markers.
  * @returns {Object} An object containing annotations map and enable/disable methods.
  */
-function annotateClickableElements({ options = {}, preference = {} } = {}) {
+function annotateElementsWithPreference({
+  options = {},
+  preference = {},
+} = {}) {
   const {
     hintCharacterSet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ", // Default set of characters for hints
     maxHints = 1000, // Maximum number of hints to generate
@@ -40,31 +43,7 @@ function annotateClickableElements({ options = {}, preference = {} } = {}) {
       centerY >
         (windowToAnnotate.innerHeight || document.documentElement.clientHeight)
     ) {
-      // Determine the viewport dimensions
-      const viewportWidth =
-        windowToAnnotate.innerWidth || document.documentElement.clientWidth;
-      const viewportHeight =
-        windowToAnnotate.innerHeight || document.documentElement.clientHeight;
-
-      // Calculate the new scroll positions to bring the element into the center of the viewport
-      const newScrollX = centerX - viewportWidth / 2;
-      const newScrollY = centerY - viewportHeight / 2;
-
-      // Scroll the window to the new positions
-      windowToAnnotate.scrollTo({
-        top: newScrollY,
-        left: newScrollX,
-      });
-
-      const newRect = element.getBoundingClientRect();
-      const newCenterX = newRect.left + newRect.width / 2;
-      const newCenterY = newRect.top + newRect.height / 2;
-      const topElement = document.elementFromPoint(newCenterX, newCenterY);
-      const doesElementContainTopElement = element.contains(topElement);
-
-      // Restore the original scroll positions
-      windowToAnnotate.scrollTo(originalScrollX, originalScrollY);
-      return doesElementContainTopElement;
+      return false;
     }
 
     const topElement = windowToAnnotate.document.elementFromPoint(
@@ -332,10 +311,7 @@ function annotateClickableElements({ options = {}, preference = {} } = {}) {
     // Style the marker
     Object.assign(marker.style, {
       position: "absolute",
-      top: `${rect.top + windowToAnnotate.scrollY}px`,
-      left: `${rect.left + windowToAnnotate.scrollX}px`,
-      background:
-        "-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255, 247, 133)), to(rgb(255, 197, 66)))",
+      background: "rgb(255, 197, 66)",
       padding: "1px 3px 0px",
       borderRadius: "3px",
       border: "1px solid rgb(227, 190, 35)",
@@ -352,10 +328,29 @@ function annotateClickableElements({ options = {}, preference = {} } = {}) {
       fontFamily: "Helvetica, Arial, sans-serif",
       fontWeight: "bold",
       textShadow: "rgba(255, 255, 255, 0.6) 0px 1px 0px",
+      visibility: "hidden", // Setting the visibility to hidden initially, to get the height and width of marker
     });
 
-    // Attach the marker to the specified parent element
     parentElement.appendChild(marker);
+    let markerRect = marker.getBoundingClientRect();
+    let top = rect.top + windowToAnnotate.scrollY;
+    let left = rect.left + windowToAnnotate.scrollX;
+
+    // If the target element is smaller, we annotate outside the container
+    if (markerRect.height > rect.height - markerRect.height) {
+      top = top - markerRect.height;
+    }
+
+    if (markerRect.width > rect.width - markerRect.width) {
+      left = left - markerRect.width / 2;
+    }
+
+    // Applying the position and setting visibility
+    marker.style.top = `${top}px`;
+    marker.style.left = `${left}px`;
+    marker.style.visibility = "visible";
+
+    // Attach the marker to the specified parent element
     parentElements.push(parentElement);
     return marker;
   }
@@ -411,6 +406,31 @@ function annotateClickableElements({ options = {}, preference = {} } = {}) {
     return true;
   }
 
+  // This checks if the element is scrollable or not
+  function isElementScrollable(elem) {
+    function getComputedStyle(elem) {
+      return window.getComputedStyle(elem, null);
+    }
+
+    function getActualCss(elem, style) {
+      return getComputedStyle(elem)[style];
+    }
+
+    function isYScrollable(elem) {
+      return (
+        elem.offsetHeight < elem.scrollHeight &&
+        autoOrScroll(getActualCss(elem, "overflow-y"))
+      );
+    }
+
+    function autoOrScroll(text) {
+      return text == "scroll" || text == "auto";
+    }
+
+    // This doesn't annotate the elements with horizontal scroll
+    return isYScrollable(elem);
+  }
+
   // Initialize annotations for a given window (including iframes)
   function initializeAnnotations(windowToAnnotate, parentHints, depth) {
     const container =
@@ -422,39 +442,42 @@ function annotateClickableElements({ options = {}, preference = {} } = {}) {
     if (!container) return;
 
     // Filter for clickable elements
-    const clickableElements = Array.from(
+    const elementsToAnnotate = Array.from(
       windowToAnnotate.document.querySelectorAll("*"),
     ).filter((el) => {
-      //If preference is fill then it should only annotate input elements
-      if (preference.actionType === "fill") {
-        if (!isInputElement(el)) {
-          return false;
-        }
-      }
+      // Here based on the action type we filter the elements
+      // and annotate only those elements
+      switch (preference.actionType) {
+        case "fill":
+          return isInputElement(el);
 
-      //If preference is assert text then only text with the text to be asserted should be highlighted.
-      if (preference.actionType === "assert_text") {
-        return isRequiredTextPresent(el, preference.assertionText);
-      }
+        case "assert_text":
+          return isRequiredTextPresent(el, preference.assertionText);
 
-      const isClickable = isElementClickable(el, windowToAnnotate);
-      const isClickNotBlocked = isElementClickNotBlocked(el, windowToAnnotate);
-      return isClickable && isClickNotBlocked;
+        case "scroll":
+          return isElementScrollable(el);
+
+        default:
+          return (
+            isElementClickable(el, windowToAnnotate) &&
+            isElementClickNotBlocked(el, windowToAnnotate)
+          );
+      }
     });
     // Generate hint strings for the clickable elements
     const hints = generateHintStrings(
       hintCharacterSet,
-      Math.min(maxHints, clickableElements.length),
+      Math.min(maxHints, elementsToAnnotate.length),
     );
 
     // Create markers for the elements
-    clickableElements.slice(0, maxHints).forEach((el, index) => {
+    elementsToAnnotate.slice(0, maxHints).forEach((el, index) => {
       const hint = hints[index];
       const rect = el.getBoundingClientRect();
 
       // Use createHintMarker with the specified container
       createHintMarker(el, hint, container, windowToAnnotate);
-      el.style.boxShadow = `inset 0 0 0px 2px red`;
+      el.style.boxShadow = `inset 0 0 0px 1px red`;
 
       // Add element details to the annotations map
       annotationsMap[hint] = {

package/dist/browser-injected-scripts/annotate-elements.spec.js

@@ -1,9 +1,9 @@
 "use strict";
-// @ts-nocheck
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+// @ts-nocheck
 const test_1 = require("@playwright/test");
 const path_1 = __importDefault(require("path"));
 const action_tool_calls_1 = require("../agent/master/action-tool-calls");
@@ -14,7 +14,7 @@ const action_tool_calls_1 = require("../agent/master/action-tool-calls");
     });
     const annotations = await page.evaluate(() => {
         // eslint-disable-next-line no-undef
-        const { annotations } = annotateClickableElements();
+        const { annotations } = annotateElementsWithPreference();
         return Object.entries(annotations).map(([, config]) => ({
             innerText: config.node.innerText,
             tagName: config.node.tagName,
@@ -47,21 +47,6 @@ const action_tool_calls_1 = require("../agent/master/action-tool-calls");
             tagName: "A",
             href: "https://assets-test.empirical.run/contact",
         },
-        {
-            innerText: "Playwright\n(opens in a new tab)",
-            tagName: "A",
-            href: "https://github.com/microsoft/playwright",
-        },
-        {
-            innerText: "Meet with us",
-            tagName: "A",
-            href: "https://assets-test.empirical.run/contact",
-        },
-        {
-            innerText: "Privacy Policy",
-            tagName: "A",
-            href: "https://assets-test.empirical.run/privacy.html",
-        },
     ]);
 });
 (0, test_1.test)("should annotate all important items on quizizz page", async ({ page, }) => {
@@ -71,7 +56,7 @@ const action_tool_calls_1 = require("../agent/master/action-tool-calls");
     });
     const annotations = await page.evaluate(() => {
         // eslint-disable-next-line no-undef
-        const { annotations } = annotateClickableElements();
+        const { annotations } = annotateElementsWithPreference();
         return Object.entries(annotations).map(([hint, config]) => ({
             hint,
             innerText: config.node.innerText.toLowerCase().trim(),
@@ -159,7 +144,7 @@ const action_tool_calls_1 = require("../agent/master/action-tool-calls");
     };
     const annotations = await page.evaluate((preference) => {
         // eslint-disable-next-line no-undef
-        const { annotations } = annotateClickableElements({
+        const { annotations } = annotateElementsWithPreference({
             preference: preference,
         });
         return Object.entries(annotations).map(([hint, config]) => ({
@@ -184,7 +169,7 @@ const action_tool_calls_1 = require("../agent/master/action-tool-calls");
     };
     const annotations = await page.evaluate((preference) => {
         // eslint-disable-next-line no-undef
-        const { annotations } = annotateClickableElements({
+        const { annotations } = annotateElementsWithPreference({
             preference: preference,
         });
         return Object.entries(annotations).map(([hint, config]) => ({