@empiricalrun/playwright-utils 0.21.4 → 0.22.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @empiricalrun/playwright-utils
 
+## 0.22.0
+
+### Minor Changes
+
+- f9d8b70: feat: add caching to redo overlay dismissals faster
+
+### Patch Changes
+
+- f26142f: fix: browsing agent giving wrong executed action
+- 4b545ca: test: enable parallel test execution in playwright
+- Updated dependencies [f26142f]
+- Updated dependencies [112b429]
+  - @empiricalrun/test-gen@0.46.3
+
 ## 0.21.4
 
 ### Patch Changes

package/dist/overlay-tests/click.spec.js

@@ -7,30 +7,34 @@ const test_1 = require("@playwright/test");
 const http_server_1 = __importDefault(require("http-server"));
 const path_1 = __importDefault(require("path"));
 const test_2 = require("../test");
-let server;
-let PORT = 1234;
-test_1.test.beforeAll(async () => {
-    server = http_server_1.default.createServer({
-        root: path_1.default.join(process.cwd(), "test-data"),
-    });
-    // Start the server
-    await new Promise((resolve) => {
-        server.listen(PORT, () => {
-            console.log(`Server running at http://localhost:${PORT}`);
-            resolve(true);
-        });
-    });
+const test = test_1.test.extend({
+    server: [
+        // eslint-disable-next-line no-empty-pattern
+        async ({}, use, workerInfo) => {
+            const port = 1234 + workerInfo.workerIndex;
+            const server = http_server_1.default.createServer({
+                root: path_1.default.join(process.cwd(), "test-data"),
+            });
+            await new Promise((resolve) => {
+                server.listen(port, () => {
+                    console.log(`Server running at http://localhost:${port}`);
+                    resolve();
+                });
+            });
+            await use({
+                port,
+                baseURL: `http://localhost:${port}`,
+            });
+            server.close();
+        },
+        { scope: "worker" },
+    ],
 });
-test_1.test.afterAll(() => {
-    if (server) {
-        server.close();
-    }
-});
-test_1.test.beforeEach(async ({ page }) => {
-    (0, test_2.injectLocatorHighlightScripts)(page, test_1.test);
+test.beforeEach(async ({ page }) => {
+    (0, test_2.injectLocatorHighlightScripts)(page, test);
 });
-(0, test_1.test)("should dismiss survicate for click", async ({ page }) => {
-    await page.goto(`http://localhost:${PORT}/survey.html`);
+test("should dismiss survicate for click", async ({ page, server }) => {
+    await page.goto(`${server.baseURL}/survey.html`);
     // Assert that Survicate and button loads
     await (0, test_1.expect)(page.getByText("Start survey")).toBeVisible();
     const targetButton = page.getByRole("button", { name: "Target" });
@@ -43,8 +47,8 @@ test_1.test.beforeEach(async ({ page }) => {
     const finalZIndex = await targetButton.evaluate((el) => window.getComputedStyle(el).getPropertyValue("z-index"));
     (0, test_1.expect)(finalZIndex).toBe(initialZIndex);
 });
-(0, test_1.test)("should dismiss two-step overlay for click", async ({ page }) => {
-    await page.goto(`http://localhost:${PORT}/tos.html`);
+test("should dismiss two-step overlay for click", async ({ page, server }) => {
+    await page.goto(`${server.baseURL}/tos.html`);
     // Assert that button and overlay load
     await (0, test_1.expect)(page.getByRole("button", { name: "Target" })).toBeVisible();
     await (0, test_1.expect)(page.getByRole("heading", { name: "Terms of Service" })).toBeVisible();
@@ -52,8 +56,8 @@ test_1.test.beforeEach(async ({ page }) => {
     await page.getByRole("button", { name: "Target" }).click();
     await (0, test_1.expect)(page.getByRole("heading", { name: "Terms of Service" })).not.toBeVisible();
 });
-(0, test_1.test)("should choose and dismiss the correct overlay", async ({ page }) => {
-    await page.goto(`http://localhost:${PORT}/two-overlays.html`);
+test("should choose and dismiss the correct overlay", async ({ page, server, }) => {
+    await page.goto(`${server.baseURL}/two-overlays.html`);
     // Assert that button and overlays load
     await (0, test_1.expect)(page.getByRole("button", { name: "Target" })).toBeVisible();
     await (0, test_1.expect)(page.getByText("This is a toast message")).toBeVisible();
@@ -64,8 +68,8 @@ test_1.test.beforeEach(async ({ page }) => {
     await (0, test_1.expect)(page.getByText("This is a toast message")).not.toBeVisible();
     await (0, test_1.expect)(page.getByRole("button", { name: "Close" })).toBeVisible();
 });
-(0, test_1.test)("should not return hover patch method in error stack", async ({ page, }) => {
-    await page.goto(`http://localhost:${PORT}/tos.html`);
+test("should not return hover patch method in error stack", async ({ page, server, }) => {
+    await page.goto(`${server.baseURL}/tos.html`);
     let error;
     try {
         await page.locator("div.some-random-class-name").hover();
@@ -81,10 +85,10 @@ test_1.test.beforeEach(async ({ page }) => {
         .stack.split("\n")
         .find((line) => line.trim().startsWith("at "));
     (0, test_1.expect)(firstLineThatStartsWithAt).toBeDefined();
-    (0, test_1.expect)(firstLineThatStartsWithAt).toContain("overlay-tests/click.spec.ts:85");
+    (0, test_1.expect)(firstLineThatStartsWithAt).toContain("overlay-tests/click.spec.ts:97");
 });
-(0, test_1.test)("should not return click patch method in error stack", async ({ page, }) => {
-    await page.goto(`http://localhost:${PORT}/tos.html`);
+test("should not return click patch method in error stack", async ({ page, server, }) => {
+    await page.goto(`${server.baseURL}/tos.html`);
     let error;
     try {
         await page.locator("div.some-random-class-name").click();
@@ -100,20 +104,20 @@ test_1.test.beforeEach(async ({ page }) => {
         .stack.split("\n")
         .find((line) => line.trim().startsWith("at "));
     (0, test_1.expect)(firstLineThatStartsWithAt).toBeDefined();
-    (0, test_1.expect)(firstLineThatStartsWithAt).toContain("overlay-tests/click.spec.ts:106");
+    (0, test_1.expect)(firstLineThatStartsWithAt).toContain("overlay-tests/click.spec.ts:119");
 });
-test_1.test.fail("should return from master agent planner", async ({ page }) => {
-    await page.goto(`http://localhost:${PORT}/no-overlay.html`);
+test.fail("should return from master agent planner", async ({ page, server }) => {
+    await page.goto(`${server.baseURL}/no-overlay.html`);
     // Deliberately click on a button that doesn't exist
     await page.getByRole("button", { name: "Bottom Button" }).click();
 });
-(0, test_1.test)("should be able to pass through pf overlay", async ({ page }) => {
-    await page.goto(`http://localhost:${PORT}/productfruits.html`);
+test("should be able to pass through pf overlay", async ({ page, server }) => {
+    await page.goto(`${server.baseURL}/productfruits.html`);
     await page.locator("#sidebar-menu").getByText("Customise UI").click();
     await (0, test_1.expect)(page.getByText("This is the Customise UI page")).toBeVisible();
 });
-test_1.test.skip("should be able to fill form and dismiss overlay", async ({ page, }) => {
-    await page.goto(`http://localhost:${PORT}/overlay-form.html`);
+test("should be able to fill form and dismiss overlay", async ({ page, server, }) => {
+    await page.goto(`${server.baseURL}/overlay-form.html`);
     await page.getByRole("button", { name: "Target" }).click();
     await (0, test_1.expect)(page.getByText("Target was clicked")).toBeVisible();
 });

package/dist/test/scripts/pw-locator-patch/dismiss-overlays/cache.d.ts

@@ -0,0 +1,7 @@
+import type { Page } from "@playwright/test";
+import { OverlayElement } from "./types";
+export declare function setCodeToCache(pageRef: Page, element: OverlayElement | undefined, code: string): Promise<void>;
+export declare function executeFromCache(pageRef: Page, element: OverlayElement | undefined): Promise<{
+    success: boolean;
+}>;
+//# sourceMappingURL=cache.d.ts.map

package/dist/test/scripts/pw-locator-patch/dismiss-overlays/cache.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cache.d.ts","sourceRoot":"","sources":["../../../../../src/test/scripts/pw-locator-patch/dismiss-overlays/cache.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAI7C,OAAO,EAA6B,cAAc,EAAE,MAAM,SAAS,CAAC;AAcpE,wBAAsB,cAAc,CAClC,OAAO,EAAE,IAAI,EACb,OAAO,EAAE,cAAc,GAAG,SAAS,EACnC,IAAI,EAAE,MAAM,iBAiCb;AAED,wBAAsB,gBAAgB,CACpC,OAAO,EAAE,IAAI,EACb,OAAO,EAAE,cAAc,GAAG,SAAS,GAClC,OAAO,CAAC;IAAE,OAAO,EAAE,OAAO,CAAA;CAAE,CAAC,CAiC/B"}

package/dist/test/scripts/pw-locator-patch/dismiss-overlays/cache.js

@@ -0,0 +1,80 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.executeFromCache = exports.setCodeToCache = void 0;
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+const utils_1 = require("./utils");
+const CACHE_FILE = path_1.default.join(process.cwd(), ".empiricalrun", `overlay-cache.json`);
+function isCacheSupported(code) {
+    // Current release only supports caching for code that contains 1 `click` only
+    return code.includes("click") && code.trim().split("\n").length <= 1;
+}
+async function setCodeToCache(pageRef, element, code) {
+    if (!element || !element.interceptor) {
+        return;
+    }
+    if (!isCacheSupported(code)) {
+        return;
+    }
+    const obj = {
+        element: {
+            dom: element.interceptor,
+            textContent: (await (0, utils_1.textContent)(pageRef, element))?.trim() || "",
+        },
+        code,
+    };
+    let cache = {
+        version: "2025-03-06",
+        data: [],
+    };
+    try {
+        cache = JSON.parse(fs_1.default.readFileSync(CACHE_FILE, "utf8"));
+        cache.data.push(obj);
+    }
+    catch (err) {
+        cache = {
+            version: "2025-03-06",
+            data: [obj],
+        };
+    }
+    const dir = path_1.default.dirname(CACHE_FILE);
+    if (!fs_1.default.existsSync(dir)) {
+        fs_1.default.mkdirSync(dir, { recursive: true });
+    }
+    fs_1.default.writeFileSync(CACHE_FILE, JSON.stringify(cache, null, 2));
+}
+exports.setCodeToCache = setCodeToCache;
+async function executeFromCache(pageRef, element) {
+    if (!element || !element.interceptor) {
+        return { success: false };
+    }
+    try {
+        const cache = JSON.parse(fs_1.default.readFileSync(CACHE_FILE, "utf8"));
+        const text = (await (0, utils_1.textContent)(pageRef, element))?.trim() || "";
+        const match = cache.data.find((c) => {
+            return (c.element.dom === element.interceptor && c.element.textContent === text);
+        });
+        if (!match) {
+            return { success: false };
+        }
+        try {
+            console.log(`Executing for element: ${element} and code: ${match.code}`);
+            // Ref: https://davidwalsh.name/async-function-class
+            const AsyncFunction = Object.getPrototypeOf(async function () { }).constructor;
+            const exec = new AsyncFunction("page", match.code);
+            await exec(pageRef);
+            return { success: true };
+        }
+        catch (err) {
+            console.log(`Failed to execute ${match.code} for element: ${element}`);
+            return { success: false };
+        }
+    }
+    catch (err) {
+        return { success: false };
+    }
+}
+exports.executeFromCache = executeFromCache;

package/dist/test/scripts/pw-locator-patch/dismiss-overlays/index.d.ts

@@ -0,0 +1,6 @@
+import { Page } from "@playwright/test";
+import { OverlayElement } from "./types";
+export declare function isErrorSupported(errorMessage: string | undefined): boolean;
+export declare function runAgentOnOverlay(pageRef: Page, element: OverlayElement | undefined): Promise<void>;
+export declare function extractInterceptingElement(errorMessage: string): OverlayElement | undefined;
+//# sourceMappingURL=index.d.ts.map

package/dist/test/scripts/pw-locator-patch/dismiss-overlays/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/test/scripts/pw-locator-patch/dismiss-overlays/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAGxC,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAKzC,wBAAgB,gBAAgB,CAAC,YAAY,EAAE,MAAM,GAAG,SAAS,WAKhE;AAED,wBAAsB,iBAAiB,CACrC,OAAO,EAAE,IAAI,EACb,OAAO,EAAE,cAAc,GAAG,SAAS,iBAkDpC;AAED,wBAAgB,0BAA0B,CACxC,YAAY,EAAE,MAAM,GACnB,cAAc,GAAG,SAAS,CAiC5B"}

package/dist/test/scripts/pw-locator-patch/dismiss-overlays/index.js

@@ -0,0 +1,121 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.extractInterceptingElement = exports.runAgentOnOverlay = exports.isErrorSupported = void 0;
+const run_1 = require("@empiricalrun/test-gen/agent/master/run");
+const cache_1 = require("./cache");
+const utils_1 = require("./utils");
+const ERROR_SUBSTRING_INTERCEPTION = "intercepts pointer events";
+function isErrorSupported(errorMessage) {
+    if (!errorMessage) {
+        return false;
+    }
+    return errorMessage.includes(ERROR_SUBSTRING_INTERCEPTION);
+}
+exports.isErrorSupported = isErrorSupported;
+async function runAgentOnOverlay(pageRef, element) {
+    const text = await (0, utils_1.textContent)(pageRef, element);
+    let task = `
+Find a way to dismiss the popup. If the popup is non dismissible or there is no popup then return immediately.
+Also note that you just need to dismiss popup and do nothing else.`;
+    if ((0, utils_1.isProductFruitsOverlay)(element)) {
+        // Special handling for product fruits overlay: Overwrite the task
+        task = `
+We are attempting to do a click action on Target element.
+
+This action is failing because our Target element is covered with another element (called Overlapper). 
+
+The Overlapper element can be identifed with the following text content:
+
+<overlapper_element_text_content>
+${text}
+</overlapper_element_text_content>
+
+The only way to work around this is to Click on any other sidebar link element.
+
+Don't reattempt the click on Target element, your job is done after the first click.
+`;
+    }
+    else {
+        // Append overlay text content to the task for better context
+        const promptAddition = text
+            ? `
+  The popup can be identified with its text content:
+  
+  <popup_text_content>
+  ${text}
+  </popup_text_content>
+  `
+            : ``;
+        task += `${promptAddition}`;
+    }
+    const { success } = await (0, cache_1.executeFromCache)(pageRef, element);
+    if (success) {
+        return;
+    }
+    const result = await (0, run_1.createTestUsingMasterAgent)({
+        task,
+        page: pageRef,
+        options: {
+            useActionSpecificAnnotations: true,
+        },
+    });
+    await (0, cache_1.setCodeToCache)(pageRef, element, result.code);
+}
+exports.runAgentOnOverlay = runAgentOnOverlay;
+function extractInterceptingElement(errorMessage) {
+    // This extract element and parent info from interception error message
+    // Note that error message from the last retry is returned.
+    //
+    // [Depends on playwright error formatting]
+    // Upstream ref for error line
+    // https://github.com/microsoft/playwright/blob/bd74fc496461cc3c76b6d5def48580e2f535dac1/packages/playwright-core/src/server/dom.ts#L354
+    //
+    // Upstream ref for element description (with or without subtree)
+    // https://github.com/microsoft/playwright/blob/bd74fc496461cc3c76b6d5def48580e2f535dac1/packages/playwright-core/src/server/injected/injectedScript.ts#L938
+    const htmlElementRegex = /<([a-z][a-z0-9]*)\s+([^>]*)>/gi;
+    const linesWithElements = errorMessage
+        .split("\n")
+        .map(removeAnsiCodes)
+        .filter((line) => line.includes(ERROR_SUBSTRING_INTERCEPTION));
+    const lastSuchLine = linesWithElements.pop();
+    if (!lastSuchLine) {
+        return undefined;
+    }
+    const elements = findAllMatches(lastSuchLine, htmlElementRegex);
+    if (!elements) {
+        return undefined;
+    }
+    else if (elements.length === 1) {
+        return {
+            interceptor: elements[0].match,
+            parent: undefined,
+        };
+    }
+    else if (elements.length > 1) {
+        return {
+            interceptor: elements[0].match,
+            parent: elements[1]?.match,
+        };
+    }
+}
+exports.extractInterceptingElement = extractInterceptingElement;
+function removeAnsiCodes(str) {
+    const ansiRegex = new RegExp(String.raw `\u001b\[[0-9;]*m`, "g");
+    return str.replace(ansiRegex, "");
+}
+function findAllMatches(str, regex) {
+    if (!regex.global) {
+        regex = new RegExp(regex.source, regex.flags + "g");
+    }
+    const matches = [];
+    let match;
+    while ((match = regex.exec(str)) !== null) {
+        matches.push({
+            match: match[0],
+            index: match.index,
+            groups: match.groups || {},
+            captures: match.slice(1),
+        });
+    }
+    return matches;
+}

package/dist/test/scripts/pw-locator-patch/dismiss-overlays/types.d.ts

@@ -0,0 +1,16 @@
+export type OverlayElement = {
+    interceptor: string;
+    parent: string | undefined;
+};
+export type CacheObject = {
+    element: {
+        dom: string;
+        textContent: string;
+    };
+    code: string;
+};
+export type OverlayCache = {
+    version: "2025-03-06";
+    data: Array<CacheObject>;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/test/scripts/pw-locator-patch/dismiss-overlays/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/test/scripts/pw-locator-patch/dismiss-overlays/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,OAAO,EAAE;QACP,GAAG,EAAE,MAAM,CAAC;QACZ,WAAW,EAAE,MAAM,CAAC;KACrB,CAAC;IACF,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,EAAE,YAAY,CAAC;IACtB,IAAI,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;CAC1B,CAAC"}

package/dist/test/scripts/pw-locator-patch/dismiss-overlays/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/test/scripts/pw-locator-patch/dismiss-overlays/utils.d.ts

@@ -0,0 +1,6 @@
+import type { Page } from "@playwright/test";
+import { OverlayElement } from "./types";
+export declare function overlayDescription(element: OverlayElement | undefined): string | undefined;
+export declare function isProductFruitsOverlay(element: OverlayElement | undefined): boolean | undefined;
+export declare function textContent(pageRef: Page, element: OverlayElement | undefined): Promise<string | undefined>;
+//# sourceMappingURL=utils.d.ts.map

package/dist/test/scripts/pw-locator-patch/dismiss-overlays/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../src/test/scripts/pw-locator-patch/dismiss-overlays/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAE7C,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,cAAc,GAAG,SAAS,sBASrE;AAED,wBAAgB,sBAAsB,CAAC,OAAO,EAAE,cAAc,GAAG,SAAS,uBAKzE;AAED,wBAAsB,WAAW,CAC/B,OAAO,EAAE,IAAI,EACb,OAAO,EAAE,cAAc,GAAG,SAAS,+BAiDpC"}

package/dist/test/scripts/pw-locator-patch/dismiss-overlays/utils.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.textContent = exports.isProductFruitsOverlay = exports.overlayDescription = void 0;
+function overlayDescription(element) {
+    if (element) {
+        const { interceptor, parent } = element;
+        if (parent) {
+            return `${interceptor} inside ${parent}`;
+        }
+        else {
+            return `${interceptor}`;
+        }
+    }
+}
+exports.overlayDescription = overlayDescription;
+function isProductFruitsOverlay(element) {
+    return (element?.parent?.includes("productfruits--container") ||
+        element?.interceptor.includes("productfruits--container"));
+}
+exports.isProductFruitsOverlay = isProductFruitsOverlay;
+async function textContent(pageRef, element) {
+    try {
+        if (element) {
+            const { interceptor, parent } = element;
+            let startTag = parent ? parent : interceptor;
+            let endTag;
+            const match = startTag.match(/^<\s*([^\s>]+)/);
+            if (match) {
+                const tagName = match[1]; // "div"
+                endTag = `</${tagName}>`;
+            }
+            if (!startTag || !endTag) {
+                return undefined;
+            }
+            return await pageRef.evaluate((tags) => {
+                const [startTag, endTag] = tags;
+                const htmlString = `${startTag}temp${endTag}`;
+                const parser = new DOMParser();
+                const doc = parser.parseFromString(htmlString, "text/html");
+                const tempEl = doc.body.firstElementChild;
+                let selector = tempEl.tagName.toLowerCase(); // start with the tag name, e.g., 'div'
+                // If there's an id, add it (id is unique and very specific)
+                if (tempEl.id) {
+                    selector += `#${CSS.escape(tempEl.id)}`;
+                }
+                // Add classes individually, escaping each one
+                if (tempEl.classList.length > 0) {
+                    Array.from(tempEl.classList).forEach((cls) => {
+                        selector += `.${CSS.escape(cls)}`;
+                    });
+                }
+                // Add other attributes, being careful with escaping
+                Array.from(tempEl.attributes).forEach((attr) => {
+                    if (attr.name === "id" || attr.name === "class")
+                        return;
+                    selector += `[${attr.name}="${attr.value.replace(/"/g, '\\"')}"]`;
+                });
+                console.log("Generated selector:", selector);
+                const realElement = document.querySelector(selector);
+                return realElement?.textContent?.trim();
+            }, [startTag, endTag]);
+        }
+    }
+    catch (err) {
+        console.error("Unable to determine text content for overlay:", err);
+        return undefined;
+    }
+}
+exports.textContent = textContent;

package/dist/test/scripts/pw-locator-patch/highlight/click.d.ts

@@ -1,12 +1,6 @@
 import type { Locator } from "@playwright/test";
 import { TestFn } from "../../types";
-type OverlayElement = {
-    interceptor: string;
-    parent: string | undefined;
-};
-export declare function extractInterceptingElement(errorMessage: string): OverlayElement | undefined;
 export declare function patchClick(LocatorClass: Function & {
     prototype: Locator;
 }, testFn: TestFn): void;
-export {};
 //# sourceMappingURL=click.d.ts.map

package/dist/test/scripts/pw-locator-patch/highlight/click.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"click.d.ts","sourceRoot":"","sources":["../../../../../src/test/scripts/pw-locator-patch/highlight/click.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAQ,MAAM,kBAAkB,CAAC;AAEtD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AA8BrC,KAAK,cAAc,GAAG;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;CAC5B,CAAC;AAEF,wBAAgB,0BAA0B,CACxC,YAAY,EAAE,MAAM,GACnB,cAAc,GAAG,SAAS,CAiC5B;AA0HD,wBAAgB,UAAU,CACxB,YAAY,EAAE,QAAQ,GAAG;IAAE,SAAS,EAAE,OAAO,CAAA;CAAE,EAC/C,MAAM,EAAE,MAAM,QA+Df"}
+{"version":3,"file":"click.d.ts","sourceRoot":"","sources":["../../../../../src/test/scripts/pw-locator-patch/highlight/click.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAqBrC,wBAAgB,UAAU,CACxB,YAAY,EAAE,QAAQ,GAAG;IAAE,SAAS,EAAE,OAAO,CAAA;CAAE,EAC/C,MAAM,EAAE,MAAM,QA+Df"}

package/dist/test/scripts/pw-locator-patch/highlight/click.js

@@ -1,171 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.patchClick = exports.extractInterceptingElement = void 0;
-const run_1 = require("@empiricalrun/test-gen/agent/master/run");
-const utils_1 = require("../utils");
+exports.patchClick = void 0;
+const dismiss_overlays_1 = require("../dismiss-overlays");
+const utils_1 = require("../dismiss-overlays/utils");
+const utils_2 = require("../utils");
 // Static flag to track if click has been patched
 const isClickPatched = new WeakMap();
-const ERROR_SUBSTRING_INTERCEPTION = "intercepts pointer events";
-function removeAnsiCodes(str) {
-    const ansiRegex = new RegExp(String.raw `\u001b\[[0-9;]*m`, "g");
-    return str.replace(ansiRegex, "");
-}
-function findAllMatches(str, regex) {
-    if (!regex.global) {
-        regex = new RegExp(regex.source, regex.flags + "g");
-    }
-    const matches = [];
-    let match;
-    while ((match = regex.exec(str)) !== null) {
-        matches.push({
-            match: match[0],
-            index: match.index,
-            groups: match.groups || {},
-            captures: match.slice(1),
-        });
-    }
-    return matches;
-}
-function extractInterceptingElement(errorMessage) {
-    // This extract element and parent info from interception error message
-    // Note that error message from the last retry is returned.
-    //
-    // [Depends on playwright error formatting]
-    // Upstream ref for error line
-    // https://github.com/microsoft/playwright/blob/bd74fc496461cc3c76b6d5def48580e2f535dac1/packages/playwright-core/src/server/dom.ts#L354
-    //
-    // Upstream ref for element description (with or without subtree)
-    // https://github.com/microsoft/playwright/blob/bd74fc496461cc3c76b6d5def48580e2f535dac1/packages/playwright-core/src/server/injected/injectedScript.ts#L938
-    const htmlElementRegex = /<([a-z][a-z0-9]*)\s+([^>]*)>/gi;
-    const linesWithElements = errorMessage
-        .split("\n")
-        .map(removeAnsiCodes)
-        .filter((line) => line.includes(ERROR_SUBSTRING_INTERCEPTION));
-    const lastSuchLine = linesWithElements.pop();
-    if (!lastSuchLine) {
-        return undefined;
-    }
-    const elements = findAllMatches(lastSuchLine, htmlElementRegex);
-    if (!elements) {
-        return undefined;
-    }
-    else if (elements.length === 1) {
-        return {
-            interceptor: elements[0].match,
-            parent: undefined,
-        };
-    }
-    else if (elements.length > 1) {
-        return {
-            interceptor: elements[0].match,
-            parent: elements[1]?.match,
-        };
-    }
-}
-exports.extractInterceptingElement = extractInterceptingElement;
-function overlayDescription(element) {
-    if (element) {
-        const { interceptor, parent } = element;
-        if (parent) {
-            return `${interceptor} inside ${parent}`;
-        }
-        else {
-            return `${interceptor}`;
-        }
-    }
-}
-async function textContent(pageRef, element) {
-    try {
-        if (element) {
-            const { interceptor, parent } = element;
-            let startTag = parent ? parent : interceptor;
-            let endTag;
-            const match = startTag.match(/^<\s*([^\s>]+)/);
-            if (match) {
-                const tagName = match[1]; // "div"
-                endTag = `</${tagName}>`;
-            }
-            if (!startTag || !endTag) {
-                return undefined;
-            }
-            return await pageRef.evaluate((tags) => {
-                const [startTag, endTag] = tags;
-                const htmlString = `${startTag}temp${endTag}`;
-                const parser = new DOMParser();
-                const doc = parser.parseFromString(htmlString, "text/html");
-                const tempEl = doc.body.firstElementChild;
-                let selector = tempEl.tagName.toLowerCase(); // start with the tag name, e.g., 'div'
-                // If there's an id, add it (id is unique and very specific)
-                if (tempEl.id) {
-                    selector += `#${CSS.escape(tempEl.id)}`;
-                }
-                // Add classes individually, escaping each one
-                if (tempEl.classList.length > 0) {
-                    Array.from(tempEl.classList).forEach((cls) => {
-                        selector += `.${CSS.escape(cls)}`;
-                    });
-                }
-                // Add other attributes, being careful with escaping
-                Array.from(tempEl.attributes).forEach((attr) => {
-                    if (attr.name === "id" || attr.name === "class")
-                        return;
-                    selector += `[${attr.name}="${attr.value.replace(/"/g, '\\"')}"]`;
-                });
-                console.log("Generated selector:", selector);
-                const realElement = document.querySelector(selector);
-                return realElement?.textContent?.trim();
-            }, [startTag, endTag]);
-        }
-    }
-    catch (err) {
-        console.error("Unable to determine text content for overlay:", err);
-        return undefined;
-    }
-}
-function isProductFruitsOverlay(element) {
-    return (element?.parent?.includes("productfruits--container") ||
-        element?.interceptor.includes("productfruits--container"));
-}
-async function runAgentOnOverlay(pageRef, element) {
-    const content = await textContent(pageRef, element);
-    const promptAddition = content
-        ? `
-The popup can be identified with its text content:
-
-<popup_text_content>
-${content}
-</popup_text_content>
-`
-        : ``;
-    let task = isProductFruitsOverlay(element)
-        ? `
-We are attempting to do a click action on Target element.
-
-This action is failing because our Target element is covered with another element (called Overlapper). 
-
-The Overlapper element can be identifed with the following text content:
-
-<overlapper_element_text_content>
-${content}
-</overlapper_element_text_content>
-
-The only way to work around this is to Click on any other sidebar link element.
-
-Don't reattempt the click on Target element, your job is done after the first click.
-`
-        : `
-Find a way to dismiss the popup. If the popup is non dismissible or there is no popup then return immediately.
-Also note that you just need to dismiss popup and do nothing else.
-
-${promptAddition}`;
-    await (0, run_1.createTestUsingMasterAgent)({
-        task,
-        page: pageRef,
-        options: {
-            useActionSpecificAnnotations: true,
-        },
-    });
-}
 function annotateForReport(testFn, description) {
     console.log(`[Overlay dismissal]: ${description}`);
     testFn.info().annotations.push({
@@ -181,7 +21,7 @@ function patchClick(LocatorClass, testFn) {
     //ref: github.com/microsoft/playwright/blob/69287f26bc514b740eac40160503d6fac8185d37/packages/playwright-core/src/client/locator.ts#L255
     LocatorClass.prototype.click = async function (options) {
         let result;
-        const stepName = `locator.click(${(0, utils_1.description)(this)})`;
+        const stepName = `locator.click(${(0, utils_2.description)(this)})`;
         await testFn.step(stepName, async () => {
             try {
                 result = await originalClick.apply(this, [options]);
@@ -194,19 +34,19 @@ function patchClick(LocatorClass, testFn) {
                     // Happening during test-gen, we ignore this
                     throw originalError;
                 }
-                if (!originalError.message?.includes(ERROR_SUBSTRING_INTERCEPTION)) {
+                if (!(0, dismiss_overlays_1.isErrorSupported)(originalError.message)) {
                     throw originalError;
                 }
                 let overlayElement = undefined;
                 try {
-                    overlayElement = extractInterceptingElement(originalError.message);
+                    overlayElement = (0, dismiss_overlays_1.extractInterceptingElement)(originalError.message);
                 }
                 catch (err) {
                     // Ignoring this error
                 }
-                annotateForReport(testFn, `Attempting to auto-dismiss overlay: ${overlayDescription(overlayElement)}`);
+                annotateForReport(testFn, `Attempting to auto-dismiss overlay: ${(0, utils_1.overlayDescription)(overlayElement)}`);
                 try {
-                    await runAgentOnOverlay(this._frame._page, overlayElement);
+                    await (0, dismiss_overlays_1.runAgentOnOverlay)(this._frame._page, overlayElement);
                 }
                 catch (agentError) {
                     annotateForReport(testFn, `Error in overlay dismiss: ${agentError.toString()}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empiricalrun/playwright-utils",
-  "version": "0.21.4",
+  "version": "0.22.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
@@ -44,7 +44,7 @@
     "rimraf": "^6.0.1",
     "@empiricalrun/llm": "^0.9.35",
     "@empiricalrun/r2-uploader": "^0.3.8",
-    "@empiricalrun/test-gen": "^0.46.2"
+    "@empiricalrun/test-gen": "^0.46.3"
   },
   "scripts": {
     "dev": "tsc --build --watch",

package/playwright.config.ts

@@ -8,6 +8,8 @@ export default defineConfig({
   // Test timeout needs to be large enough for master agent etc.
   // to run overlay dismissal. Action timeout can be small.
   timeout: 90_000,
+  fullyParallel: true,
+  workers: "50%",
   use: {
     // Setting user agent for headed browser because Survicate
     // uses this to detect headless and not render in that scenario