feat(trace-viewer): show test annotations in the trace viewer (#42060)

Author: pavelfeldman

packages/isomorphic/trace/entries.ts

@@ -42,6 +42,7 @@ export type ContextEntry = {
   hasSource: boolean;
   contextId: string;
   testTimeout?: number;
+  annotations?: trace.TraceEventAnnotation[];
 };
 
 export type PageEntry = {

packages/isomorphic/trace/traceModel.ts

@@ -89,6 +89,7 @@ export class TraceModel {
   readonly actionCounters: Map<string, number>;
   readonly traceUri: string;
   readonly testTimeout?: number;
+  readonly annotations?: trace.TraceEventAnnotation[];
   readonly pagerefToTitle = new Map<string, string>();
   readonly contextToTitle = new Map<ContextEntry, string>();
 
@@ -106,6 +107,7 @@ export class TraceModel {
     this.title = libraryContext?.title || '';
     this.options = libraryContext?.options || {};
     this.testTimeout = contexts.find(c => c.origin === 'testRunner')?.testTimeout;
+    this.annotations = contexts.find(c => c.origin === 'testRunner')?.annotations;
     // Next call updates all timestamps for all events in library contexts, so it must be done first.
     this.actions = mergeActionsAndUpdateTiming(contexts);
     this.pages = ([] as PageEntry[]).concat(...contexts.map(c => c.pages));

packages/isomorphic/trace/traceModernizer.ts

@@ -99,6 +99,7 @@ export class TraceModernizer {
         contextEntry.testIdAttributeName = event.testIdAttributeName;
         contextEntry.contextId = event.contextId ?? '';
         contextEntry.testTimeout = event.testTimeout;
+        contextEntry.annotations = event.annotations;
         break;
       }
       case 'screencast-frame': {

packages/playwright/src/worker/testTracing.ts

@@ -172,6 +172,7 @@ export class TestTracing {
 
   async stopIfNeeded() {
     this._contextCreatedEvent.testTimeout = this._testInfo.timeout;
+    this._contextCreatedEvent.annotations = this._testInfo.annotations.map(({ type, description }) => ({ type, description }));
 
     if (!this._options)
       return;
@@ -290,7 +291,7 @@ export class TestTracing {
     });
   }
 
-  appendAfterActionForStep(callId: string, error?: trace.SerializedError['error'], attachments: Attachment[] = [], annotations?: trace.AfterActionTraceEventAnnotation[]) {
+  appendAfterActionForStep(callId: string, error?: trace.SerializedError['error'], attachments: Attachment[] = [], annotations?: trace.TraceEventAnnotation[]) {
     this._appendTraceEvent({
       type: 'after',
       callId,

packages/trace-viewer/src/ui/uiModeTraceView.tsx

@@ -96,7 +96,7 @@ export const TraceView: React.FC<{
     fallbackLocation={item.testFile}
     isLive={model?.isLive}
     status={item.treeItem?.status}
-    annotations={item.testCase?.annotations ?? []}
+    defaultAnnotations={item.testCase?.annotations ?? []}
     onOpenExternally={onOpenExternally}
     revealSource={revealSource}
   />;

packages/trace-viewer/src/ui/workbench.tsx

@@ -57,7 +57,7 @@ export type WorkbenchProps = {
   isLive?: boolean;
   hideTimeline?: boolean;
   status?: UITestStatus;
-  annotations?: TestAnnotation[];
+  defaultAnnotations?: TestAnnotation[];
   inert?: boolean;
   onOpenExternally?: (location: SourceLocation) => void;
   revealSource?: boolean;
@@ -72,7 +72,9 @@ export const Workbench: React.FunctionComponent<WorkbenchProps> = props => {
 };
 
 const PartitionedWorkbench: React.FunctionComponent<WorkbenchProps & { partition: string }> = props => {
-  const { partition, model, showSourcesFirst, rootDir, fallbackLocation, isLive, hideTimeline, status, annotations, inert, onOpenExternally, revealSource, testRunMetadata } = props;
+  const { partition, model, showSourcesFirst, rootDir, fallbackLocation, isLive, hideTimeline, status, inert, onOpenExternally, revealSource, testRunMetadata } = props;
+  // Default annotations come from the test model before the test runs, shown for the empty workbench / trace.
+  const annotations = model?.annotations ?? props.defaultAnnotations;
 
   // UI settings, shared for all models.
   const [selectedNavigatorTab, setSelectedNavigatorTab] = useSetting<string>('navigatorTab',  'actions');

packages/trace/src/trace.ts

@@ -94,6 +94,7 @@ export type ContextCreatedTraceEvent = {
   testIdAttributeName?: string,
   contextId?: string,
   testTimeout?: number,
+  annotations?: TraceEventAnnotation[],
 };
 
 export type ScreencastFrameTraceEvent = {
@@ -137,7 +138,7 @@ export type AfterActionTraceEventAttachment = {
   base64?: string;
 };
 
-export type AfterActionTraceEventAnnotation = {
+export type TraceEventAnnotation = {
   type: string,
   description?: string
 };
@@ -149,7 +150,7 @@ export type AfterActionTraceEvent = {
   afterSnapshot?: string;
   error?: SerializedError['error'];
   attachments?: AfterActionTraceEventAttachment[];
-  annotations?: AfterActionTraceEventAnnotation[];
+  annotations?: TraceEventAnnotation[];
   result?: any;
   point?: Point;
 };

tests/playwright-test/playwright.trace.spec.ts

@@ -1427,3 +1427,28 @@ test('should record custom test timeout in trace', async ({ runInlineTest }, tes
   const trace = await parseTrace(testInfo.outputPath('test-results', 'a-pass', 'trace.zip'));
   expect(trace.model.testTimeout).toBe(120_000);
 });
+
+test('should record test annotations in trace', async ({ runInlineTest }, testInfo) => {
+  test.info().annotations.push({ type: 'issue', description: 'https://github.com/microsoft/playwright/issues/42035' });
+
+  const result = await runInlineTest({
+    'a.spec.ts': `
+      import { test, expect } from '@playwright/test';
+      test('pass', {
+        annotation: { type: 'note1', description: 'static annotation' },
+      }, async ({}) => {
+        test.info().annotations.push({ type: 'note2', description: 'dynamic annotation' });
+        test.info().annotations.push({ type: 'note3' });
+      });
+    `,
+  }, { trace: 'on' });
+
+  expect(result.exitCode).toBe(0);
+  expect(result.passed).toBe(1);
+  const trace = await parseTrace(testInfo.outputPath('test-results', 'a-pass', 'trace.zip'));
+  expect(trace.model.annotations).toEqual([
+    { type: 'note1', description: 'static annotation' },
+    { type: 'note2', description: 'dynamic annotation' },
+    { type: 'note3' },
+  ]);
+});