@checkly/playwright-core 1.48.24-beta.0 → 1.48.24-maxi

package/lib/vite/traceViewer/recorder.DLgqV9db.css

@@ -0,0 +1,15 @@
+/*
+  Copyright (c) Microsoft Corporation.
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/

package/lib/vite/traceViewer/{recorder.BaRuS6Pc.js → recorder.DNMfnSiu.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-BPzhNk9r.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-BuJ3wAX_.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.DVrkq3Um.js

@@ -0,0 +1,551 @@
+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, Q as sha1, M as MultiTraceModel, L as ListView, o as asLocator, g as Toolbar, T as ToolbarButton, U as ToolbarSeparator, V as copy, t as toggleTheme, S as SplitView, H as TabbedPane, E as useConsoleTabModel, F as useNetworkTabModel, h as useSetting, W as collectSnapshots, X as extendSnapshot, Y as SnapshotView, O as SourceTab, J as InspectorTab, K as ConsoleTab, N as NetworkTab, a as applyTheme, c as clientExports } from "./assets/inspectorTab-CwgfffWb.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);
+  }
+  clientExports.createRoot(document.querySelector("#root")).render(/* @__PURE__ */ jsxRuntimeExports.jsx(RecorderView, {}));
+})();
+//# sourceMappingURL=recorder.DVrkq3Um.js.map

package/lib/vite/traceViewer/recorder.html

@@ -6,8 +6,8 @@
     <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">
+    <script type="module" crossorigin src="./recorder.DNMfnSiu.js"></script>
+    <link rel="modulepreload" crossorigin href="./assets/inspectorTab-BuJ3wAX_.js">
     <link rel="stylesheet" crossorigin href="./inspectorTab.DLjBDrQR.css">
     <link rel="stylesheet" crossorigin href="./recorder.B_SY1GJM.css">
   </head>