@midscene/web 0.3.4 → 0.4.0

package/dist/lib/debug.js

@@ -330,106 +330,29 @@ var debug_exports = {};
 __export(debug_exports, {
   generateExtractData: () => generateExtractData,
   generateTestDataPath: () => generateTestDataPath,
+  getElementInfos: () => getElementInfos,
   writeFileSyncWithDir: () => writeFileSyncWithDir
 });
 module.exports = __toCommonJS(debug_exports);
 var import_node_fs2 = require("fs");
 var import_node_path2 = __toESM(require("path"));
-var import_image2 = require("@midscene/core/image");
 
-// src/debug/img/index.ts
-var import_node_assert = __toESM(require("assert"));
-var import_node_buffer = require("buffer");
-var import_sharp = __toESM(require("sharp"));
-var createSvgOverlay = (elements, imageWidth, imageHeight) => {
-  let svgContent = `<svg width="${imageWidth}" height="${imageHeight}" xmlns="http://www.w3.org/2000/svg">`;
-  const colors = [
-    { rect: "blue", text: "white" },
-    { rect: "green", text: "white" }
-  ];
-  svgContent += "<defs>";
-  elements.forEach((element, index) => {
-    svgContent += `
-      <clipPath id="clip${index}">
-        <rect x="${element.x}" y="${element.y}" width="${element.width}" height="${element.height}" />
-      </clipPath>
-    `;
-  });
-  svgContent += "</defs>";
-  elements.forEach((element, index) => {
-    const textWidth = element.label.length * 8;
-    const textHeight = 12;
-    const rectWidth = textWidth + 5;
-    const rectHeight = textHeight + 4;
-    let rectX = element.x - rectWidth;
-    let rectY = element.y + element.height / 2 - textHeight / 2 - 2;
-    let textX = rectX + rectWidth / 2;
-    let textY = rectY + rectHeight / 2 + 6;
-    if (rectX < 0) {
-      rectX = element.x;
-      rectY = element.y - rectHeight;
-      textX = rectX + rectWidth / 2;
-      textY = rectY + rectHeight / 2 + 6;
-    }
-    const color = colors[index % colors.length];
-    svgContent += `
-      <rect x="${element.x}" y="${element.y}" width="${element.width}" height="${element.height}" 
-            style="fill:none;stroke:${color.rect};stroke-width:4" clip-path="url(#clip${index})" />
-      <rect x="${rectX}" y="${rectY}" width="${rectWidth}" height="${rectHeight}" style="fill:${color.rect};" />
-      <text x="${textX}" y="${textY}" 
-            text-anchor="middle" dominant-baseline="middle" style="fill:${color.text};font-size:12px;font-weight:bold;">
-        ${element.label}
-      </text>
-    `;
-  });
-  svgContent += "</svg>";
-  return import_node_buffer.Buffer.from(svgContent);
-};
-var processImageElementInfo = async (options) => {
-  const base64Image = options.inputImgBase64.split(";base64,").pop();
-  (0, import_node_assert.default)(base64Image, "base64Image is undefined");
-  const imageBuffer = import_node_buffer.Buffer.from(base64Image, "base64");
-  const metadata = await (0, import_sharp.default)(imageBuffer).metadata();
-  const { width, height } = metadata;
-  if (width && height) {
-    const svgOverlay = createSvgOverlay(
-      options.elementsPositionInfo,
-      width,
-      height
-    );
-    const svgOverlayWithoutText = createSvgOverlay(
-      options.elementsPositionInfoWithoutText,
-      width,
-      height
-    );
-    const compositeElementInfoImgBase64 = await (0, import_sharp.default)(imageBuffer).composite([{ input: svgOverlay, blend: "over" }]).toBuffer().then((data) => {
-      return data.toString("base64");
-    }).catch((err) => {
-      throw err;
-    });
-    const compositeElementInfoImgWithoutTextBase64 = await (0, import_sharp.default)(imageBuffer).composite([{ input: svgOverlayWithoutText, blend: "over" }]).toBuffer().then((data) => {
-      return data.toString("base64");
-    }).catch((err) => {
-      throw err;
-    });
-    return {
-      compositeElementInfoImgBase64,
-      compositeElementInfoImgWithoutTextBase64
-    };
-  }
-  throw Error("Image processing failed because width or height is undefined");
-};
+// src/extractor/constants.ts
+var import_constants = require("@midscene/shared/constants");
+
+// src/debug/index.ts
+var import_img2 = require("@midscene/shared/img");
 
 // src/common/utils.ts
-var import_node_assert2 = __toESM(require("assert"));
+var import_node_assert = __toESM(require("assert"));
 var import_node_fs = __toESM(require("fs"));
 var import_node_path = __toESM(require("path"));
-var import_image = require("@midscene/core/image");
 var import_utils = require("@midscene/core/utils");
+var import_img = require("@midscene/shared/img");
 var import_dayjs = __toESM(require_dayjs_min());
 async function getElementInfosFromPage(page) {
   const pathDir = findNearestPackageJson(__dirname);
-  (0, import_node_assert2.default)(pathDir, `can't find pathDir, with ${__dirname}`);
+  (0, import_node_assert.default)(pathDir, `can't find pathDir, with ${__dirname}`);
   const scriptPath = import_node_path.default.join(pathDir, "./dist/script/htmlElement.js");
   const elementInfosScriptContent = (0, import_node_fs.readFileSync)(scriptPath, "utf-8");
   const extraReturnLogic = `${elementInfosScriptContent}midscene_element_inspector.extractTextWithPosition()`;
@@ -448,34 +371,6 @@ function findNearestPackageJson(dir) {
   return findNearestPackageJson(parentDir);
 }
 
-// src/debug/img/util.ts
-async function getElementInfos(page) {
-  const captureElementSnapshot = await getElementInfosFromPage(page);
-  const elementsPositionInfo = captureElementSnapshot.map((elementInfo) => {
-    return {
-      label: elementInfo.indexId.toString(),
-      x: elementInfo.rect.left,
-      y: elementInfo.rect.top,
-      width: elementInfo.rect.width,
-      height: elementInfo.rect.height,
-      attributes: elementInfo.attributes
-    };
-  });
-  const elementsPositionInfoWithoutText = elementsPositionInfo.filter(
-    (elementInfo) => {
-      if (elementInfo.attributes.nodeType === "TEXT Node" /* TEXT */) {
-        return false;
-      }
-      return true;
-    }
-  );
-  return {
-    elementsPositionInfo,
-    captureElementSnapshot,
-    elementsPositionInfoWithoutText
-  };
-}
-
 // src/debug/index.ts
 async function generateExtractData(page, targetDir, saveImgType) {
   const buffer = await page.screenshot({
@@ -495,15 +390,19 @@ async function generateExtractData(page, targetDir, saveImgType) {
   );
   const resizeOutputImgPath = import_node_path2.default.join(targetDir, "resize-output.png");
   const snapshotJsonPath = import_node_path2.default.join(targetDir, "element-snapshot.json");
+  const startTime = Date.now();
   const {
     compositeElementInfoImgBase64,
     compositeElementInfoImgWithoutTextBase64
-  } = await processImageElementInfo({
+  } = await (0, import_img2.processImageElementInfo)({
     elementsPositionInfo,
     elementsPositionInfoWithoutText,
     inputImgBase64
   });
-  const resizeImgBase64 = await (0, import_image2.resizeImg)(inputImgBase64);
+  const endTime = Date.now();
+  const executionTime = (endTime - startTime) / 1e3;
+  console.log(`Execution time: ${executionTime.toFixed(2)}s`);
+  const resizeImgBase64 = await (0, import_img2.resizeImg)(inputImgBase64);
   if (!(saveImgType == null ? void 0 : saveImgType.disableSnapshot)) {
     writeFileSyncWithDir(
       snapshotJsonPath,
@@ -511,25 +410,25 @@ async function generateExtractData(page, targetDir, saveImgType) {
     );
   }
   if (!(saveImgType == null ? void 0 : saveImgType.disableInputImage)) {
-    await (0, import_image2.saveBase64Image)({
+    await (0, import_img2.saveBase64Image)({
       base64Data: inputImgBase64,
       outputPath: inputImagePath
     });
   }
   if (!(saveImgType == null ? void 0 : saveImgType.disableOutputImage)) {
-    await (0, import_image2.saveBase64Image)({
+    await (0, import_img2.saveBase64Image)({
       base64Data: compositeElementInfoImgBase64,
       outputPath: outputImagePath
     });
   }
   if (!(saveImgType == null ? void 0 : saveImgType.disableOutputWithoutTextImg)) {
-    await (0, import_image2.saveBase64Image)({
+    await (0, import_img2.saveBase64Image)({
       base64Data: compositeElementInfoImgWithoutTextBase64,
       outputPath: outputWithoutTextImgPath
     });
   }
   if (!(saveImgType == null ? void 0 : saveImgType.disableResizeOutputImg)) {
-    await (0, import_image2.saveBase64Image)({
+    await (0, import_img2.saveBase64Image)({
       base64Data: resizeImgBase64,
       outputPath: resizeOutputImgPath
     });
@@ -555,9 +454,36 @@ function writeFileSyncWithDir(filePath, content, options = {}) {
   ensureDirectoryExistence(filePath);
   (0, import_node_fs2.writeFileSync)(filePath, content, options);
 }
+async function getElementInfos(page) {
+  const captureElementSnapshot = await getElementInfosFromPage(page);
+  const elementsPositionInfo = captureElementSnapshot.map((elementInfo) => {
+    return {
+      label: elementInfo.indexId.toString(),
+      x: elementInfo.rect.left,
+      y: elementInfo.rect.top,
+      width: elementInfo.rect.width,
+      height: elementInfo.rect.height,
+      attributes: elementInfo.attributes
+    };
+  });
+  const elementsPositionInfoWithoutText = elementsPositionInfo.filter(
+    (elementInfo) => {
+      if (elementInfo.attributes.nodeType === import_constants.NodeType.TEXT) {
+        return false;
+      }
+      return true;
+    }
+  );
+  return {
+    elementsPositionInfo,
+    captureElementSnapshot,
+    elementsPositionInfoWithoutText
+  };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   generateExtractData,
   generateTestDataPath,
+  getElementInfos,
   writeFileSyncWithDir
 });

package/dist/lib/index.js

@@ -360,8 +360,8 @@ var import_utils4 = require("@midscene/core/utils");
 // src/common/tasks.ts
 var import_node_assert2 = __toESM(require("assert"));
 var import_core = __toESM(require("@midscene/core"));
-var import_image2 = require("@midscene/core/image");
 var import_utils2 = require("@midscene/core/utils");
+var import_img2 = require("@midscene/shared/img");
 
 // src/common/task-cache.ts
 var TaskCache = class {
@@ -422,8 +422,8 @@ var TaskCache = class {
 var import_node_assert = __toESM(require("assert"));
 var import_node_fs = __toESM(require("fs"));
 var import_node_path = __toESM(require("path"));
-var import_image = require("@midscene/core/image");
 var import_utils = require("@midscene/core/utils");
+var import_img = require("@midscene/shared/img");
 var import_dayjs = __toESM(require_dayjs_min());
 
 // src/web-element.ts
@@ -456,14 +456,14 @@ async function parseContextFromWebPage(page, _opt) {
   const file = (0, import_utils.getTmpFile)("jpeg");
   await page.screenshot({ path: file, type: "jpeg", quality: 75 });
   const screenshotBuffer = (0, import_node_fs.readFileSync)(file);
-  const screenshotBase64 = (0, import_image.base64Encoded)(file);
+  const screenshotBase64 = (0, import_img.base64Encoded)(file);
   const captureElementSnapshot = await getElementInfosFromPage(page);
   const elementsInfo = await alignElements(
     screenshotBuffer,
     captureElementSnapshot,
     page
   );
-  const size = await (0, import_image.imageInfoOfBase64)(screenshotBase64);
+  const size = await (0, import_img.imageInfoOfBase64)(screenshotBase64);
   return {
     content: elementsInfo,
     size,
@@ -482,10 +482,10 @@ async function getElementInfosFromPage(page) {
 }
 var sizeThreshold = 3;
 async function alignElements(screenshotBuffer, elements, page) {
-  const textsAligned = [];
   const validElements = elements.filter((item) => {
     return item.rect.height >= sizeThreshold && item.rect.width >= sizeThreshold;
   });
+  const textsAligned = [];
   for (const item of validElements) {
     const { rect, id, content, attributes, locator } = item;
     textsAligned.push(
@@ -537,7 +537,7 @@ var PageTaskExecutor = class {
     const item = {
       type: "screenshot",
       ts: Date.now(),
-      screenshot: (0, import_image2.base64Encoded)(file),
+      screenshot: (0, import_img2.base64Encoded)(file),
       timing
     };
     return item;
@@ -1018,7 +1018,7 @@ ${errorTask == null ? void 0 : errorTask.errorStack}`);
     this.writeOutActionDumps();
     if (!(output == null ? void 0 : output.pass)) {
       const errMsg = msg || `Assertion failed: ${assertion}`;
-      const reasonMsg = `Reason: ${output == null ? void 0 : output.thought} || (no_reason)`;
+      const reasonMsg = `Reason: ${(output == null ? void 0 : output.thought) || "(no_reason)"}`;
       throw new Error(`${errMsg}
 ${reasonMsg}`);
     }
@@ -1245,120 +1245,12 @@ var PlaywrightAiFixture = () => {
 // src/debug/index.ts
 var import_node_fs3 = require("fs");
 var import_node_path3 = __toESM(require("path"));
-var import_image3 = require("@midscene/core/image");
 
-// src/debug/img/index.ts
-var import_node_assert3 = __toESM(require("assert"));
-var import_node_buffer = require("buffer");
-var import_sharp = __toESM(require("sharp"));
-var createSvgOverlay = (elements, imageWidth, imageHeight) => {
-  let svgContent = `<svg width="${imageWidth}" height="${imageHeight}" xmlns="http://www.w3.org/2000/svg">`;
-  const colors = [
-    { rect: "blue", text: "white" },
-    { rect: "green", text: "white" }
-  ];
-  svgContent += "<defs>";
-  elements.forEach((element, index) => {
-    svgContent += `
-      <clipPath id="clip${index}">
-        <rect x="${element.x}" y="${element.y}" width="${element.width}" height="${element.height}" />
-      </clipPath>
-    `;
-  });
-  svgContent += "</defs>";
-  elements.forEach((element, index) => {
-    const textWidth = element.label.length * 8;
-    const textHeight = 12;
-    const rectWidth = textWidth + 5;
-    const rectHeight = textHeight + 4;
-    let rectX = element.x - rectWidth;
-    let rectY = element.y + element.height / 2 - textHeight / 2 - 2;
-    let textX = rectX + rectWidth / 2;
-    let textY = rectY + rectHeight / 2 + 6;
-    if (rectX < 0) {
-      rectX = element.x;
-      rectY = element.y - rectHeight;
-      textX = rectX + rectWidth / 2;
-      textY = rectY + rectHeight / 2 + 6;
-    }
-    const color = colors[index % colors.length];
-    svgContent += `
-      <rect x="${element.x}" y="${element.y}" width="${element.width}" height="${element.height}" 
-            style="fill:none;stroke:${color.rect};stroke-width:4" clip-path="url(#clip${index})" />
-      <rect x="${rectX}" y="${rectY}" width="${rectWidth}" height="${rectHeight}" style="fill:${color.rect};" />
-      <text x="${textX}" y="${textY}" 
-            text-anchor="middle" dominant-baseline="middle" style="fill:${color.text};font-size:12px;font-weight:bold;">
-        ${element.label}
-      </text>
-    `;
-  });
-  svgContent += "</svg>";
-  return import_node_buffer.Buffer.from(svgContent);
-};
-var processImageElementInfo = async (options) => {
-  const base64Image = options.inputImgBase64.split(";base64,").pop();
-  (0, import_node_assert3.default)(base64Image, "base64Image is undefined");
-  const imageBuffer = import_node_buffer.Buffer.from(base64Image, "base64");
-  const metadata = await (0, import_sharp.default)(imageBuffer).metadata();
-  const { width, height } = metadata;
-  if (width && height) {
-    const svgOverlay = createSvgOverlay(
-      options.elementsPositionInfo,
-      width,
-      height
-    );
-    const svgOverlayWithoutText = createSvgOverlay(
-      options.elementsPositionInfoWithoutText,
-      width,
-      height
-    );
-    const compositeElementInfoImgBase64 = await (0, import_sharp.default)(imageBuffer).composite([{ input: svgOverlay, blend: "over" }]).toBuffer().then((data) => {
-      return data.toString("base64");
-    }).catch((err) => {
-      throw err;
-    });
-    const compositeElementInfoImgWithoutTextBase64 = await (0, import_sharp.default)(imageBuffer).composite([{ input: svgOverlayWithoutText, blend: "over" }]).toBuffer().then((data) => {
-      return data.toString("base64");
-    }).catch((err) => {
-      throw err;
-    });
-    return {
-      compositeElementInfoImgBase64,
-      compositeElementInfoImgWithoutTextBase64
-    };
-  }
-  throw Error("Image processing failed because width or height is undefined");
-};
-
-// src/debug/img/util.ts
-async function getElementInfos(page) {
-  const captureElementSnapshot = await getElementInfosFromPage(page);
-  const elementsPositionInfo = captureElementSnapshot.map((elementInfo) => {
-    return {
-      label: elementInfo.indexId.toString(),
-      x: elementInfo.rect.left,
-      y: elementInfo.rect.top,
-      width: elementInfo.rect.width,
-      height: elementInfo.rect.height,
-      attributes: elementInfo.attributes
-    };
-  });
-  const elementsPositionInfoWithoutText = elementsPositionInfo.filter(
-    (elementInfo) => {
-      if (elementInfo.attributes.nodeType === "TEXT Node" /* TEXT */) {
-        return false;
-      }
-      return true;
-    }
-  );
-  return {
-    elementsPositionInfo,
-    captureElementSnapshot,
-    elementsPositionInfoWithoutText
-  };
-}
+// src/extractor/constants.ts
+var import_constants = require("@midscene/shared/constants");
 
 // src/debug/index.ts
+var import_img3 = require("@midscene/shared/img");
 async function generateExtractData(page, targetDir, saveImgType) {
   const buffer = await page.screenshot({
     encoding: "base64"
@@ -1377,15 +1269,19 @@ async function generateExtractData(page, targetDir, saveImgType) {
   );
   const resizeOutputImgPath = import_node_path3.default.join(targetDir, "resize-output.png");
   const snapshotJsonPath = import_node_path3.default.join(targetDir, "element-snapshot.json");
+  const startTime = Date.now();
   const {
     compositeElementInfoImgBase64,
     compositeElementInfoImgWithoutTextBase64
-  } = await processImageElementInfo({
+  } = await (0, import_img3.processImageElementInfo)({
     elementsPositionInfo,
     elementsPositionInfoWithoutText,
     inputImgBase64
   });
-  const resizeImgBase64 = await (0, import_image3.resizeImg)(inputImgBase64);
+  const endTime = Date.now();
+  const executionTime = (endTime - startTime) / 1e3;
+  console.log(`Execution time: ${executionTime.toFixed(2)}s`);
+  const resizeImgBase64 = await (0, import_img3.resizeImg)(inputImgBase64);
   if (!(saveImgType == null ? void 0 : saveImgType.disableSnapshot)) {
     writeFileSyncWithDir(
       snapshotJsonPath,
@@ -1393,25 +1289,25 @@ async function generateExtractData(page, targetDir, saveImgType) {
     );
   }
   if (!(saveImgType == null ? void 0 : saveImgType.disableInputImage)) {
-    await (0, import_image3.saveBase64Image)({
+    await (0, import_img3.saveBase64Image)({
       base64Data: inputImgBase64,
       outputPath: inputImagePath
     });
   }
   if (!(saveImgType == null ? void 0 : saveImgType.disableOutputImage)) {
-    await (0, import_image3.saveBase64Image)({
+    await (0, import_img3.saveBase64Image)({
       base64Data: compositeElementInfoImgBase64,
       outputPath: outputImagePath
     });
   }
   if (!(saveImgType == null ? void 0 : saveImgType.disableOutputWithoutTextImg)) {
-    await (0, import_image3.saveBase64Image)({
+    await (0, import_img3.saveBase64Image)({
       base64Data: compositeElementInfoImgWithoutTextBase64,
       outputPath: outputWithoutTextImgPath
     });
   }
   if (!(saveImgType == null ? void 0 : saveImgType.disableResizeOutputImg)) {
-    await (0, import_image3.saveBase64Image)({
+    await (0, import_img3.saveBase64Image)({
       base64Data: resizeImgBase64,
       outputPath: resizeOutputImgPath
     });
@@ -1429,6 +1325,32 @@ function writeFileSyncWithDir(filePath, content, options = {}) {
   ensureDirectoryExistence(filePath);
   (0, import_node_fs3.writeFileSync)(filePath, content, options);
 }
+async function getElementInfos(page) {
+  const captureElementSnapshot = await getElementInfosFromPage(page);
+  const elementsPositionInfo = captureElementSnapshot.map((elementInfo) => {
+    return {
+      label: elementInfo.indexId.toString(),
+      x: elementInfo.rect.left,
+      y: elementInfo.rect.top,
+      width: elementInfo.rect.width,
+      height: elementInfo.rect.height,
+      attributes: elementInfo.attributes
+    };
+  });
+  const elementsPositionInfoWithoutText = elementsPositionInfo.filter(
+    (elementInfo) => {
+      if (elementInfo.attributes.nodeType === import_constants.NodeType.TEXT) {
+        return false;
+      }
+      return true;
+    }
+  );
+  return {
+    elementsPositionInfo,
+    captureElementSnapshot,
+    elementsPositionInfoWithoutText
+  };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   PlaywrightAiFixture,

package/dist/lib/playwright-report.js

@@ -336,8 +336,8 @@ module.exports = __toCommonJS(reporter_exports);
 var import_node_assert = __toESM(require("assert"));
 var import_node_fs = __toESM(require("fs"));
 var import_node_path = __toESM(require("path"));
-var import_image = require("@midscene/core/image");
 var import_utils = require("@midscene/core/utils");
+var import_img = require("@midscene/shared/img");
 var import_dayjs = __toESM(require_dayjs_min());
 function reportFileName(tag = "web") {
   const dateTimeInFileName = (0, import_dayjs.default)().format("YYYY-MM-DD_HH-mm-ss-SSS");

package/dist/lib/playwright.js

@@ -358,8 +358,8 @@ var import_utils4 = require("@midscene/core/utils");
 // src/common/tasks.ts
 var import_node_assert2 = __toESM(require("assert"));
 var import_core = __toESM(require("@midscene/core"));
-var import_image2 = require("@midscene/core/image");
 var import_utils2 = require("@midscene/core/utils");
+var import_img2 = require("@midscene/shared/img");
 
 // src/common/task-cache.ts
 var TaskCache = class {
@@ -420,8 +420,8 @@ var TaskCache = class {
 var import_node_assert = __toESM(require("assert"));
 var import_node_fs = __toESM(require("fs"));
 var import_node_path = __toESM(require("path"));
-var import_image = require("@midscene/core/image");
 var import_utils = require("@midscene/core/utils");
+var import_img = require("@midscene/shared/img");
 var import_dayjs = __toESM(require_dayjs_min());
 
 // src/web-element.ts
@@ -454,14 +454,14 @@ async function parseContextFromWebPage(page, _opt) {
   const file = (0, import_utils.getTmpFile)("jpeg");
   await page.screenshot({ path: file, type: "jpeg", quality: 75 });
   const screenshotBuffer = (0, import_node_fs.readFileSync)(file);
-  const screenshotBase64 = (0, import_image.base64Encoded)(file);
+  const screenshotBase64 = (0, import_img.base64Encoded)(file);
   const captureElementSnapshot = await getElementInfosFromPage(page);
   const elementsInfo = await alignElements(
     screenshotBuffer,
     captureElementSnapshot,
     page
   );
-  const size = await (0, import_image.imageInfoOfBase64)(screenshotBase64);
+  const size = await (0, import_img.imageInfoOfBase64)(screenshotBase64);
   return {
     content: elementsInfo,
     size,
@@ -480,10 +480,10 @@ async function getElementInfosFromPage(page) {
 }
 var sizeThreshold = 3;
 async function alignElements(screenshotBuffer, elements, page) {
-  const textsAligned = [];
   const validElements = elements.filter((item) => {
     return item.rect.height >= sizeThreshold && item.rect.width >= sizeThreshold;
   });
+  const textsAligned = [];
   for (const item of validElements) {
     const { rect, id, content, attributes, locator } = item;
     textsAligned.push(
@@ -535,7 +535,7 @@ var PageTaskExecutor = class {
     const item = {
       type: "screenshot",
       ts: Date.now(),
-      screenshot: (0, import_image2.base64Encoded)(file),
+      screenshot: (0, import_img2.base64Encoded)(file),
       timing
     };
     return item;
@@ -1016,7 +1016,7 @@ ${errorTask == null ? void 0 : errorTask.errorStack}`);
     this.writeOutActionDumps();
     if (!(output == null ? void 0 : output.pass)) {
       const errMsg = msg || `Assertion failed: ${assertion}`;
-      const reasonMsg = `Reason: ${output == null ? void 0 : output.thought} || (no_reason)`;
+      const reasonMsg = `Reason: ${(output == null ? void 0 : output.thought) || "(no_reason)"}`;
       throw new Error(`${errMsg}
 ${reasonMsg}`);
     }

package/dist/lib/puppeteer.js

@@ -355,8 +355,8 @@ var import_utils4 = require("@midscene/core/utils");
 // src/common/tasks.ts
 var import_node_assert2 = __toESM(require("assert"));
 var import_core = __toESM(require("@midscene/core"));
-var import_image2 = require("@midscene/core/image");
 var import_utils2 = require("@midscene/core/utils");
+var import_img2 = require("@midscene/shared/img");
 
 // src/common/task-cache.ts
 var TaskCache = class {
@@ -417,8 +417,8 @@ var TaskCache = class {
 var import_node_assert = __toESM(require("assert"));
 var import_node_fs = __toESM(require("fs"));
 var import_node_path = __toESM(require("path"));
-var import_image = require("@midscene/core/image");
 var import_utils = require("@midscene/core/utils");
+var import_img = require("@midscene/shared/img");
 var import_dayjs = __toESM(require_dayjs_min());
 
 // src/web-element.ts
@@ -451,14 +451,14 @@ async function parseContextFromWebPage(page, _opt) {
   const file = (0, import_utils.getTmpFile)("jpeg");
   await page.screenshot({ path: file, type: "jpeg", quality: 75 });
   const screenshotBuffer = (0, import_node_fs.readFileSync)(file);
-  const screenshotBase64 = (0, import_image.base64Encoded)(file);
+  const screenshotBase64 = (0, import_img.base64Encoded)(file);
   const captureElementSnapshot = await getElementInfosFromPage(page);
   const elementsInfo = await alignElements(
     screenshotBuffer,
     captureElementSnapshot,
     page
   );
-  const size = await (0, import_image.imageInfoOfBase64)(screenshotBase64);
+  const size = await (0, import_img.imageInfoOfBase64)(screenshotBase64);
   return {
     content: elementsInfo,
     size,
@@ -477,10 +477,10 @@ async function getElementInfosFromPage(page) {
 }
 var sizeThreshold = 3;
 async function alignElements(screenshotBuffer, elements, page) {
-  const textsAligned = [];
   const validElements = elements.filter((item) => {
     return item.rect.height >= sizeThreshold && item.rect.width >= sizeThreshold;
   });
+  const textsAligned = [];
   for (const item of validElements) {
     const { rect, id, content, attributes, locator } = item;
     textsAligned.push(
@@ -532,7 +532,7 @@ var PageTaskExecutor = class {
     const item = {
       type: "screenshot",
       ts: Date.now(),
-      screenshot: (0, import_image2.base64Encoded)(file),
+      screenshot: (0, import_img2.base64Encoded)(file),
       timing
     };
     return item;
@@ -1013,7 +1013,7 @@ ${errorTask == null ? void 0 : errorTask.errorStack}`);
     this.writeOutActionDumps();
     if (!(output == null ? void 0 : output.pass)) {
       const errMsg = msg || `Assertion failed: ${assertion}`;
-      const reasonMsg = `Reason: ${output == null ? void 0 : output.thought} || (no_reason)`;
+      const reasonMsg = `Reason: ${(output == null ? void 0 : output.thought) || "(no_reason)"}`;
       throw new Error(`${errMsg}
 ${reasonMsg}`);
     }