@checkly/playwright-core 1.48.22-beta.1 → 1.48.22

package/lib/vite/traceViewer/recorder.3Xfrl_zV.js

@@ -1,551 +0,0 @@
-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-B4ynvyY9.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);
-  params.set("limit", "1");
-  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.3Xfrl_zV.js.map