chore(trace): add context create event for test runner (#30697)

Adding metadata event to the test.trace to simplify time computation
logic.

Author: yury-s

packages/playwright-core/src/server/trace/recorder/tracing.ts

@@ -45,7 +45,7 @@ import type { ConsoleMessage } from '../../console';
 import { Dispatcher } from '../../dispatchers/dispatcher';
 import { serializeError } from '../../errors';
 
-const version: trace.VERSION = 6;
+const version: trace.VERSION = 7;
 
 export type TracerOptions = {
   name?: string;
@@ -100,10 +100,12 @@ export class Tracing extends SdkObject implements InstrumentationListener, Snaps
     this._contextCreatedEvent = {
       version,
       type: 'context-options',
+      origin: 'library',
       browserName: '',
       options: {},
       platform: process.platform,
       wallTime: 0,
+      monotonicTime: 0,
       sdkLanguage: context.attribution.playwright.options.sdkLanguage,
       testIdAttributeName
     };
@@ -177,7 +179,12 @@ export class Tracing extends SdkObject implements InstrumentationListener, Snaps
       this._allocateNewTraceFile(this._state);
 
     this._fs.mkdir(path.dirname(this._state.traceFile));
-    const event: trace.TraceEvent = { ...this._contextCreatedEvent, title: options.title, wallTime: Date.now() };
+    const event: trace.TraceEvent = {
+      ...this._contextCreatedEvent,
+      title: options.title,
+      wallTime: Date.now(),
+      monotonicTime: monotonicTime()
+    };
     this._fs.appendFile(this._state.traceFile, JSON.stringify(event) + '\n');
 
     this._context.instrumentation.addListener(this, this._context);

packages/playwright/src/worker/testTracing.ts

@@ -28,6 +28,7 @@ import type { TestInfoImpl } from './testInfo';
 
 export type Attachment = TestInfo['attachments'][0];
 export const testTraceEntryName = 'test.trace';
+const version: trace.VERSION = 7;
 let traceOrdinal = 0;
 
 type TraceFixtureValue =  PlaywrightWorkerOptions['trace'] | undefined;
@@ -41,11 +42,24 @@ export class TestTracing {
   private _temporaryTraceFiles: string[] = [];
   private _artifactsDir: string;
   private _tracesDir: string;
+  private _contextCreatedEvent: trace.ContextCreatedTraceEvent;
 
   constructor(testInfo: TestInfoImpl, artifactsDir: string) {
     this._testInfo = testInfo;
     this._artifactsDir = artifactsDir;
     this._tracesDir = path.join(this._artifactsDir, 'traces');
+    this._contextCreatedEvent = {
+      version,
+      type: 'context-options',
+      origin: 'testRunner',
+      browserName: '',
+      options: {},
+      platform: process.platform,
+      wallTime: Date.now(),
+      monotonicTime: monotonicTime(),
+      sdkLanguage: 'javascript',
+    };
+    this._appendTraceEvent(this._contextCreatedEvent);
   }
 
   private _shouldCaptureTrace() {

packages/trace-viewer/src/entries.ts

@@ -26,7 +26,7 @@ export type ContextEntry = {
   browserName: string;
   channel?: string;
   platform?: string;
-  wallTime?: number;
+  wallTime: number;
   sdkLanguage?: Language;
   testIdAttributeName?: string;
   title?: string;
@@ -58,6 +58,7 @@ export function createEmptyContext(): ContextEntry {
     origin: 'testRunner',
     traceUrl: '',
     startTime: Number.MAX_SAFE_INTEGER,
+    wallTime: Number.MAX_SAFE_INTEGER,
     endTime: 0,
     browserName: '',
     options: {

packages/trace-viewer/src/traceModernizer.ts

@@ -18,6 +18,7 @@ import type * as trace from '@trace/trace';
 import type * as traceV3 from './versions/traceV3';
 import type * as traceV4 from './versions/traceV4';
 import type * as traceV5 from './versions/traceV5';
+import type * as traceV6 from './versions/traceV6';
 import type { ActionEntry, ContextEntry, PageEntry } from './entries';
 import type { SnapshotStorage } from './snapshotStorage';
 
@@ -71,12 +72,13 @@ export class TraceModernizer {
     switch (event.type) {
       case 'context-options': {
         this._version = event.version;
-        contextEntry.origin = 'library';
+        contextEntry.origin = event.origin;
         contextEntry.browserName = event.browserName;
         contextEntry.channel = event.channel;
         contextEntry.title = event.title;
         contextEntry.platform = event.platform;
         contextEntry.wallTime = event.wallTime;
+        contextEntry.startTime = event.monotonicTime;
         contextEntry.sdkLanguage = event.sdkLanguage;
         contextEntry.options = event.options;
         contextEntry.testIdAttributeName = event.testIdAttributeName;
@@ -145,11 +147,11 @@ export class TraceModernizer {
         break;
       }
       case 'resource-snapshot':
-        this._snapshotStorage!.addResource(event.snapshot);
+        this._snapshotStorage.addResource(event.snapshot);
         contextEntry.resources.push(event.snapshot);
         break;
       case 'frame-snapshot':
-        this._snapshotStorage!.addFrameSnapshot(event.snapshot);
+        this._snapshotStorage.addFrameSnapshot(event.snapshot);
         break;
     }
     // Make sure there is a page entry for each page, even without screencast frames,
@@ -170,12 +172,18 @@ export class TraceModernizer {
     }
   }
 
+  private _processedContextCreatedEvent() {
+    return this._version !== undefined;
+  }
+
   private _modernize(event: any): trace.TraceEvent[] {
-    if (this._version === undefined)
+    // In trace 6->7 we also need to modernize context-options event.
+    let version = this._version || event.version;
+    if (version === undefined)
       return [event];
-    const lastVersion: trace.VERSION = 6;
+    const lastVersion: trace.VERSION = 7;
     let events = [event];
-    for (let version = this._version; version < lastVersion; ++version)
+    for (; version < lastVersion; ++version)
       events = (this as any)[`_modernize_${version}_to_${version + 1}`].call(this, events);
     return events;
   }
@@ -341,8 +349,8 @@ export class TraceModernizer {
     return event;
   }
 
-  _modernize_5_to_6(events: traceV5.TraceEvent[]): trace.TraceEvent[] {
-    const result: trace.TraceEvent[] = [];
+  _modernize_5_to_6(events: traceV5.TraceEvent[]): traceV6.TraceEvent[] {
+    const result: traceV6.TraceEvent[] = [];
     for (const event of events) {
       result.push(event);
       if (event.type !== 'after' || !event.log.length)
@@ -358,4 +366,35 @@ export class TraceModernizer {
     }
     return result;
   }
+
+  _modernize_6_to_7(events: traceV6.TraceEvent[]): trace.TraceEvent[] {
+    const result: trace.TraceEvent[] = [];
+    if (!this._processedContextCreatedEvent() && events[0].type !== 'context-options') {
+      const event: trace.ContextCreatedTraceEvent = {
+        type: 'context-options',
+        origin: 'testRunner',
+        version: 7,
+        browserName: '',
+        options: {},
+        platform: process.platform,
+        wallTime: 0,
+        monotonicTime: 0,
+        sdkLanguage: 'javascript',
+      };
+      result.push(event);
+    }
+    for (const event of events) {
+      if (event.type === 'context-options') {
+        result.push({ ...event, monotonicTime: 0, origin: 'library' });
+        continue;
+      }
+      // Take wall and monotonic time from the first event.
+      if (!this._contextEntry.wallTime && event.type === 'before')
+        this._contextEntry.wallTime = event.wallTime;
+      if (!this._contextEntry.startTime && event.type === 'before')
+        this._contextEntry.startTime = event.startTime;
+      result.push(event);
+    }
+    return result;
+  }
 }