@checkly/playwright-core 1.47.20-alpha → 1.48.10-alpha

package/lib/vite/traceViewer/recorder.7Wl6HrQl.js

@@ -0,0 +1,550 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { j as jsxRuntimeExports, r as reactExports, M as MultiTraceModel, F as sha1, n as asLocator, L as ListView, g as Toolbar, T as ToolbarButton, H as ToolbarSeparator, J as copy, t as toggleTheme, S as SplitView, D as TabbedPane, y as useConsoleTabModel, z as useNetworkTabModel, h as useSetting, A as ConsoleTab, N as NetworkTab, K as collectSnapshots, O as extendSnapshot, Q as SnapshotView, I as InspectorTab, E as SourceTab, a as applyTheme, c as createRoot } from "./assets/inspectorTab-BPzVEZSf.js";
+const SourceChooser = ({ sources, fileId, setFileId }) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("select", { className: "source-chooser", hidden: !sources.length, title: "Source chooser", value: fileId, onChange: (event) => {
+    setFileId(event.target.selectedOptions[0].value);
+  }, children: renderSourceOptions(sources) });
+};
+function renderSourceOptions(sources) {
+  const transformTitle = (title) => title.replace(/.*[/\\]([^/\\]+)/, "$1");
+  const renderOption = (source) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: source.id, children: transformTitle(source.label) }, source.id);
+  const sourcesByGroups = /* @__PURE__ */ new Map();
+  for (const source of sources) {
+    let list = sourcesByGroups.get(source.group || "Debugger");
+    if (!list) {
+      list = [];
+      sourcesByGroups.set(source.group || "Debugger", list);
+    }
+    list.push(source);
+  }
+  return [...sourcesByGroups.entries()].map(([group, sources2]) => /* @__PURE__ */ jsxRuntimeExports.jsx("optgroup", { label: group, children: sources2.filter((s) => (s.group || "Debugger") === group).map((source) => renderOption(source)) }, group));
+}
+const ModelContext = reactExports.createContext(void 0);
+const ModelProvider = ({ trace, children }) => {
+  const [model, setModel] = reactExports.useState();
+  const [counter, setCounter] = reactExports.useState(0);
+  const pollTimer = reactExports.useRef(null);
+  reactExports.useEffect(() => {
+    if (pollTimer.current)
+      clearTimeout(pollTimer.current);
+    pollTimer.current = setTimeout(async () => {
+      try {
+        const result = await loadSingleTraceFile(trace);
+        if (result.sha1 !== (model == null ? void 0 : model.sha1))
+          setModel(result);
+      } catch {
+        setModel(void 0);
+      } finally {
+        setCounter(counter + 1);
+      }
+    }, 500);
+    return () => {
+      if (pollTimer.current)
+        clearTimeout(pollTimer.current);
+    };
+  }, [counter, model, trace]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(ModelContext.Provider, { value: model == null ? void 0 : model.model, children });
+};
+async function loadSingleTraceFile(url) {
+  const params = new URLSearchParams();
+  params.set("trace", url);
+  const response = await fetch(`contexts?${params.toString()}`);
+  const contextEntries = await response.json();
+  const tokens = [];
+  for (const entry of contextEntries) {
+    entry.actions.forEach((a) => tokens.push(a.type + "@" + a.startTime + "-" + a.endTime));
+    entry.events.forEach((e) => tokens.push(e.type + "@" + e.time));
+  }
+  return { model: new MultiTraceModel(contextEntries), sha1: await sha1(tokens.join("|")) };
+}
+function buildFullSelector(framePath, selector) {
+  return [...framePath, selector].join(" >> internal:control=enter-frame >> ");
+}
+function traceParamsForAction(actionInContext) {
+  const { action } = actionInContext;
+  switch (action.name) {
+    case "navigate": {
+      const params = {
+        url: action.url
+      };
+      return { method: "goto", params };
+    }
+    case "openPage":
+    case "closePage":
+      throw new Error("Not reached");
+  }
+  const selector = buildFullSelector(actionInContext.frame.framePath, action.selector);
+  switch (action.name) {
+    case "click": {
+      const params = {
+        selector,
+        strict: true,
+        modifiers: toKeyboardModifiers(action.modifiers),
+        button: action.button,
+        clickCount: action.clickCount,
+        position: action.position
+      };
+      return { method: "click", params };
+    }
+    case "press": {
+      const params = {
+        selector,
+        strict: true,
+        key: [...toKeyboardModifiers(action.modifiers), action.key].join("+")
+      };
+      return { method: "press", params };
+    }
+    case "fill": {
+      const params = {
+        selector,
+        strict: true,
+        value: action.text
+      };
+      return { method: "fill", params };
+    }
+    case "setInputFiles": {
+      const params = {
+        selector,
+        strict: true,
+        localPaths: action.files
+      };
+      return { method: "setInputFiles", params };
+    }
+    case "check": {
+      const params = {
+        selector,
+        strict: true
+      };
+      return { method: "check", params };
+    }
+    case "uncheck": {
+      const params = {
+        selector,
+        strict: true
+      };
+      return { method: "uncheck", params };
+    }
+    case "select": {
+      const params = {
+        selector,
+        strict: true,
+        options: action.options.map((option) => ({ value: option }))
+      };
+      return { method: "selectOption", params };
+    }
+    case "assertChecked": {
+      const params = {
+        selector: action.selector,
+        expression: "to.be.checked",
+        isNot: !action.checked
+      };
+      return { method: "expect", params };
+    }
+    case "assertText": {
+      const params = {
+        selector,
+        expression: "to.have.text",
+        expectedText: [],
+        isNot: false
+      };
+      return { method: "expect", params };
+    }
+    case "assertValue": {
+      const params = {
+        selector,
+        expression: "to.have.value",
+        expectedValue: void 0,
+        isNot: false
+      };
+      return { method: "expect", params };
+    }
+    case "assertVisible": {
+      const params = {
+        selector,
+        expression: "to.be.visible",
+        isNot: false
+      };
+      return { method: "expect", params };
+    }
+  }
+}
+function toKeyboardModifiers(modifiers) {
+  const result = [];
+  if (modifiers & 1)
+    result.push("Alt");
+  if (modifiers & 2)
+    result.push("ControlOrMeta");
+  if (modifiers & 4)
+    result.push("ControlOrMeta");
+  if (modifiers & 8)
+    result.push("Shift");
+  return result;
+}
+const ActionList = ListView;
+const ActionListView = ({
+  sdkLanguage,
+  actions,
+  selectedAction,
+  onSelectedAction
+}) => {
+  const render = reactExports.useCallback((action) => {
+    return renderAction(sdkLanguage, action);
+  }, [sdkLanguage]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "vbox", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ActionList,
+    {
+      name: "actions",
+      items: actions,
+      selectedItem: selectedAction,
+      onSelected: onSelectedAction,
+      render
+    }
+  ) });
+};
+const renderAction = (sdkLanguage, action) => {
+  const { method, params } = traceParamsForAction(action);
+  const locator = params.selector ? asLocator(sdkLanguage || "javascript", params.selector) : void 0;
+  const apiName = `page.${method}`;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "action-title", title: apiName, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: apiName }),
+    locator && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "action-selector", title: locator, children: locator }),
+    method === "goto" && params.url && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "action-url", title: params.url, children: params.url })
+  ] }) });
+};
+const BackendContext = reactExports.createContext(void 0);
+const BackendProvider = ({ guid, children }) => {
+  const [connection, setConnection] = reactExports.useState(void 0);
+  const [mode, setMode] = reactExports.useState("none");
+  const [actions, setActions] = reactExports.useState({ actions: [], sources: [] });
+  const callbacks = reactExports.useRef({ setMode, setActions });
+  reactExports.useEffect(() => {
+    const wsURL = new URL(`../${guid}`, window.location.toString());
+    wsURL.protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+    const webSocket = new WebSocket(wsURL.toString());
+    setConnection(new Connection(webSocket, callbacks.current));
+    return () => {
+      webSocket.close();
+    };
+  }, [guid]);
+  const backend = reactExports.useMemo(() => {
+    return connection ? { mode, actions: actions.actions, sources: actions.sources, connection } : void 0;
+  }, [actions, mode, connection]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(BackendContext.Provider, { value: backend, children });
+};
+class Connection {
+  constructor(webSocket, options) {
+    __publicField(this, "_lastId", 0);
+    __publicField(this, "_webSocket");
+    __publicField(this, "_callbacks", /* @__PURE__ */ new Map());
+    __publicField(this, "_options");
+    this._webSocket = webSocket;
+    this._callbacks = /* @__PURE__ */ new Map();
+    this._options = options;
+    this._webSocket.addEventListener("message", (event) => {
+      const message = JSON.parse(event.data);
+      const { id, result, error, method, params } = message;
+      if (id) {
+        const callback = this._callbacks.get(id);
+        if (!callback)
+          return;
+        this._callbacks.delete(id);
+        if (error)
+          callback.reject(new Error(error));
+        else
+          callback.resolve(result);
+      } else {
+        this._dispatchEvent(method, params);
+      }
+    });
+  }
+  setMode(mode) {
+    this._sendMessageNoReply("setMode", { mode });
+  }
+  async _sendMessage(method, params) {
+    const id = ++this._lastId;
+    const message = { id, method, params };
+    this._webSocket.send(JSON.stringify(message));
+    return new Promise((resolve, reject) => {
+      this._callbacks.set(id, { resolve, reject });
+    });
+  }
+  _sendMessageNoReply(method, params) {
+    this._sendMessage(method, params).catch(() => {
+    });
+  }
+  _dispatchEvent(method, params) {
+    if (method === "setMode") {
+      const { mode } = params;
+      this._options.setMode(mode);
+    }
+    if (method === "setActions") {
+      const { actions, sources } = params;
+      this._options.setActions({ actions: actions.filter((a) => a.action.name !== "openPage" && a.action.name !== "closePage"), sources });
+      window.playwrightSourcesEchoForTest = sources;
+    }
+  }
+}
+const RecorderView = () => {
+  const searchParams = new URLSearchParams(window.location.search);
+  const guid = searchParams.get("ws");
+  const trace = searchParams.get("trace") + ".json";
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(BackendProvider, { guid, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ModelProvider, { trace, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Workbench, {}) }) });
+};
+const Workbench = () => {
+  const backend = reactExports.useContext(BackendContext);
+  const model = reactExports.useContext(ModelContext);
+  const [fileId, setFileId] = reactExports.useState();
+  const [selectedStartTime, setSelectedStartTime] = reactExports.useState(void 0);
+  const [isInspecting, setIsInspecting] = reactExports.useState(false);
+  const [highlightedLocatorInProperties, setHighlightedLocatorInProperties] = reactExports.useState("");
+  const [highlightedLocatorInTrace, setHighlightedLocatorInTrace] = reactExports.useState("");
+  const [traceCallId, setTraceCallId] = reactExports.useState();
+  const setSelectedAction = reactExports.useCallback((action) => {
+    setSelectedStartTime(action == null ? void 0 : action.startTime);
+  }, []);
+  const selectedAction = reactExports.useMemo(() => {
+    return backend == null ? void 0 : backend.actions.find((a) => a.startTime === selectedStartTime);
+  }, [backend == null ? void 0 : backend.actions, selectedStartTime]);
+  reactExports.useEffect(() => {
+    var _a;
+    const callId = (_a = model == null ? void 0 : model.actions.find((a) => a.endTime && a.endTime === (selectedAction == null ? void 0 : selectedAction.endTime))) == null ? void 0 : _a.callId;
+    if (callId)
+      setTraceCallId(callId);
+  }, [model, selectedAction]);
+  const source = reactExports.useMemo(() => (backend == null ? void 0 : backend.sources.find((s) => s.id === fileId)) || (backend == null ? void 0 : backend.sources[0]), [backend == null ? void 0 : backend.sources, fileId]);
+  const sourceLocation = reactExports.useMemo(() => {
+    if (!source)
+      return void 0;
+    const sourceLocation2 = {
+      file: "",
+      line: 0,
+      column: 0,
+      source: {
+        errors: [],
+        content: source.text
+      }
+    };
+    return sourceLocation2;
+  }, [source]);
+  const sdkLanguage = (source == null ? void 0 : source.language) || "javascript";
+  const { boundaries } = reactExports.useMemo(() => {
+    const boundaries2 = { minimum: (model == null ? void 0 : model.startTime) || 0, maximum: (model == null ? void 0 : model.endTime) || 3e4 };
+    if (boundaries2.minimum > boundaries2.maximum) {
+      boundaries2.minimum = 0;
+      boundaries2.maximum = 3e4;
+    }
+    boundaries2.maximum += (boundaries2.maximum - boundaries2.minimum) / 20;
+    return { boundaries: boundaries2 };
+  }, [model]);
+  const locatorPickedInTrace = reactExports.useCallback((locator) => {
+    setHighlightedLocatorInProperties(locator);
+    setHighlightedLocatorInTrace("");
+    setIsInspecting(false);
+  }, []);
+  const locatorTypedInProperties = reactExports.useCallback((locator) => {
+    setHighlightedLocatorInTrace(locator);
+    setHighlightedLocatorInProperties(locator);
+  }, []);
+  const actionList = /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ActionListView,
+    {
+      sdkLanguage,
+      actions: (backend == null ? void 0 : backend.actions) || [],
+      selectedAction,
+      onSelectedAction: setSelectedAction
+    }
+  );
+  const actionsTab = {
+    id: "actions",
+    title: "Actions",
+    component: actionList
+  };
+  const toolbar = /* @__PURE__ */ jsxRuntimeExports.jsxs(Toolbar, { sidebarBackground: true, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: 4 } }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(ToolbarButton, { icon: "inspect", title: "Pick locator", toggled: isInspecting, onClick: () => {
+      setIsInspecting(!isInspecting);
+    } }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(ToolbarButton, { icon: "eye", title: "Assert visibility", onClick: () => {
+    } }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(ToolbarButton, { icon: "whole-word", title: "Assert text", onClick: () => {
+    } }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(ToolbarButton, { icon: "symbol-constant", title: "Assert value", onClick: () => {
+    } }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(ToolbarSeparator, {}),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(ToolbarButton, { icon: "files", title: "Copy", disabled: !source || !source.text, onClick: () => {
+      if (source == null ? void 0 : source.text)
+        copy(source.text);
+    } }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { flex: "auto" } }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Target:" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(SourceChooser, { fileId, sources: (backend == null ? void 0 : backend.sources) || [], setFileId: (fileId2) => {
+      setFileId(fileId2);
+    } }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(ToolbarButton, { icon: "color-mode", title: "Toggle color mode", toggled: false, onClick: () => toggleTheme() })
+  ] });
+  const sidebarTabbedPane = /* @__PURE__ */ jsxRuntimeExports.jsx(TabbedPane, { tabs: [actionsTab] });
+  const traceView = /* @__PURE__ */ jsxRuntimeExports.jsx(
+    TraceView,
+    {
+      sdkLanguage,
+      callId: traceCallId,
+      isInspecting,
+      setIsInspecting,
+      highlightedLocator: highlightedLocatorInTrace,
+      setHighlightedLocator: locatorPickedInTrace
+    }
+  );
+  const propertiesView = /* @__PURE__ */ jsxRuntimeExports.jsx(
+    PropertiesView,
+    {
+      sdkLanguage,
+      boundaries,
+      setIsInspecting,
+      highlightedLocator: highlightedLocatorInProperties,
+      setHighlightedLocator: locatorTypedInProperties,
+      sourceLocation
+    }
+  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "vbox workbench", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    SplitView,
+    {
+      sidebarSize: 250,
+      orientation: "horizontal",
+      settingName: "recorderActionListSidebar",
+      sidebarIsFirst: true,
+      main: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        SplitView,
+        {
+          sidebarSize: 250,
+          orientation: "vertical",
+          settingName: "recorderPropertiesSidebar",
+          main: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "vbox", children: [
+            toolbar,
+            traceView
+          ] }),
+          sidebar: propertiesView
+        }
+      ),
+      sidebar: sidebarTabbedPane
+    }
+  ) });
+};
+const PropertiesView = ({
+  sdkLanguage,
+  boundaries,
+  setIsInspecting,
+  highlightedLocator,
+  setHighlightedLocator,
+  sourceLocation
+}) => {
+  const model = reactExports.useContext(ModelContext);
+  const consoleModel = useConsoleTabModel(model, boundaries);
+  const networkModel = useNetworkTabModel(model, boundaries);
+  const sourceModel = reactExports.useRef(/* @__PURE__ */ new Map());
+  const [selectedPropertiesTab, setSelectedPropertiesTab] = useSetting("recorderPropertiesTab", "source");
+  const inspectorTab = {
+    id: "inspector",
+    title: "Locator",
+    render: () => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      InspectorTab,
+      {
+        showScreenshot: false,
+        sdkLanguage,
+        setIsInspecting,
+        highlightedLocator,
+        setHighlightedLocator
+      }
+    )
+  };
+  const sourceTab = {
+    id: "source",
+    title: "Source",
+    render: () => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      SourceTab,
+      {
+        sources: sourceModel.current,
+        stackFrameLocation: "right",
+        fallbackLocation: sourceLocation
+      }
+    )
+  };
+  const consoleTab = {
+    id: "console",
+    title: "Console",
+    count: consoleModel.entries.length,
+    render: () => /* @__PURE__ */ jsxRuntimeExports.jsx(ConsoleTab, { boundaries, consoleModel })
+  };
+  const networkTab = {
+    id: "network",
+    title: "Network",
+    count: networkModel.resources.length,
+    render: () => /* @__PURE__ */ jsxRuntimeExports.jsx(NetworkTab, { boundaries, networkModel })
+  };
+  const tabs = [
+    sourceTab,
+    inspectorTab,
+    consoleTab,
+    networkTab
+  ];
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    TabbedPane,
+    {
+      tabs,
+      selectedTab: selectedPropertiesTab,
+      setSelectedTab: setSelectedPropertiesTab
+    }
+  );
+};
+const TraceView = ({
+  sdkLanguage,
+  callId,
+  isInspecting,
+  setIsInspecting,
+  highlightedLocator,
+  setHighlightedLocator
+}) => {
+  const model = reactExports.useContext(ModelContext);
+  const action = reactExports.useMemo(() => {
+    return model == null ? void 0 : model.actions.find((a) => a.callId === callId);
+  }, [model, callId]);
+  const snapshot = reactExports.useMemo(() => {
+    const snapshot2 = collectSnapshots(action);
+    return snapshot2.action || snapshot2.after || snapshot2.before;
+  }, [action]);
+  const snapshotUrls = reactExports.useMemo(() => {
+    return snapshot ? extendSnapshot(snapshot) : void 0;
+  }, [snapshot]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    SnapshotView,
+    {
+      sdkLanguage,
+      testIdAttributeName: "data-testid",
+      isInspecting,
+      setIsInspecting,
+      highlightedLocator,
+      setHighlightedLocator,
+      snapshotUrls
+    }
+  );
+};
+(async () => {
+  applyTheme();
+  if (window.location.protocol !== "file:") {
+    if (!navigator.serviceWorker)
+      throw new Error(`Service workers are not supported.
+Make sure to serve the Recorder (${window.location}) via HTTPS or localhost.`);
+    navigator.serviceWorker.register("sw.bundle.js");
+    if (!navigator.serviceWorker.controller) {
+      await new Promise((f) => {
+        navigator.serviceWorker.oncontrollerchange = () => f();
+      });
+    }
+    setInterval(function() {
+      fetch("ping");
+    }, 1e4);
+  }
+  createRoot(document.querySelector("#root")).render(/* @__PURE__ */ jsxRuntimeExports.jsx(RecorderView, {}));
+})();
+//# sourceMappingURL=recorder.7Wl6HrQl.js.map