@empiricalrun/playwright-utils 0.21.0 → 0.21.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @empiricalrun/playwright-utils
 
+## 0.21.1
+
+### Patch Changes
+
+- d2513a2: fix: don't save screenshot to disk for visual assertions
+- 1ff54e7: fix: use CSS.escape for overlay text content and wrap in try-catch
+
 ## 0.21.0
 
 ### Minor Changes

package/dist/test/expect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"expect.d.ts","sourceRoot":"","sources":["../../src/test/expect.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAO7C,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,EAAE,MAAM,MAAM,CAAC;IACtB,IAAI,EAAE,OAAO,CAAC;CACf,CAAC;AA0BF,wBAAsB,WAAW,CAC/B,IAAI,EAAE,IAAI,EACV,eAAe,EAAE,MAAM,GACtB,OAAO,CAAC,mBAAmB,CAAC,CA6E9B"}
+{"version":3,"file":"expect.d.ts","sourceRoot":"","sources":["../../src/test/expect.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAO7C,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,EAAE,MAAM,MAAM,CAAC;IACtB,IAAI,EAAE,OAAO,CAAC;CACf,CAAC;AA0BF,wBAAsB,WAAW,CAC/B,IAAI,EAAE,IAAI,EACV,eAAe,EAAE,MAAM,GACtB,OAAO,CAAC,mBAAmB,CAAC,CA4E9B"}

package/dist/test/expect.js

@@ -30,7 +30,6 @@ a reason for your evaluation.
 async function toLookRight(page, pageDescription) {
     await (0, mouse_pointer_1.removeMousePointerHighlighter)(page);
     const screenshot = await page.screenshot();
-    await page.screenshot({ path: "screenshot-from-assertion.png" });
     const base64Image = screenshot.toString("base64");
     await (0, mouse_pointer_1.addHighlighterScriptsToPage)(page);
     const llm = new llm_1.LLM({

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;AAkHD,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":"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"}

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

@@ -75,46 +75,51 @@ function overlayDescription(element) {
     }
 }
 async function textContent(pageRef, element) {
-    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 += `#${tempEl.id}`;
+    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}>`;
             }
-            // Add all classes (if any)
-            if (tempEl.classList.length > 0) {
-                tempEl.classList.forEach((cls) => {
-                    selector += `.${cls}`;
-                });
+            if (!startTag || !endTag) {
+                return undefined;
             }
-            // Add any other attributes that might help narrow it down.
-            // (Skip 'id' and 'class' because they are already included.)
-            Array.from(tempEl.attributes).forEach((attr) => {
-                if (attr.name === "id" || attr.name === "class")
-                    return;
-                // Note: if attribute values contain special characters, consider escaping them.
-                selector += `[${attr.name}="${attr.value}"]`;
-            });
-            const realElement = document.querySelector(selector);
-            return realElement?.textContent?.trim();
-        }, [startTag, endTag]);
+            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) {
@@ -126,7 +131,11 @@ async function runAgentOnOverlay(pageRef, element) {
     const promptAddition = content
         ? `
 The popup can be identified with its text content:
-${content}`
+
+<popup_text_content>
+${content}
+</popup_text_content>
+`
         : ``;
     let task = isProductFruitsOverlay(element)
         ? `

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empiricalrun/playwright-utils",
-  "version": "0.21.0",
+  "version": "0.21.1",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
@@ -42,8 +42,8 @@
     "playwright-core": "1.47.1",
     "puppeteer-extra-plugin-recaptcha": "^3.6.8",
     "rimraf": "^6.0.1",
-    "@empiricalrun/r2-uploader": "^0.3.8",
     "@empiricalrun/llm": "^0.9.35",
+    "@empiricalrun/r2-uploader": "^0.3.8",
     "@empiricalrun/test-gen": "^0.45.1"
   },
   "scripts": {