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

package/lib/vite/traceViewer/index.d86e70ca.js

@@ -0,0 +1,181 @@
+import { M as MultiTraceModel, r as reactExports, c as connect, j as jsxs, a as jsx, T as ToolbarButton, t as toggleTheme, W as Workbench, b as applyTheme, d as reactDomExports } from "./assets/wsPort-85286e61.js";
+const workbenchLoader = "";
+const WorkbenchLoader = () => {
+  const [isServer, setIsServer] = reactExports.useState(false);
+  const [traceURLs, setTraceURLs] = reactExports.useState([]);
+  const [uploadedTraceNames, setUploadedTraceNames] = reactExports.useState([]);
+  const [model, setModel] = reactExports.useState(emptyModel);
+  const [progress, setProgress] = reactExports.useState({ done: 0, total: 0 });
+  const [dragOver, setDragOver] = reactExports.useState(false);
+  const [processingErrorMessage, setProcessingErrorMessage] = reactExports.useState(null);
+  const [fileForLocalModeError, setFileForLocalModeError] = reactExports.useState(null);
+  const processTraceFiles = reactExports.useCallback((files) => {
+    const blobUrls = [];
+    const fileNames = [];
+    const url = new URL(window.location.href);
+    for (let i = 0; i < files.length; i++) {
+      const file = files.item(i);
+      if (!file)
+        continue;
+      const blobTraceURL = URL.createObjectURL(file);
+      blobUrls.push(blobTraceURL);
+      fileNames.push(file.name);
+      url.searchParams.append("trace", blobTraceURL);
+      url.searchParams.append("traceFileName", file.name);
+    }
+    const href = url.toString();
+    window.history.pushState({}, "", href);
+    setTraceURLs(blobUrls);
+    setUploadedTraceNames(fileNames);
+    setDragOver(false);
+    setProcessingErrorMessage(null);
+  }, []);
+  const handleDropEvent = reactExports.useCallback((event) => {
+    event.preventDefault();
+    processTraceFiles(event.dataTransfer.files);
+  }, [processTraceFiles]);
+  const handleFileInputChange = reactExports.useCallback((event) => {
+    event.preventDefault();
+    if (!event.target.files)
+      return;
+    processTraceFiles(event.target.files);
+  }, [processTraceFiles]);
+  reactExports.useEffect(() => {
+    const params = new URL(window.location.href).searchParams;
+    const newTraceURLs = params.getAll("trace");
+    setIsServer(params.has("isServer"));
+    for (const url of newTraceURLs) {
+      if (url.startsWith("file:")) {
+        setFileForLocalModeError(url || null);
+        return;
+      }
+    }
+    if (params.has("isServer")) {
+      connect({
+        onEvent(method, params2) {
+          if (method === "loadTrace") {
+            setTraceURLs(params2.url ? [params2.url] : []);
+            setDragOver(false);
+            setProcessingErrorMessage(null);
+          }
+        },
+        onClose() {
+        }
+      }).then((sendMessage) => {
+        sendMessage("ready");
+      });
+    } else if (!newTraceURLs.some((url) => url.startsWith("blob:"))) {
+      setTraceURLs(newTraceURLs);
+    }
+  }, []);
+  reactExports.useEffect(() => {
+    (async () => {
+      if (traceURLs.length) {
+        const swListener = (event) => {
+          if (event.data.method === "progress")
+            setProgress(event.data.params);
+        };
+        navigator.serviceWorker.addEventListener("message", swListener);
+        setProgress({ done: 0, total: 1 });
+        const contextEntries = [];
+        for (let i = 0; i < traceURLs.length; i++) {
+          const url = traceURLs[i];
+          const params = new URLSearchParams();
+          params.set("trace", url);
+          if (uploadedTraceNames.length)
+            params.set("traceFileName", uploadedTraceNames[i]);
+          const response = await fetch(`contexts?${params.toString()}`);
+          if (!response.ok) {
+            if (!isServer)
+              setTraceURLs([]);
+            setProcessingErrorMessage((await response.json()).error);
+            return;
+          }
+          contextEntries.push(...await response.json());
+        }
+        navigator.serviceWorker.removeEventListener("message", swListener);
+        const model2 = new MultiTraceModel(contextEntries);
+        setProgress({ done: 0, total: 0 });
+        setModel(model2);
+      } else {
+        setModel(emptyModel);
+      }
+    })();
+  }, [isServer, traceURLs, uploadedTraceNames]);
+  return /* @__PURE__ */ jsxs("div", { className: "vbox workbench-loader", onDragOver: (event) => {
+    event.preventDefault();
+    setDragOver(true);
+  }, children: [
+    /* @__PURE__ */ jsxs("div", { className: "hbox header", children: [
+      /* @__PURE__ */ jsx("div", { className: "logo", children: /* @__PURE__ */ jsx("img", { src: "playwright-logo.svg", alt: "Playwright logo" }) }),
+      /* @__PURE__ */ jsx("div", { className: "product", children: "Playwright" }),
+      model.title && /* @__PURE__ */ jsx("div", { className: "title", children: model.title }),
+      /* @__PURE__ */ jsx("div", { className: "spacer" }),
+      /* @__PURE__ */ jsx(ToolbarButton, { icon: "color-mode", title: "Toggle color mode", toggled: false, onClick: () => toggleTheme() })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "progress", children: /* @__PURE__ */ jsx("div", { className: "inner-progress", style: { width: progress.total ? 100 * progress.done / progress.total + "%" : 0 } }) }),
+    /* @__PURE__ */ jsx(Workbench, { model }),
+    fileForLocalModeError && /* @__PURE__ */ jsxs("div", { className: "drop-target", children: [
+      /* @__PURE__ */ jsx("div", { children: "Trace Viewer uses Service Workers to show traces. To view trace:" }),
+      /* @__PURE__ */ jsxs("div", { style: { paddingTop: 20 }, children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          "1. Click ",
+          /* @__PURE__ */ jsx("a", { href: fileForLocalModeError, children: "here" }),
+          " to put your trace into the download shelf"
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          "2. Go to ",
+          /* @__PURE__ */ jsx("a", { href: "https://trace.playwright.dev", children: "trace.playwright.dev" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { children: "3. Drop the trace from the download shelf into the page" })
+      ] })
+    ] }),
+    !isServer && !dragOver && !fileForLocalModeError && (!traceURLs.length || processingErrorMessage) && /* @__PURE__ */ jsxs("div", { className: "drop-target", children: [
+      /* @__PURE__ */ jsx("div", { className: "processing-error", children: processingErrorMessage }),
+      /* @__PURE__ */ jsx("div", { className: "title", children: "Drop Playwright Trace to load" }),
+      /* @__PURE__ */ jsx("div", { children: "or" }),
+      /* @__PURE__ */ jsx("button", { onClick: () => {
+        const input = document.createElement("input");
+        input.type = "file";
+        input.multiple = true;
+        input.click();
+        input.addEventListener("change", (e) => handleFileInputChange(e));
+      }, children: "Select file(s)" }),
+      /* @__PURE__ */ jsx("div", { style: { maxWidth: 400 }, children: "Playwright Trace Viewer is a Progressive Web App, it does not send your trace anywhere, it opens it locally." })
+    ] }),
+    isServer && !traceURLs.length && /* @__PURE__ */ jsx("div", { className: "drop-target", children: /* @__PURE__ */ jsx("div", { className: "title", children: "Select test to see the trace" }) }),
+    dragOver && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "drop-target",
+        onDragLeave: () => {
+          setDragOver(false);
+        },
+        onDrop: (event) => handleDropEvent(event),
+        children: /* @__PURE__ */ jsx("div", { className: "title", children: "Release to analyse the Playwright Trace" })
+      }
+    )
+  ] });
+};
+const emptyModel = new MultiTraceModel([]);
+(async () => {
+  applyTheme();
+  if (window.location.protocol !== "file:") {
+    if (window.location.href.includes("isUnderTest=true"))
+      await new Promise((f) => setTimeout(f, 1e3));
+    if (!navigator.serviceWorker)
+      throw new Error(`Service workers are not supported.
+Make sure to serve the Trace Viewer (${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);
+  }
+  reactDomExports.render(/* @__PURE__ */ jsx(WorkbenchLoader, {}), document.querySelector("#root"));
+})();
+//# sourceMappingURL=index.d86e70ca.js.map

package/lib/vite/traceViewer/index.decad628.js

@@ -0,0 +1,2 @@
+import{M as E,r as s,c as R,j as c,a as r,T as x,t as C,W as j,b as F,d as O}from"./assets/wsPort-ee2830d7.js";const I=()=>{const[l,P]=s.useState(!1),[d,h]=s.useState([]),[p,W]=s.useState([]),[v,S]=s.useState(L),[f,m]=s.useState({done:0,total:0}),[b,g]=s.useState(!1),[k,w]=s.useState(null),[T,U]=s.useState(null),u=s.useCallback(e=>{const o=[],a=[],t=new URL(window.location.href);for(let i=0;i<e.length;i++){const n=e.item(i);if(!n)continue;const N=URL.createObjectURL(n);o.push(N),a.push(n.name),t.searchParams.append("trace",N),t.searchParams.append("traceFileName",n.name)}const y=t.toString();window.history.pushState({},"",y),h(o),W(a),g(!1),w(null)},[]),D=s.useCallback(e=>{e.preventDefault(),u(e.dataTransfer.files)},[u]),M=s.useCallback(e=>{e.preventDefault(),e.target.files&&u(e.target.files)},[u]);return s.useEffect(()=>{const e=new URL(window.location.href).searchParams,o=e.getAll("trace");P(e.has("isServer"));for(const a of o)if(a.startsWith("file:")){U(a||null);return}e.has("isServer")?R({onEvent(a,t){a==="loadTrace"&&(h(t.url?[t.url]:[]),g(!1),w(null))},onClose(){}}).then(a=>{a("ready")}):o.some(a=>a.startsWith("blob:"))||h(o)},[]),s.useEffect(()=>{(async()=>{if(d.length){const e=t=>{t.data.method==="progress"&&m(t.data.params)};navigator.serviceWorker.addEventListener("message",e),m({done:0,total:1});const o=[];for(let t=0;t<d.length;t++){const y=d[t],i=new URLSearchParams;i.set("trace",y),p.length&&i.set("traceFileName",p[t]);const n=await fetch(`contexts?${i.toString()}`);if(!n.ok){l||h([]),w((await n.json()).error);return}o.push(...await n.json())}navigator.serviceWorker.removeEventListener("message",e);const a=new E(o);m({done:0,total:0}),S(a)}else S(L)})()},[l,d,p]),c("div",{className:"vbox workbench-loader",onDragOver:e=>{e.preventDefault(),g(!0)},children:[c("div",{className:"hbox header",children:[r("div",{className:"logo",children:r("img",{src:"playwright-logo.svg",alt:"Playwright logo"})}),r("div",{className:"product",children:"Playwright"}),v.title&&r("div",{className:"title",children:v.title}),r("div",{className:"spacer"}),r(x,{icon:"color-mode",title:"Toggle color mode",toggled:!1,onClick:()=>C()})]}),r("div",{className:"progress",children:r("div",{className:"inner-progress",style:{width:f.total?100*f.done/f.total+"%":0}})}),r(j,{model:v}),T&&c("div",{className:"drop-target",children:[r("div",{children:"Trace Viewer uses Service Workers to show traces. To view trace:"}),c("div",{style:{paddingTop:20},children:[c("div",{children:["1. Click ",r("a",{href:T,children:"here"})," to put your trace into the download shelf"]}),c("div",{children:["2. Go to ",r("a",{href:"https://trace.playwright.dev",children:"trace.playwright.dev"})]}),r("div",{children:"3. Drop the trace from the download shelf into the page"})]})]}),!l&&!b&&!T&&(!d.length||k)&&c("div",{className:"drop-target",children:[r("div",{className:"processing-error",children:k}),r("div",{className:"title",children:"Drop Playwright Trace to load"}),r("div",{children:"or"}),r("button",{onClick:()=>{const e=document.createElement("input");e.type="file",e.multiple=!0,e.click(),e.addEventListener("change",o=>M(o))},children:"Select file(s)"}),r("div",{style:{maxWidth:400},children:"Playwright Trace Viewer is a Progressive Web App, it does not send your trace anywhere, it opens it locally."})]}),l&&!d.length&&r("div",{className:"drop-target",children:r("div",{className:"title",children:"Select test to see the trace"})}),b&&r("div",{className:"drop-target",onDragLeave:()=>{g(!1)},onDrop:e=>D(e),children:r("div",{className:"title",children:"Release to analyse the Playwright Trace"})})]})},L=new E([]);(async()=>{if(F(),window.location.protocol!=="file:"){if(window.location.href.includes("isUnderTest=true")&&await new Promise(l=>setTimeout(l,1e3)),!navigator.serviceWorker)throw new Error(`Service workers are not supported.
+Make sure to serve the Trace Viewer (${window.location}) via HTTPS or localhost.`);navigator.serviceWorker.register("sw.bundle.js"),navigator.serviceWorker.controller||await new Promise(l=>{navigator.serviceWorker.oncontrollerchange=()=>l()}),setInterval(function(){fetch("ping")},1e4)}O.render(r(I,{}),document.querySelector("#root"))})();

package/lib/vite/traceViewer/index.e8730524.js

@@ -0,0 +1,181 @@
+import { M as MultiTraceModel, r as reactExports, c as connect, j as jsxs, a as jsx, T as ToolbarButton, t as toggleTheme, W as Workbench, b as applyTheme, d as reactDomExports } from "./assets/wsPort-57f274c6.js";
+const workbenchLoader = "";
+const WorkbenchLoader = () => {
+  const [isServer, setIsServer] = reactExports.useState(false);
+  const [traceURLs, setTraceURLs] = reactExports.useState([]);
+  const [uploadedTraceNames, setUploadedTraceNames] = reactExports.useState([]);
+  const [model, setModel] = reactExports.useState(emptyModel);
+  const [progress, setProgress] = reactExports.useState({ done: 0, total: 0 });
+  const [dragOver, setDragOver] = reactExports.useState(false);
+  const [processingErrorMessage, setProcessingErrorMessage] = reactExports.useState(null);
+  const [fileForLocalModeError, setFileForLocalModeError] = reactExports.useState(null);
+  const processTraceFiles = reactExports.useCallback((files) => {
+    const blobUrls = [];
+    const fileNames = [];
+    const url = new URL(window.location.href);
+    for (let i = 0; i < files.length; i++) {
+      const file = files.item(i);
+      if (!file)
+        continue;
+      const blobTraceURL = URL.createObjectURL(file);
+      blobUrls.push(blobTraceURL);
+      fileNames.push(file.name);
+      url.searchParams.append("trace", blobTraceURL);
+      url.searchParams.append("traceFileName", file.name);
+    }
+    const href = url.toString();
+    window.history.pushState({}, "", href);
+    setTraceURLs(blobUrls);
+    setUploadedTraceNames(fileNames);
+    setDragOver(false);
+    setProcessingErrorMessage(null);
+  }, []);
+  const handleDropEvent = reactExports.useCallback((event) => {
+    event.preventDefault();
+    processTraceFiles(event.dataTransfer.files);
+  }, [processTraceFiles]);
+  const handleFileInputChange = reactExports.useCallback((event) => {
+    event.preventDefault();
+    if (!event.target.files)
+      return;
+    processTraceFiles(event.target.files);
+  }, [processTraceFiles]);
+  reactExports.useEffect(() => {
+    const params = new URL(window.location.href).searchParams;
+    const newTraceURLs = params.getAll("trace");
+    setIsServer(params.has("isServer"));
+    for (const url of newTraceURLs) {
+      if (url.startsWith("file:")) {
+        setFileForLocalModeError(url || null);
+        return;
+      }
+    }
+    if (params.has("isServer")) {
+      connect({
+        onEvent(method, params2) {
+          if (method === "loadTrace") {
+            setTraceURLs(params2.url ? [params2.url] : []);
+            setDragOver(false);
+            setProcessingErrorMessage(null);
+          }
+        },
+        onClose() {
+        }
+      }).then((sendMessage) => {
+        sendMessage("ready");
+      });
+    } else if (!newTraceURLs.some((url) => url.startsWith("blob:"))) {
+      setTraceURLs(newTraceURLs);
+    }
+  }, []);
+  reactExports.useEffect(() => {
+    (async () => {
+      if (traceURLs.length) {
+        const swListener = (event) => {
+          if (event.data.method === "progress")
+            setProgress(event.data.params);
+        };
+        navigator.serviceWorker.addEventListener("message", swListener);
+        setProgress({ done: 0, total: 1 });
+        const contextEntries = [];
+        for (let i = 0; i < traceURLs.length; i++) {
+          const url = traceURLs[i];
+          const params = new URLSearchParams();
+          params.set("trace", url);
+          if (uploadedTraceNames.length)
+            params.set("traceFileName", uploadedTraceNames[i]);
+          const response = await fetch(`contexts?${params.toString()}`);
+          if (!response.ok) {
+            if (!isServer)
+              setTraceURLs([]);
+            setProcessingErrorMessage((await response.json()).error);
+            return;
+          }
+          contextEntries.push(...await response.json());
+        }
+        navigator.serviceWorker.removeEventListener("message", swListener);
+        const model2 = new MultiTraceModel(contextEntries);
+        setProgress({ done: 0, total: 0 });
+        setModel(model2);
+      } else {
+        setModel(emptyModel);
+      }
+    })();
+  }, [isServer, traceURLs, uploadedTraceNames]);
+  return /* @__PURE__ */ jsxs("div", { className: "vbox workbench-loader", onDragOver: (event) => {
+    event.preventDefault();
+    setDragOver(true);
+  }, children: [
+    /* @__PURE__ */ jsxs("div", { className: "hbox header", children: [
+      /* @__PURE__ */ jsx("div", { className: "logo", children: /* @__PURE__ */ jsx("img", { src: "playwright-logo.svg", alt: "Playwright logo" }) }),
+      /* @__PURE__ */ jsx("div", { className: "product", children: "Playwright" }),
+      model.title && /* @__PURE__ */ jsx("div", { className: "title", children: model.title }),
+      /* @__PURE__ */ jsx("div", { className: "spacer" }),
+      /* @__PURE__ */ jsx(ToolbarButton, { icon: "color-mode", title: "Toggle color mode", toggled: false, onClick: () => toggleTheme() })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "progress", children: /* @__PURE__ */ jsx("div", { className: "inner-progress", style: { width: progress.total ? 100 * progress.done / progress.total + "%" : 0 } }) }),
+    /* @__PURE__ */ jsx(Workbench, { model }),
+    fileForLocalModeError && /* @__PURE__ */ jsxs("div", { className: "drop-target", children: [
+      /* @__PURE__ */ jsx("div", { children: "Trace Viewer uses Service Workers to show traces. To view trace:" }),
+      /* @__PURE__ */ jsxs("div", { style: { paddingTop: 20 }, children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          "1. Click ",
+          /* @__PURE__ */ jsx("a", { href: fileForLocalModeError, children: "here" }),
+          " to put your trace into the download shelf"
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          "2. Go to ",
+          /* @__PURE__ */ jsx("a", { href: "https://trace.playwright.dev", children: "trace.playwright.dev" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { children: "3. Drop the trace from the download shelf into the page" })
+      ] })
+    ] }),
+    !isServer && !dragOver && !fileForLocalModeError && (!traceURLs.length || processingErrorMessage) && /* @__PURE__ */ jsxs("div", { className: "drop-target", children: [
+      /* @__PURE__ */ jsx("div", { className: "processing-error", children: processingErrorMessage }),
+      /* @__PURE__ */ jsx("div", { className: "title", children: "Drop Playwright Trace to load" }),
+      /* @__PURE__ */ jsx("div", { children: "or" }),
+      /* @__PURE__ */ jsx("button", { onClick: () => {
+        const input = document.createElement("input");
+        input.type = "file";
+        input.multiple = true;
+        input.click();
+        input.addEventListener("change", (e) => handleFileInputChange(e));
+      }, children: "Select file(s)" }),
+      /* @__PURE__ */ jsx("div", { style: { maxWidth: 400 }, children: "Playwright Trace Viewer is a Progressive Web App, it does not send your trace anywhere, it opens it locally." })
+    ] }),
+    isServer && !traceURLs.length && /* @__PURE__ */ jsx("div", { className: "drop-target", children: /* @__PURE__ */ jsx("div", { className: "title", children: "Select test to see the trace" }) }),
+    dragOver && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "drop-target",
+        onDragLeave: () => {
+          setDragOver(false);
+        },
+        onDrop: (event) => handleDropEvent(event),
+        children: /* @__PURE__ */ jsx("div", { className: "title", children: "Release to analyse the Playwright Trace" })
+      }
+    )
+  ] });
+};
+const emptyModel = new MultiTraceModel([]);
+(async () => {
+  applyTheme();
+  if (window.location.protocol !== "file:") {
+    if (window.location.href.includes("isUnderTest=true"))
+      await new Promise((f) => setTimeout(f, 1e3));
+    if (!navigator.serviceWorker)
+      throw new Error(`Service workers are not supported.
+Make sure to serve the Trace Viewer (${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);
+  }
+  reactDomExports.render(/* @__PURE__ */ jsx(WorkbenchLoader, {}), document.querySelector("#root"));
+})();
+//# sourceMappingURL=index.e8730524.js.map

package/lib/vite/traceViewer/index.ed9a3c58.js

@@ -0,0 +1,2 @@
+import{M as E,r as s,c as R,j as c,a as r,T as x,t as C,W as j,b as F,d as O}from"./assets/wsPort-762c6840.js";const I=()=>{const[l,P]=s.useState(!1),[d,h]=s.useState([]),[p,W]=s.useState([]),[v,S]=s.useState(L),[f,m]=s.useState({done:0,total:0}),[b,g]=s.useState(!1),[k,w]=s.useState(null),[T,U]=s.useState(null),u=s.useCallback(e=>{const o=[],a=[],t=new URL(window.location.href);for(let i=0;i<e.length;i++){const n=e.item(i);if(!n)continue;const N=URL.createObjectURL(n);o.push(N),a.push(n.name),t.searchParams.append("trace",N),t.searchParams.append("traceFileName",n.name)}const y=t.toString();window.history.pushState({},"",y),h(o),W(a),g(!1),w(null)},[]),D=s.useCallback(e=>{e.preventDefault(),u(e.dataTransfer.files)},[u]),M=s.useCallback(e=>{e.preventDefault(),e.target.files&&u(e.target.files)},[u]);return s.useEffect(()=>{const e=new URL(window.location.href).searchParams,o=e.getAll("trace");P(e.has("isServer"));for(const a of o)if(a.startsWith("file:")){U(a||null);return}e.has("isServer")?R({onEvent(a,t){a==="loadTrace"&&(h(t.url?[t.url]:[]),g(!1),w(null))},onClose(){}}).then(a=>{a("ready")}):o.some(a=>a.startsWith("blob:"))||h(o)},[]),s.useEffect(()=>{(async()=>{if(d.length){const e=t=>{t.data.method==="progress"&&m(t.data.params)};navigator.serviceWorker.addEventListener("message",e),m({done:0,total:1});const o=[];for(let t=0;t<d.length;t++){const y=d[t],i=new URLSearchParams;i.set("trace",y),p.length&&i.set("traceFileName",p[t]);const n=await fetch(`contexts?${i.toString()}`);if(!n.ok){l||h([]),w((await n.json()).error);return}o.push(...await n.json())}navigator.serviceWorker.removeEventListener("message",e);const a=new E(o);m({done:0,total:0}),S(a)}else S(L)})()},[l,d,p]),c("div",{className:"vbox workbench-loader",onDragOver:e=>{e.preventDefault(),g(!0)},children:[c("div",{className:"hbox header",children:[r("div",{className:"logo",children:r("img",{src:"playwright-logo.svg",alt:"Playwright logo"})}),r("div",{className:"product",children:"Playwright"}),v.title&&r("div",{className:"title",children:v.title}),r("div",{className:"spacer"}),r(x,{icon:"color-mode",title:"Toggle color mode",toggled:!1,onClick:()=>C()})]}),r("div",{className:"progress",children:r("div",{className:"inner-progress",style:{width:f.total?100*f.done/f.total+"%":0}})}),r(j,{model:v}),T&&c("div",{className:"drop-target",children:[r("div",{children:"Trace Viewer uses Service Workers to show traces. To view trace:"}),c("div",{style:{paddingTop:20},children:[c("div",{children:["1. Click ",r("a",{href:T,children:"here"})," to put your trace into the download shelf"]}),c("div",{children:["2. Go to ",r("a",{href:"https://trace.playwright.dev",children:"trace.playwright.dev"})]}),r("div",{children:"3. Drop the trace from the download shelf into the page"})]})]}),!l&&!b&&!T&&(!d.length||k)&&c("div",{className:"drop-target",children:[r("div",{className:"processing-error",children:k}),r("div",{className:"title",children:"Drop Playwright Trace to load"}),r("div",{children:"or"}),r("button",{onClick:()=>{const e=document.createElement("input");e.type="file",e.multiple=!0,e.click(),e.addEventListener("change",o=>M(o))},children:"Select file(s)"}),r("div",{style:{maxWidth:400},children:"Playwright Trace Viewer is a Progressive Web App, it does not send your trace anywhere, it opens it locally."})]}),l&&!d.length&&r("div",{className:"drop-target",children:r("div",{className:"title",children:"Select test to see the trace"})}),b&&r("div",{className:"drop-target",onDragLeave:()=>{g(!1)},onDrop:e=>D(e),children:r("div",{className:"title",children:"Release to analyse the Playwright Trace"})})]})},L=new E([]);(async()=>{if(F(),window.location.protocol!=="file:"){if(window.location.href.includes("isUnderTest=true")&&await new Promise(l=>setTimeout(l,1e3)),!navigator.serviceWorker)throw new Error(`Service workers are not supported.
+Make sure to serve the Trace Viewer (${window.location}) via HTTPS or localhost.`);navigator.serviceWorker.register("sw.bundle.js"),navigator.serviceWorker.controller||await new Promise(l=>{navigator.serviceWorker.oncontrollerchange=()=>l()}),setInterval(function(){fetch("ping")},1e4)}O.render(r(I,{}),document.querySelector("#root"))})();

package/lib/vite/traceViewer/index.html

@@ -7,13 +7,13 @@
     <link rel="icon" href="./playwright-logo.svg" type="image/svg+xml">
     <link rel="manifest" href="./manifest.webmanifest">
     <title>Playwright Trace Viewer</title>
-    <script type="module" crossorigin src="./index.DPD22sZn.js"></script>
-    <link rel="modulepreload" crossorigin href="./assets/inspectorTab-BPzhNk9r.js">
-    <link rel="modulepreload" crossorigin href="./assets/workbench-DLv_q9ji.js">
-    <link rel="modulepreload" crossorigin href="./assets/testServerConnection-DeE2kSzz.js">
-    <link rel="stylesheet" crossorigin href="./inspectorTab.DLjBDrQR.css">
-    <link rel="stylesheet" crossorigin href="./workbench.DlsCx8k5.css">
-    <link rel="stylesheet" crossorigin href="./index.CrbWWHbf.css">
+    <script type="module" crossorigin src="./index.CM_h9lHr.js"></script>
+    <link rel="modulepreload" crossorigin href="./assets/inspectorTab-DOc4D3cX.js">
+    <link rel="modulepreload" crossorigin href="./assets/workbench-DNolpp3y.js">
+    <link rel="modulepreload" crossorigin href="./assets/testServerConnection-D-tXL3sj.js">
+    <link rel="stylesheet" crossorigin href="./inspectorTab.DGJWXOSd.css">
+    <link rel="stylesheet" crossorigin href="./workbench.BQNDbcQ0.css">
+    <link rel="stylesheet" crossorigin href="./index.QanXxRUb.css">
   </head>
   <body>
     <div id="root"></div>

package/lib/vite/traceViewer/{recorder.BufKu9Hp.js → recorder.3Xfrl_zV.js}

@@ -1,7 +1,7 @@
 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-BABZNwlH.js";
+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);
@@ -50,6 +50,7 @@ const ModelProvider = ({ trace, 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 = [];
@@ -547,4 +548,4 @@ Make sure to serve the Recorder (${window.location}) via HTTPS or localhost.`);
   }
   createRoot(document.querySelector("#root")).render(/* @__PURE__ */ jsxRuntimeExports.jsx(RecorderView, {}));
 })();
-//# sourceMappingURL=recorder.BufKu9Hp.js.map
+//# sourceMappingURL=recorder.3Xfrl_zV.js.map

package/lib/vite/traceViewer/{recorder.am-MV-DQ.js → recorder.B76AH9PE.js}

@@ -1,7 +1,7 @@
 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-DpvLVMq5.js";
+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-BqBvUFio.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);
@@ -50,6 +50,7 @@ const ModelProvider = ({ trace, 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 = [];
@@ -547,4 +548,4 @@ Make sure to serve the Recorder (${window.location}) via HTTPS or localhost.`);
   }
   createRoot(document.querySelector("#root")).render(/* @__PURE__ */ jsxRuntimeExports.jsx(RecorderView, {}));
 })();
-//# sourceMappingURL=recorder.am-MV-DQ.js.map
+//# sourceMappingURL=recorder.B76AH9PE.js.map

package/lib/vite/traceViewer/{recorder.C88JDknq.js → recorder.BVExlUUk.js}

@@ -1,2 +1,2 @@
-var H=Object.defineProperty;var W=(t,e,s)=>e in t?H(t,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[e]=s;var w=(t,e,s)=>W(t,typeof e!="symbol"?e+"":e,s);import{j as n,r as a,M as B,F as U,n as $,L as z,g as D,T as f,H as J,J as K,t as q,S as C,D as y,y as G,z as Q,h as X,A as Y,N as Z,K as ee,O as te,Q as se,I as oe,E as re,a as ne,c as ce}from"./assets/inspectorTab-BHcfR9dD.js";const ae=({sources:t,fileId:e,setFileId:s})=>n.jsx("select",{className:"source-chooser",hidden:!t.length,title:"Source chooser",value:e,onChange:o=>{s(o.target.selectedOptions[0].value)},children:ie(t)});function ie(t){const e=r=>r.replace(/.*[/\\]([^/\\]+)/,"$1"),s=r=>n.jsx("option",{value:r.id,children:e(r.label)},r.id),o=new Map;for(const r of t){let i=o.get(r.group||"Debugger");i||(i=[],o.set(r.group||"Debugger",i)),i.push(r)}return[...o.entries()].map(([r,i])=>n.jsx("optgroup",{label:r,children:i.filter(c=>(c.group||"Debugger")===r).map(c=>s(c))},r))}const b=a.createContext(void 0),le=({trace:t,children:e})=>{const[s,o]=a.useState(),[r,i]=a.useState(0),c=a.useRef(null);return a.useEffect(()=>(c.current&&clearTimeout(c.current),c.current=setTimeout(async()=>{try{const u=await ue(t);u.sha1!==(s==null?void 0:s.sha1)&&o(u)}catch{o(void 0)}finally{i(r+1)}},500),()=>{c.current&&clearTimeout(c.current)}),[r,s,t]),n.jsx(b.Provider,{value:s==null?void 0:s.model,children:e})};async function ue(t){const e=new URLSearchParams;e.set("trace",t),e.set("limit","1");const o=await(await fetch(`contexts?${e.toString()}`)).json(),r=[];for(const i of o)i.actions.forEach(c=>r.push(c.type+"@"+c.startTime+"-"+c.endTime)),i.events.forEach(c=>r.push(c.type+"@"+c.time));return{model:new B(o),sha1:await U(r.join("|"))}}function de(t,e){return[...t,e].join(" >> internal:control=enter-frame >> ")}function me(t){const{action:e}=t;switch(e.name){case"navigate":return{method:"goto",params:{url:e.url}};case"openPage":case"closePage":throw new Error("Not reached")}const s=de(t.frame.framePath,e.selector);switch(e.name){case"click":return{method:"click",params:{selector:s,strict:!0,modifiers:P(e.modifiers),button:e.button,clickCount:e.clickCount,position:e.position}};case"press":return{method:"press",params:{selector:s,strict:!0,key:[...P(e.modifiers),e.key].join("+")}};case"fill":return{method:"fill",params:{selector:s,strict:!0,value:e.text}};case"setInputFiles":return{method:"setInputFiles",params:{selector:s,strict:!0,localPaths:e.files}};case"check":return{method:"check",params:{selector:s,strict:!0}};case"uncheck":return{method:"uncheck",params:{selector:s,strict:!0}};case"select":return{method:"selectOption",params:{selector:s,strict:!0,options:e.options.map(r=>({value:r}))}};case"assertChecked":return{method:"expect",params:{selector:e.selector,expression:"to.be.checked",isNot:!e.checked}};case"assertText":return{method:"expect",params:{selector:s,expression:"to.have.text",expectedText:[],isNot:!1}};case"assertValue":return{method:"expect",params:{selector:s,expression:"to.have.value",expectedValue:void 0,isNot:!1}};case"assertVisible":return{method:"expect",params:{selector:s,expression:"to.be.visible",isNot:!1}}}}function P(t){const e=[];return t&1&&e.push("Alt"),t&2&&e.push("ControlOrMeta"),t&4&&e.push("ControlOrMeta"),t&8&&e.push("Shift"),e}const he=z,pe=({sdkLanguage:t,actions:e,selectedAction:s,onSelectedAction:o})=>{const r=a.useCallback(i=>xe(t,i),[t]);return n.jsx("div",{className:"vbox",children:n.jsx(he,{name:"actions",items:e,selectedItem:s,onSelected:o,render:r})})},xe=(t,e)=>{const{method:s,params:o}=me(e),r=o.selector?$(t||"javascript",o.selector):void 0,i=`page.${s}`;return n.jsx(n.Fragment,{children:n.jsxs("div",{className:"action-title",title:i,children:[n.jsx("span",{children:i}),r&&n.jsx("div",{className:"action-selector",title:r,children:r}),s==="goto"&&o.url&&n.jsx("div",{className:"action-url",title:o.url,children:o.url})]})})},L=a.createContext(void 0),ge=({guid:t,children:e})=>{const[s,o]=a.useState(void 0),[r,i]=a.useState("none"),[c,u]=a.useState({actions:[],sources:[]}),h=a.useRef({setMode:i,setActions:u});a.useEffect(()=>{const d=new URL(`../${t}`,window.location.toString());d.protocol=window.location.protocol==="https:"?"wss:":"ws:";const x=new WebSocket(d.toString());return o(new fe(x,h.current)),()=>{x.close()}},[t]);const p=a.useMemo(()=>s?{mode:r,actions:c.actions,sources:c.sources,connection:s}:void 0,[c,r,s]);return n.jsx(L.Provider,{value:p,children:e})};class fe{constructor(e,s){w(this,"_lastId",0);w(this,"_webSocket");w(this,"_callbacks",new Map);w(this,"_options");this._webSocket=e,this._callbacks=new Map,this._options=s,this._webSocket.addEventListener("message",o=>{const r=JSON.parse(o.data),{id:i,result:c,error:u,method:h,params:p}=r;if(i){const d=this._callbacks.get(i);if(!d)return;this._callbacks.delete(i),u?d.reject(new Error(u)):d.resolve(c)}else this._dispatchEvent(h,p)})}setMode(e){this._sendMessageNoReply("setMode",{mode:e})}async _sendMessage(e,s){const o=++this._lastId,r={id:o,method:e,params:s};return this._webSocket.send(JSON.stringify(r)),new Promise((i,c)=>{this._callbacks.set(o,{resolve:i,reject:c})})}_sendMessageNoReply(e,s){this._sendMessage(e,s).catch(()=>{})}_dispatchEvent(e,s){if(e==="setMode"){const{mode:o}=s;this._options.setMode(o)}if(e==="setActions"){const{actions:o,sources:r}=s;this._options.setActions({actions:o.filter(i=>i.action.name!=="openPage"&&i.action.name!=="closePage"),sources:r}),window.playwrightSourcesEchoForTest=r}}}const we=()=>{const t=new URLSearchParams(window.location.search),e=t.get("ws"),s=t.get("trace")+".json";return n.jsx(ge,{guid:e,children:n.jsx(le,{trace:s,children:n.jsx(be,{})})})},be=()=>{const t=a.useContext(L),e=a.useContext(b),[s,o]=a.useState(),[r,i]=a.useState(void 0),[c,u]=a.useState(!1),[h,p]=a.useState(""),[d,x]=a.useState(""),[v,S]=a.useState(),T=a.useCallback(l=>{i(l==null?void 0:l.startTime)},[]),g=a.useMemo(()=>t==null?void 0:t.actions.find(l=>l.startTime===r),[t==null?void 0:t.actions,r]);a.useEffect(()=>{var k;const l=(k=e==null?void 0:e.actions.find(M=>M.endTime&&M.endTime===(g==null?void 0:g.endTime)))==null?void 0:k.callId;l&&S(l)},[e,g]);const m=a.useMemo(()=>(t==null?void 0:t.sources.find(l=>l.id===s))||(t==null?void 0:t.sources[0]),[t==null?void 0:t.sources,s]),I=a.useMemo(()=>m?{file:"",line:0,column:0,source:{errors:[],content:m.text}}:void 0,[m]),j=(m==null?void 0:m.language)||"javascript",{boundaries:N}=a.useMemo(()=>{const l={minimum:(e==null?void 0:e.startTime)||0,maximum:(e==null?void 0:e.endTime)||3e4};return l.minimum>l.maximum&&(l.minimum=0,l.maximum=3e4),l.maximum+=(l.maximum-l.minimum)/20,{boundaries:l}},[e]),_=a.useCallback(l=>{p(l),x(""),u(!1)},[]),A=a.useCallback(l=>{x(l),p(l)},[]),E={id:"actions",title:"Actions",component:n.jsx(pe,{sdkLanguage:j,actions:(t==null?void 0:t.actions)||[],selectedAction:g,onSelectedAction:T})},R=n.jsxs(D,{sidebarBackground:!0,children:[n.jsx("div",{style:{width:4}}),n.jsx(f,{icon:"inspect",title:"Pick locator",toggled:c,onClick:()=>{u(!c)}}),n.jsx(f,{icon:"eye",title:"Assert visibility",onClick:()=>{}}),n.jsx(f,{icon:"whole-word",title:"Assert text",onClick:()=>{}}),n.jsx(f,{icon:"symbol-constant",title:"Assert value",onClick:()=>{}}),n.jsx(J,{}),n.jsx(f,{icon:"files",title:"Copy",disabled:!m||!m.text,onClick:()=>{m!=null&&m.text&&K(m.text)}}),n.jsx("div",{style:{flex:"auto"}}),n.jsx("div",{children:"Target:"}),n.jsx(ae,{fileId:s,sources:(t==null?void 0:t.sources)||[],setFileId:l=>{o(l)}}),n.jsx(f,{icon:"color-mode",title:"Toggle color mode",toggled:!1,onClick:()=>q()})]}),F=n.jsx(y,{tabs:[E]}),V=n.jsx(Se,{sdkLanguage:j,callId:v,isInspecting:c,setIsInspecting:u,highlightedLocator:d,setHighlightedLocator:_}),O=n.jsx(ve,{sdkLanguage:j,boundaries:N,setIsInspecting:u,highlightedLocator:h,setHighlightedLocator:A,sourceLocation:I});return n.jsx("div",{className:"vbox workbench",children:n.jsx(C,{sidebarSize:250,orientation:"horizontal",settingName:"recorderActionListSidebar",sidebarIsFirst:!0,main:n.jsx(C,{sidebarSize:250,orientation:"vertical",settingName:"recorderPropertiesSidebar",main:n.jsxs("div",{className:"vbox",children:[R,V]}),sidebar:O}),sidebar:F})})},ve=({sdkLanguage:t,boundaries:e,setIsInspecting:s,highlightedLocator:o,setHighlightedLocator:r,sourceLocation:i})=>{const c=a.useContext(b),u=G(c,e),h=Q(c,e),p=a.useRef(new Map),[d,x]=X("recorderPropertiesTab","source"),v={id:"inspector",title:"Locator",render:()=>n.jsx(oe,{showScreenshot:!1,sdkLanguage:t,setIsInspecting:s,highlightedLocator:o,setHighlightedLocator:r})},S={id:"source",title:"Source",render:()=>n.jsx(re,{sources:p.current,stackFrameLocation:"right",fallbackLocation:i})},T={id:"console",title:"Console",count:u.entries.length,render:()=>n.jsx(Y,{boundaries:e,consoleModel:u})},g={id:"network",title:"Network",count:h.resources.length,render:()=>n.jsx(Z,{boundaries:e,networkModel:h})},m=[S,v,T,g];return n.jsx(y,{tabs:m,selectedTab:d,setSelectedTab:x})},Se=({sdkLanguage:t,callId:e,isInspecting:s,setIsInspecting:o,highlightedLocator:r,setHighlightedLocator:i})=>{const c=a.useContext(b),u=a.useMemo(()=>c==null?void 0:c.actions.find(d=>d.callId===e),[c,e]),h=a.useMemo(()=>{const d=ee(u);return d.action||d.after||d.before},[u]),p=a.useMemo(()=>h?te(h):void 0,[h]);return n.jsx(se,{sdkLanguage:t,testIdAttributeName:"data-testid",isInspecting:s,setIsInspecting:o,highlightedLocator:r,setHighlightedLocator:i,snapshotUrls:p})};(async()=>{if(ne(),window.location.protocol!=="file:"){if(!navigator.serviceWorker)throw new Error(`Service workers are not supported.
+var H=Object.defineProperty;var W=(t,e,s)=>e in t?H(t,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[e]=s;var w=(t,e,s)=>W(t,typeof e!="symbol"?e+"":e,s);import{j as n,r as a,M as B,F as U,n as $,L as z,g as D,T as f,H as J,J as K,t as q,S as C,D as y,y as G,z as Q,h as X,A as Y,N as Z,K as ee,O as te,Q as se,I as oe,E as re,a as ne,c as ce}from"./assets/inspectorTab-wfvwpMHs.js";const ae=({sources:t,fileId:e,setFileId:s})=>n.jsx("select",{className:"source-chooser",hidden:!t.length,title:"Source chooser",value:e,onChange:o=>{s(o.target.selectedOptions[0].value)},children:ie(t)});function ie(t){const e=r=>r.replace(/.*[/\\]([^/\\]+)/,"$1"),s=r=>n.jsx("option",{value:r.id,children:e(r.label)},r.id),o=new Map;for(const r of t){let i=o.get(r.group||"Debugger");i||(i=[],o.set(r.group||"Debugger",i)),i.push(r)}return[...o.entries()].map(([r,i])=>n.jsx("optgroup",{label:r,children:i.filter(c=>(c.group||"Debugger")===r).map(c=>s(c))},r))}const b=a.createContext(void 0),le=({trace:t,children:e})=>{const[s,o]=a.useState(),[r,i]=a.useState(0),c=a.useRef(null);return a.useEffect(()=>(c.current&&clearTimeout(c.current),c.current=setTimeout(async()=>{try{const u=await ue(t);u.sha1!==(s==null?void 0:s.sha1)&&o(u)}catch{o(void 0)}finally{i(r+1)}},500),()=>{c.current&&clearTimeout(c.current)}),[r,s,t]),n.jsx(b.Provider,{value:s==null?void 0:s.model,children:e})};async function ue(t){const e=new URLSearchParams;e.set("trace",t),e.set("limit","1");const o=await(await fetch(`contexts?${e.toString()}`)).json(),r=[];for(const i of o)i.actions.forEach(c=>r.push(c.type+"@"+c.startTime+"-"+c.endTime)),i.events.forEach(c=>r.push(c.type+"@"+c.time));return{model:new B(o),sha1:await U(r.join("|"))}}function de(t,e){return[...t,e].join(" >> internal:control=enter-frame >> ")}function me(t){const{action:e}=t;switch(e.name){case"navigate":return{method:"goto",params:{url:e.url}};case"openPage":case"closePage":throw new Error("Not reached")}const s=de(t.frame.framePath,e.selector);switch(e.name){case"click":return{method:"click",params:{selector:s,strict:!0,modifiers:P(e.modifiers),button:e.button,clickCount:e.clickCount,position:e.position}};case"press":return{method:"press",params:{selector:s,strict:!0,key:[...P(e.modifiers),e.key].join("+")}};case"fill":return{method:"fill",params:{selector:s,strict:!0,value:e.text}};case"setInputFiles":return{method:"setInputFiles",params:{selector:s,strict:!0,localPaths:e.files}};case"check":return{method:"check",params:{selector:s,strict:!0}};case"uncheck":return{method:"uncheck",params:{selector:s,strict:!0}};case"select":return{method:"selectOption",params:{selector:s,strict:!0,options:e.options.map(r=>({value:r}))}};case"assertChecked":return{method:"expect",params:{selector:e.selector,expression:"to.be.checked",isNot:!e.checked}};case"assertText":return{method:"expect",params:{selector:s,expression:"to.have.text",expectedText:[],isNot:!1}};case"assertValue":return{method:"expect",params:{selector:s,expression:"to.have.value",expectedValue:void 0,isNot:!1}};case"assertVisible":return{method:"expect",params:{selector:s,expression:"to.be.visible",isNot:!1}}}}function P(t){const e=[];return t&1&&e.push("Alt"),t&2&&e.push("ControlOrMeta"),t&4&&e.push("ControlOrMeta"),t&8&&e.push("Shift"),e}const he=z,pe=({sdkLanguage:t,actions:e,selectedAction:s,onSelectedAction:o})=>{const r=a.useCallback(i=>xe(t,i),[t]);return n.jsx("div",{className:"vbox",children:n.jsx(he,{name:"actions",items:e,selectedItem:s,onSelected:o,render:r})})},xe=(t,e)=>{const{method:s,params:o}=me(e),r=o.selector?$(t||"javascript",o.selector):void 0,i=`page.${s}`;return n.jsx(n.Fragment,{children:n.jsxs("div",{className:"action-title",title:i,children:[n.jsx("span",{children:i}),r&&n.jsx("div",{className:"action-selector",title:r,children:r}),s==="goto"&&o.url&&n.jsx("div",{className:"action-url",title:o.url,children:o.url})]})})},L=a.createContext(void 0),ge=({guid:t,children:e})=>{const[s,o]=a.useState(void 0),[r,i]=a.useState("none"),[c,u]=a.useState({actions:[],sources:[]}),h=a.useRef({setMode:i,setActions:u});a.useEffect(()=>{const d=new URL(`../${t}`,window.location.toString());d.protocol=window.location.protocol==="https:"?"wss:":"ws:";const x=new WebSocket(d.toString());return o(new fe(x,h.current)),()=>{x.close()}},[t]);const p=a.useMemo(()=>s?{mode:r,actions:c.actions,sources:c.sources,connection:s}:void 0,[c,r,s]);return n.jsx(L.Provider,{value:p,children:e})};class fe{constructor(e,s){w(this,"_lastId",0);w(this,"_webSocket");w(this,"_callbacks",new Map);w(this,"_options");this._webSocket=e,this._callbacks=new Map,this._options=s,this._webSocket.addEventListener("message",o=>{const r=JSON.parse(o.data),{id:i,result:c,error:u,method:h,params:p}=r;if(i){const d=this._callbacks.get(i);if(!d)return;this._callbacks.delete(i),u?d.reject(new Error(u)):d.resolve(c)}else this._dispatchEvent(h,p)})}setMode(e){this._sendMessageNoReply("setMode",{mode:e})}async _sendMessage(e,s){const o=++this._lastId,r={id:o,method:e,params:s};return this._webSocket.send(JSON.stringify(r)),new Promise((i,c)=>{this._callbacks.set(o,{resolve:i,reject:c})})}_sendMessageNoReply(e,s){this._sendMessage(e,s).catch(()=>{})}_dispatchEvent(e,s){if(e==="setMode"){const{mode:o}=s;this._options.setMode(o)}if(e==="setActions"){const{actions:o,sources:r}=s;this._options.setActions({actions:o.filter(i=>i.action.name!=="openPage"&&i.action.name!=="closePage"),sources:r}),window.playwrightSourcesEchoForTest=r}}}const we=()=>{const t=new URLSearchParams(window.location.search),e=t.get("ws"),s=t.get("trace")+".json";return n.jsx(ge,{guid:e,children:n.jsx(le,{trace:s,children:n.jsx(be,{})})})},be=()=>{const t=a.useContext(L),e=a.useContext(b),[s,o]=a.useState(),[r,i]=a.useState(void 0),[c,u]=a.useState(!1),[h,p]=a.useState(""),[d,x]=a.useState(""),[v,S]=a.useState(),T=a.useCallback(l=>{i(l==null?void 0:l.startTime)},[]),g=a.useMemo(()=>t==null?void 0:t.actions.find(l=>l.startTime===r),[t==null?void 0:t.actions,r]);a.useEffect(()=>{var k;const l=(k=e==null?void 0:e.actions.find(M=>M.endTime&&M.endTime===(g==null?void 0:g.endTime)))==null?void 0:k.callId;l&&S(l)},[e,g]);const m=a.useMemo(()=>(t==null?void 0:t.sources.find(l=>l.id===s))||(t==null?void 0:t.sources[0]),[t==null?void 0:t.sources,s]),I=a.useMemo(()=>m?{file:"",line:0,column:0,source:{errors:[],content:m.text}}:void 0,[m]),j=(m==null?void 0:m.language)||"javascript",{boundaries:N}=a.useMemo(()=>{const l={minimum:(e==null?void 0:e.startTime)||0,maximum:(e==null?void 0:e.endTime)||3e4};return l.minimum>l.maximum&&(l.minimum=0,l.maximum=3e4),l.maximum+=(l.maximum-l.minimum)/20,{boundaries:l}},[e]),_=a.useCallback(l=>{p(l),x(""),u(!1)},[]),A=a.useCallback(l=>{x(l),p(l)},[]),E={id:"actions",title:"Actions",component:n.jsx(pe,{sdkLanguage:j,actions:(t==null?void 0:t.actions)||[],selectedAction:g,onSelectedAction:T})},R=n.jsxs(D,{sidebarBackground:!0,children:[n.jsx("div",{style:{width:4}}),n.jsx(f,{icon:"inspect",title:"Pick locator",toggled:c,onClick:()=>{u(!c)}}),n.jsx(f,{icon:"eye",title:"Assert visibility",onClick:()=>{}}),n.jsx(f,{icon:"whole-word",title:"Assert text",onClick:()=>{}}),n.jsx(f,{icon:"symbol-constant",title:"Assert value",onClick:()=>{}}),n.jsx(J,{}),n.jsx(f,{icon:"files",title:"Copy",disabled:!m||!m.text,onClick:()=>{m!=null&&m.text&&K(m.text)}}),n.jsx("div",{style:{flex:"auto"}}),n.jsx("div",{children:"Target:"}),n.jsx(ae,{fileId:s,sources:(t==null?void 0:t.sources)||[],setFileId:l=>{o(l)}}),n.jsx(f,{icon:"color-mode",title:"Toggle color mode",toggled:!1,onClick:()=>q()})]}),F=n.jsx(y,{tabs:[E]}),V=n.jsx(Se,{sdkLanguage:j,callId:v,isInspecting:c,setIsInspecting:u,highlightedLocator:d,setHighlightedLocator:_}),O=n.jsx(ve,{sdkLanguage:j,boundaries:N,setIsInspecting:u,highlightedLocator:h,setHighlightedLocator:A,sourceLocation:I});return n.jsx("div",{className:"vbox workbench",children:n.jsx(C,{sidebarSize:250,orientation:"horizontal",settingName:"recorderActionListSidebar",sidebarIsFirst:!0,main:n.jsx(C,{sidebarSize:250,orientation:"vertical",settingName:"recorderPropertiesSidebar",main:n.jsxs("div",{className:"vbox",children:[R,V]}),sidebar:O}),sidebar:F})})},ve=({sdkLanguage:t,boundaries:e,setIsInspecting:s,highlightedLocator:o,setHighlightedLocator:r,sourceLocation:i})=>{const c=a.useContext(b),u=G(c,e),h=Q(c,e),p=a.useRef(new Map),[d,x]=X("recorderPropertiesTab","source"),v={id:"inspector",title:"Locator",render:()=>n.jsx(oe,{showScreenshot:!1,sdkLanguage:t,setIsInspecting:s,highlightedLocator:o,setHighlightedLocator:r})},S={id:"source",title:"Source",render:()=>n.jsx(re,{sources:p.current,stackFrameLocation:"right",fallbackLocation:i})},T={id:"console",title:"Console",count:u.entries.length,render:()=>n.jsx(Y,{boundaries:e,consoleModel:u})},g={id:"network",title:"Network",count:h.resources.length,render:()=>n.jsx(Z,{boundaries:e,networkModel:h})},m=[S,v,T,g];return n.jsx(y,{tabs:m,selectedTab:d,setSelectedTab:x})},Se=({sdkLanguage:t,callId:e,isInspecting:s,setIsInspecting:o,highlightedLocator:r,setHighlightedLocator:i})=>{const c=a.useContext(b),u=a.useMemo(()=>c==null?void 0:c.actions.find(d=>d.callId===e),[c,e]),h=a.useMemo(()=>{const d=ee(u);return d.action||d.after||d.before},[u]),p=a.useMemo(()=>h?te(h):void 0,[h]);return n.jsx(se,{sdkLanguage:t,testIdAttributeName:"data-testid",isInspecting:s,setIsInspecting:o,highlightedLocator:r,setHighlightedLocator:i,snapshotUrls:p})};(async()=>{if(ne(),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"),navigator.serviceWorker.controller||await new Promise(t=>{navigator.serviceWorker.oncontrollerchange=()=>t()}),setInterval(function(){fetch("ping")},1e4)}ce(document.querySelector("#root")).render(n.jsx(we,{}))})();

package/lib/vite/traceViewer/{recorder.7Wl6HrQl.js → recorder.Db1aK_DY.js}

@@ -1,7 +1,7 @@
 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";
+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-Dw0Gnh1T.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);
@@ -50,6 +50,7 @@ const ModelProvider = ({ trace, 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 = [];
@@ -547,4 +548,4 @@ Make sure to serve the Recorder (${window.location}) via HTTPS or localhost.`);
   }
   createRoot(document.querySelector("#root")).render(/* @__PURE__ */ jsxRuntimeExports.jsx(RecorderView, {}));
 })();
-//# sourceMappingURL=recorder.7Wl6HrQl.js.map
+//# sourceMappingURL=recorder.Db1aK_DY.js.map

package/lib/vite/traceViewer/recorder.html

@@ -6,10 +6,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="icon" href="./playwright-logo.svg" type="image/svg+xml">
     <title>Playwright Recorder</title>
-    <script type="module" crossorigin src="./recorder.BaRuS6Pc.js"></script>
-    <link rel="modulepreload" crossorigin href="./assets/inspectorTab-BPzhNk9r.js">
-    <link rel="stylesheet" crossorigin href="./inspectorTab.DLjBDrQR.css">
-    <link rel="stylesheet" crossorigin href="./recorder.B_SY1GJM.css">
+    <script type="module" crossorigin src="./recorder.Fwf59ZKh.js"></script>
+    <link rel="modulepreload" crossorigin href="./assets/inspectorTab-DOc4D3cX.js">
+    <link rel="stylesheet" crossorigin href="./inspectorTab.DGJWXOSd.css">
+    <link rel="stylesheet" crossorigin href="./recorder.DBDpiNOK.css">
   </head>
   <body>
     <div id="root"></div>