@stablyai/internal-playwright-core 0.1.0

package/lib/server/stably/autohealing/elementHandleFromCoordinates.js

@@ -0,0 +1,64 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var elementHandleFromCoordinates_exports = {};
+__export(elementHandleFromCoordinates_exports, {
+  getElementHandleFromCoordinates: () => getElementHandleFromCoordinates
+});
+module.exports = __toCommonJS(elementHandleFromCoordinates_exports);
+async function getElementHandleFromCoordinates(frame, coordinates) {
+  try {
+    const viewportSize = frame._page.emulatedSize()?.viewport;
+    if (coordinates[0] < 0 || coordinates[1] < 0 || coordinates[0] > (viewportSize?.width || 0) || coordinates[1] > (viewportSize?.height || 0))
+      throw new Error(`Coordinates [${coordinates[0]}, ${coordinates[1]}] are outside viewport bounds ${viewportSize?.width}x${viewportSize?.height}`);
+    const handle = await frame.evaluateExpressionHandle(`document.elementFromPoint(${coordinates[0]}, ${coordinates[1]})`);
+    const isIframe = await handle.isIframeElement();
+    if (isIframe && isIframe !== "error:notconnected") {
+      const contentFrame = await handle.contentFrame();
+      if (contentFrame) {
+        const box = await handle.boundingBox();
+        if (box) {
+          const style = await handle.evaluateInUtility(([injected, iframe]) => injected.describeIFrameStyle(iframe), {}).catch(() => null);
+          if (style && style !== "error:notconnected" && style !== "transformed") {
+            const frameCoordinates = [
+              coordinates[0] - box.x - style.left,
+              coordinates[1] - box.y - style.top
+            ];
+            await handle.dispose();
+            return await getElementHandleFromCoordinates(contentFrame, frameCoordinates);
+          }
+        }
+      }
+    }
+    const { boundingBox, shadowRoot } = await handle.evaluate((element) => ({
+      boundingBox: element.getBoundingClientRect(),
+      shadowRoot: element.shadowRoot
+    }));
+    if (!boundingBox || shadowRoot) {
+      await handle.dispose();
+      throw new Error(shadowRoot ? "Element is a shadow root" : "Element has no bounding box");
+    }
+    return { handle, frame };
+  } catch (e) {
+    throw e;
+  }
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getElementHandleFromCoordinates
+});

package/lib/server/stably/autohealing/healingService.js

@@ -0,0 +1,228 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var healingService_exports = {};
+__export(healingService_exports, {
+  attemptAutohealLocator: () => attemptAutohealLocator,
+  attemptToHaveScreenshotHealing: () => attemptToHaveScreenshotHealing,
+  getHealingConfig: () => getHealingConfig,
+  healLocator: () => healLocator,
+  isHealingEnabled: () => isHealingEnabled,
+  setHealingConfig: () => setHealingConfig
+});
+module.exports = __toCommonJS(healingService_exports);
+var import_stepContext = require("playwright/lib/worker/stepContext");
+var import_globals = require("playwright/lib/common/globals");
+var import_stablyApiCaller = require("../ai-tools/stablyApiCaller");
+var import_elementHandleFromCoordinates = require("./elementHandleFromCoordinates");
+var import_screenshotFrame = require("./screenshotFrame");
+var import_locatorGenerators = require("../../../utils/isomorphic/locatorGenerators");
+var import_stablyApiCaller2 = require("../ai-tools/stablyApiCaller");
+const defaultConfig = {
+  enabled: false,
+  timeout: 3e4
+};
+let globalHealingConfig = { ...defaultConfig };
+function setHealingConfig(config) {
+  globalHealingConfig = { ...defaultConfig, ...config };
+}
+function getHealingConfig() {
+  return { ...globalHealingConfig };
+}
+function isHealingEnabled() {
+  return globalHealingConfig.enabled;
+}
+async function healLocator({
+  frame,
+  selector,
+  description,
+  actionName
+}) {
+  if (!description) {
+    return {
+      success: false,
+      message: "No description provided for healing. Use .describe() to enable auto-healing."
+    };
+  }
+  const config = getHealingConfig();
+  try {
+    const screenshot = await (0, import_screenshotFrame.captureScreenshot)(frame);
+    const aiResponse = await (0, import_stablyApiCaller.callAiToAutohealLocator)({
+      description,
+      screenshot,
+      originalSelector: selector,
+      actionName,
+      model: config.model
+    });
+    const { coordinate, reasoning } = aiResponse;
+    if (!coordinate) {
+      return {
+        success: false,
+        message: "AI could not find a suitable element.",
+        description,
+        reasoning
+      };
+    }
+    const { handle, frame: elementFrame } = await (0, import_elementHandleFromCoordinates.getElementHandleFromCoordinates)(frame, [coordinate[0], coordinate[1]]);
+    const context = await elementFrame._mainContext();
+    const injectedScript = await context.injectedScript();
+    const elementSelector = await injectedScript.evaluate((injected, element) => {
+      const result = injected.generateSelector(element, {
+        testIdAttributeName: ""
+      });
+      return result.selector;
+    }, handle);
+    let newSelector = elementSelector;
+    let locatorString = (0, import_locatorGenerators.asLocator)("javascript", elementSelector);
+    if (elementFrame !== frame) {
+      try {
+        const frameElement = await elementFrame.frameElement();
+        if (frameElement) {
+          const parentContext = await frame._mainContext();
+          const parentInjectedScript = await parentContext.injectedScript();
+          const frameSelector = await parentInjectedScript.evaluate((injected, element) => {
+            const result = injected.generateSelector(element, {
+              testIdAttributeName: "",
+              omitInternalEngines: true
+              // omit internal engines for frame selector
+            });
+            return result.selector;
+          }, frameElement);
+          newSelector = `${frameSelector} >> internal:control=enter-frame >> ${elementSelector}`;
+          locatorString = `locator('${frameSelector}').contentFrame().locator('${elementSelector}')`;
+          await frameElement.dispose();
+        }
+      } catch {
+        throw new Error("Failed to get iframe selector");
+      }
+    }
+    await handle.dispose();
+    return {
+      success: true,
+      message: "AI found a suitable element for autohealing.",
+      newSelector,
+      newLocator: locatorString,
+      description,
+      reasoning
+    };
+  } catch (error) {
+    return {
+      success: false,
+      message: error instanceof Error ? error.message : String(error)
+    };
+  }
+}
+async function attemptAutohealLocator({
+  frame,
+  selector,
+  actionName,
+  error
+}) {
+  const description = (0, import_locatorGenerators.asLocatorDescription)("javascript", selector);
+  if (!description)
+    return void 0;
+  const result = await healLocator({
+    frame,
+    selector,
+    description,
+    actionName
+  });
+  await saveLocatorAutohealResult({
+    result,
+    selector,
+    description,
+    actionName,
+    error
+  });
+  if (result.success && result.newSelector)
+    return result.newSelector;
+  return void 0;
+}
+async function saveLocatorAutohealResult({
+  result,
+  selector,
+  description,
+  actionName,
+  error
+}) {
+  const healingDataBody = JSON.stringify({
+    timestampIso8601: (/* @__PURE__ */ new Date()).toISOString(),
+    originalSelector: selector,
+    description,
+    actionName,
+    originalError: error.message,
+    result
+  }, null, 2);
+  const stepInfoOrTestInfo = (0, import_stepContext.getCurrentStepInfo)() ?? (0, import_globals.currentTestInfo)();
+  stepInfoOrTestInfo?.attach("locator-autoheal-results", {
+    body: healingDataBody,
+    contentType: "application/json"
+  });
+}
+async function healToHaveScreenshot({
+  actualScreenshot,
+  expectedScreenshot
+}) {
+  const config = getHealingConfig();
+  try {
+    return await (0, import_stablyApiCaller2.callAiToAutohealScreenshot)({
+      actualScreenshot,
+      expectedScreenshot,
+      model: config.model
+    });
+  } catch (error) {
+    return {
+      result: false,
+      errorMessage: error instanceof Error ? error.message : String(error)
+    };
+  }
+}
+async function attemptToHaveScreenshotHealing({
+  actualScreenshot,
+  expectedScreenshot
+}) {
+  const { result, reason } = await healToHaveScreenshot({
+    actualScreenshot,
+    expectedScreenshot
+  });
+  await saveToHaveScreenshotAutohealResult({ result, reason });
+  return result;
+}
+async function saveToHaveScreenshotAutohealResult({
+  result,
+  reason
+}) {
+  const healingDataBody = JSON.stringify({
+    reason,
+    result
+  }, null, 2);
+  const stepInfoOrTestInfo = (0, import_stepContext.getCurrentStepInfo)() ?? (0, import_globals.currentTestInfo)();
+  stepInfoOrTestInfo?.attach("toHaveScreenshot-autoheal-results", {
+    body: healingDataBody,
+    contentType: "application/json"
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  attemptAutohealLocator,
+  attemptToHaveScreenshotHealing,
+  getHealingConfig,
+  healLocator,
+  isHealingEnabled,
+  setHealingConfig
+});

package/lib/server/stably/autohealing/screenshotFrame.js

@@ -0,0 +1,41 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var screenshotFrame_exports = {};
+__export(screenshotFrame_exports, {
+  captureScreenshot: () => captureScreenshot
+});
+module.exports = __toCommonJS(screenshotFrame_exports);
+var import_progress = require("../../progress");
+async function captureScreenshot(frame) {
+  try {
+    const controller = new import_progress.ProgressController();
+    const screenshot = await controller.run(async (progress) => {
+      return await frame._page.screenshotter.screenshotPage(progress, {
+        type: "png"
+      });
+    }, 1e4);
+    return screenshot;
+  } catch (error) {
+    throw new Error(`Failed to capture screenshot: ${error instanceof Error ? error.message : String(error)}`);
+  }
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  captureScreenshot
+});

package/lib/server/stably/constants.js

@@ -0,0 +1,31 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var constants_exports = {};
+__export(constants_exports, {
+  STABLY_API_HOSTNAME: () => STABLY_API_HOSTNAME,
+  STABLY_API_PORT: () => STABLY_API_PORT
+});
+module.exports = __toCommonJS(constants_exports);
+const STABLY_API_HOSTNAME = process.env.STABLY_API_HOSTNAME || "api.stably.ai";
+const STABLY_API_PORT = process.env.STABLY_API_PORT || 8080;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  STABLY_API_HOSTNAME,
+  STABLY_API_PORT
+});

package/lib/server/trace/recorder/snapshotter.js

@@ -0,0 +1,147 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var snapshotter_exports = {};
+__export(snapshotter_exports, {
+  Snapshotter: () => Snapshotter
+});
+module.exports = __toCommonJS(snapshotter_exports);
+var import_snapshotterInjected = require("./snapshotterInjected");
+var import_time = require("../../../utils/isomorphic/time");
+var import_crypto = require("../../utils/crypto");
+var import_debugLogger = require("../../utils/debugLogger");
+var import_eventsHelper = require("../../utils/eventsHelper");
+var import_utilsBundle = require("../../../utilsBundle");
+var import_browserContext = require("../../browserContext");
+var import_page = require("../../page");
+class Snapshotter {
+  constructor(context, delegate) {
+    this._eventListeners = [];
+    this._started = false;
+    this._context = context;
+    this._delegate = delegate;
+    const guid = (0, import_crypto.createGuid)();
+    this._snapshotStreamer = "__playwright_snapshot_streamer_" + guid;
+  }
+  started() {
+    return this._started;
+  }
+  async start() {
+    this._started = true;
+    if (!this._initScript)
+      await this._initialize();
+    await this.reset();
+  }
+  async reset() {
+    if (this._started)
+      await this._context.safeNonStallingEvaluateInAllFrames(`window["${this._snapshotStreamer}"].reset()`, "main");
+  }
+  stop() {
+    this._started = false;
+  }
+  async resetForReuse() {
+    if (this._initScript) {
+      import_eventsHelper.eventsHelper.removeEventListeners(this._eventListeners);
+      await this._context.removeInitScripts([this._initScript]);
+      this._initScript = void 0;
+    }
+  }
+  async _initialize() {
+    for (const page of this._context.pages())
+      this._onPage(page);
+    this._eventListeners = [
+      import_eventsHelper.eventsHelper.addEventListener(this._context, import_browserContext.BrowserContext.Events.Page, this._onPage.bind(this))
+    ];
+    const { javaScriptEnabled } = this._context._options;
+    const initScriptSource = `(${import_snapshotterInjected.frameSnapshotStreamer})("${this._snapshotStreamer}", ${javaScriptEnabled || javaScriptEnabled === void 0})`;
+    this._initScript = await this._context.addInitScript(void 0, initScriptSource);
+    await this._context.safeNonStallingEvaluateInAllFrames(initScriptSource, "main");
+  }
+  dispose() {
+    import_eventsHelper.eventsHelper.removeEventListeners(this._eventListeners);
+  }
+  async _captureFrameSnapshot(frame) {
+    const needsReset = !!frame[kNeedsResetSymbol];
+    frame[kNeedsResetSymbol] = false;
+    const expression = `window["${this._snapshotStreamer}"].captureSnapshot(${needsReset ? "true" : "false"})`;
+    try {
+      return await frame.nonStallingRawEvaluateInExistingMainContext(expression);
+    } catch (e) {
+      frame[kNeedsResetSymbol] = true;
+      import_debugLogger.debugLogger.log("error", e);
+    }
+  }
+  async captureSnapshot(page, callId, snapshotName) {
+    const snapshots = page.frames().map(async (frame) => {
+      const data = await this._captureFrameSnapshot(frame);
+      if (!data || !this._started)
+        return;
+      const snapshot = {
+        callId,
+        snapshotName,
+        pageId: page.guid,
+        frameId: frame.guid,
+        frameUrl: data.url,
+        doctype: data.doctype,
+        html: data.html,
+        viewport: data.viewport,
+        timestamp: (0, import_time.monotonicTime)(),
+        wallTime: data.wallTime,
+        collectionTime: data.collectionTime,
+        resourceOverrides: [],
+        isMainFrame: page.mainFrame() === frame
+      };
+      for (const { url, content, contentType } of data.resourceOverrides) {
+        if (typeof content === "string") {
+          const buffer = Buffer.from(content);
+          const sha1 = (0, import_crypto.calculateSha1)(buffer) + "." + (import_utilsBundle.mime.getExtension(contentType) || "dat");
+          this._delegate.onSnapshotterBlob({ sha1, buffer });
+          snapshot.resourceOverrides.push({ url, sha1 });
+        } else {
+          snapshot.resourceOverrides.push({ url, ref: content });
+        }
+      }
+      this._delegate.onFrameSnapshot(snapshot);
+    });
+    await Promise.all(snapshots);
+  }
+  _onPage(page) {
+    for (const frame of page.frames())
+      this._annotateFrameHierarchy(frame);
+    this._eventListeners.push(import_eventsHelper.eventsHelper.addEventListener(page, import_page.Page.Events.FrameAttached, (frame) => this._annotateFrameHierarchy(frame)));
+  }
+  async _annotateFrameHierarchy(frame) {
+    try {
+      const frameElement = await frame.frameElement();
+      const parent = frame.parentFrame();
+      if (!parent)
+        return;
+      const context = await parent._mainContext();
+      await context?.evaluate(({ snapshotStreamer, frameElement: frameElement2, frameId }) => {
+        window[snapshotStreamer].markIframe(frameElement2, frameId);
+      }, { snapshotStreamer: this._snapshotStreamer, frameElement, frameId: frame.guid });
+      frameElement.dispose();
+    } catch (e) {
+    }
+  }
+}
+const kNeedsResetSymbol = Symbol("kNeedsReset");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Snapshotter
+});