|
| 1 | +import { type CDPSession, expect, test } from '@playwright/test' |
| 2 | +import { useFixture } from './fixture' |
| 3 | + |
| 4 | +test.describe('performance-track', () => { |
| 5 | + // Server Components performance tracks are flaky and require a Chromium trace |
| 6 | + // plus a React build that emits them (canary/experimental), so this is opt-in |
| 7 | + // via `TEST_PERFORMANCE_TRACK=1` for local runs and is not exercised in CI. |
| 8 | + test.skip(!process.env.TEST_PERFORMANCE_TRACK) |
| 9 | + |
| 10 | + const f = useFixture({ root: 'examples/performance-track', mode: 'dev' }) |
| 11 | + |
| 12 | + test('emits server component performance tracks', async ({ |
| 13 | + browserName, |
| 14 | + page, |
| 15 | + }) => { |
| 16 | + test.skip(browserName !== 'chromium') |
| 17 | + |
| 18 | + const session = await page.context().newCDPSession(page) |
| 19 | + await startTracing(session) |
| 20 | + |
| 21 | + await page.goto(f.url()) |
| 22 | + // Wait for the innermost step so the whole waterfall has resolved. |
| 23 | + await expect( |
| 24 | + page.getByText('SlowServerComponent resolved after 500ms'), |
| 25 | + ).toBeVisible() |
| 26 | + await page.getByRole('link', { name: 'About' }).click() |
| 27 | + await expect(page.getByRole('heading', { name: 'About' })).toBeVisible() |
| 28 | + await expect( |
| 29 | + page.getByText('SlowServerComponent resolved after 500ms'), |
| 30 | + ).toBeVisible() |
| 31 | + await page.waitForTimeout(1000) |
| 32 | + |
| 33 | + const spans = await stopTracingAndCollectServerComponentSpans(session) |
| 34 | + const slowSpans = spans.filter( |
| 35 | + (span) => span.name === 'SlowServerComponent', |
| 36 | + ) |
| 37 | + // Two renders (Home + About), each with a nested pair of |
| 38 | + // SlowServerComponent spans forming the waterfall. |
| 39 | + expect(slowSpans).toHaveLength(4) |
| 40 | + expect(slowSpans.every((span) => span.duration >= 200)).toBe(true) |
| 41 | + }) |
| 42 | +}) |
| 43 | + |
| 44 | +// |
| 45 | +// CDP tracing helpers |
| 46 | +// |
| 47 | + |
| 48 | +// We drive the CDP `Tracing` domain (Tracing.start / tracingComplete stream, |
| 49 | +// read via IO): https://chromedevtools.github.io/devtools-protocol/tot/Tracing/ |
| 50 | +// CDP leaves the individual event opaque (`dataCollected.value: object[]`), so |
| 51 | +// this minimal shape follows Chrome's Trace Event Format instead: |
| 52 | +// https://docs.google.com/document/d/1CvAClvFfyA5R-PhYUmn5OOQtYMH4h6I0nSsKchNAySU |
| 53 | +interface TraceEvent { |
| 54 | + name: string |
| 55 | + ph: string |
| 56 | + ts: number |
| 57 | + id?: string |
| 58 | + id2?: { local?: string } |
| 59 | + args?: unknown |
| 60 | +} |
| 61 | + |
| 62 | +// A named Server Components track entry with its measured duration (ms), |
| 63 | +// derived from paired begin/end trace events. |
| 64 | +interface ServerComponentSpan { |
| 65 | + name: string |
| 66 | + duration: number |
| 67 | +} |
| 68 | + |
| 69 | +async function startTracing(session: CDPSession): Promise<void> { |
| 70 | + await session.send('Tracing.start', { |
| 71 | + categories: '-*,devtools.timeline,blink.user_timing', |
| 72 | + transferMode: 'ReturnAsStream', |
| 73 | + }) |
| 74 | +} |
| 75 | + |
| 76 | +async function stopTracingAndCollectServerComponentSpans( |
| 77 | + session: CDPSession, |
| 78 | +): Promise<ServerComponentSpan[]> { |
| 79 | + const events = await stopTracing(session) |
| 80 | + const ends = new Map( |
| 81 | + events |
| 82 | + .filter((event) => event.ph === 'e') |
| 83 | + .map((event) => [traceId(event), event]), |
| 84 | + ) |
| 85 | + return events |
| 86 | + .filter( |
| 87 | + (event) => |
| 88 | + event.ph === 'b' && |
| 89 | + JSON.stringify(event.args).includes('Server Components'), |
| 90 | + ) |
| 91 | + .map((event) => ({ |
| 92 | + name: event.name.replaceAll('\u200b', ''), |
| 93 | + duration: ((ends.get(traceId(event))?.ts ?? event.ts) - event.ts) / 1000, |
| 94 | + })) |
| 95 | +} |
| 96 | + |
| 97 | +async function stopTracing(session: CDPSession): Promise<TraceEvent[]> { |
| 98 | + const tracingComplete = new Promise<string>((resolve, reject) => { |
| 99 | + session.once('Tracing.tracingComplete', ({ stream }) => { |
| 100 | + if (stream) resolve(stream) |
| 101 | + else reject(new Error('Trace stream is missing')) |
| 102 | + }) |
| 103 | + }) |
| 104 | + await session.send('Tracing.end') |
| 105 | + const stream = await tracingComplete |
| 106 | + let trace = '' |
| 107 | + for (;;) { |
| 108 | + const chunk = await session.send('IO.read', { handle: stream }) |
| 109 | + trace += chunk.data |
| 110 | + if (chunk.eof) break |
| 111 | + } |
| 112 | + await session.send('IO.close', { handle: stream }) |
| 113 | + return (JSON.parse(trace) as { traceEvents: TraceEvent[] }).traceEvents |
| 114 | +} |
| 115 | + |
| 116 | +function traceId(event: TraceEvent): string | undefined { |
| 117 | + return event.id2?.local ?? event.id |
| 118 | +} |
0 commit comments