test(org): report where each route's time goes

contentReadyMs starts after the document's load and says nothing about why, so a
route now also reports its load and its slowest reads.

Author: waleedlatif1

apps/sim/scripts/org-redesign-e2e/checks/walk.ts

@@ -70,6 +70,8 @@ function routesFor(persona: Persona): { name: string; path: string }[] {
   return shared
 }
 
+/** Enough to name what a slow route was waiting on. */
+const SLOWEST_READS = 5
 /** How far a probe grows the viewport to see which panes follow it. */
 const PANE_PROBE_PX = 200
 /** Home's composer types its suggestion out, then holds it this long before deleting it. */
@@ -132,7 +134,10 @@ async function walkOne(persona: Persona, viewport: Viewport, theme: Theme) {
         const failures: string[] = []
         if (persona === CONNECTED) await stubConnectedHome(page)
         for (const route of routesFor(persona)) {
+          session.reads.length = 0
+          const navigated = performance.now()
           const response = await page.goto(orgUrl(`/${route.path}`), { timeout: 60_000 })
+          const documentMs = Math.round(performance.now() - navigated)
           const contentReadyMs = await session.contentReady().catch((error) => {
             failures.push(`${route.name}: ${getErrorMessage(error)}`)
             return null
@@ -174,6 +179,9 @@ async function walkOne(persona: Persona, viewport: Viewport, theme: Theme) {
             screenshot,
             platformSurfaces: facts.surfaces,
             contentReadyMs,
+            documentMs,
+            slowestReads: [...session.reads].sort((a, b) => b.ms - a.ms).slice(0, SLOWEST_READS),
+            readCount: session.reads.length,
           })
           if ((response?.status() ?? 500) >= 400)
             failures.push(`${route.name} status ${response?.status()}`)

apps/sim/scripts/org-redesign-e2e/harness.ts

@@ -78,6 +78,11 @@ interface Problem {
   detail: string
 }
 
+interface PageRead {
+  path: string
+  ms: number
+}
+
 interface FirstPaint {
   persona: string
   page: string
@@ -109,6 +114,11 @@ export const routes: {
   platformSurfaces: number
   /** From the document's load to no read or skeleton left, or null if it never got there. */
   contentReadyMs: number | null
+  /** The document's own load, which `contentReadyMs` starts after. */
+  documentMs: number
+  /** Where the route's time went: its slowest reads, and how many it sent. */
+  slowestReads: PageRead[]
+  readCount: number
 }[] = []
 export const firstPaints: FirstPaint[] = []
 const unexpected: Problem[] = []
@@ -260,6 +270,9 @@ class Session {
   /** The document a navigation is loading, until it replaces the page. */
   private loadingDocument: Request | null = null
   readonly requests: { method: string; path: string; type: string }[] = []
+  /** The page's own reads and how long each took, from the last navigation a walk started. */
+  readonly reads: PageRead[] = []
+  private readonly readStarted = new Map<Request, number>()
 
   constructor(
     readonly context: BrowserContext,
@@ -287,6 +300,7 @@ class Session {
       if (isPageRead(request)) {
         this.inflight.add(request)
         this.lastActivity = Date.now()
+        this.readStarted.set(request, Date.now())
       }
       if (isSameOrigin(request.url()))
         this.requests.push({
@@ -305,6 +319,13 @@ class Session {
     })
     const settled = (request: Request) => {
       if (this.inflight.delete(request)) this.lastActivity = Date.now()
+      const started = this.readStarted.get(request)
+      if (started === undefined) return
+      this.readStarted.delete(request)
+      this.reads.push({
+        path: `${request.method()} ${pathOf(request.url())}`,
+        ms: Date.now() - started,
+      })
     }
     page.on('requestfinished', settled)
     page.on('requestfailed', (request) => {