feat(trace viewer): show baseURL in Metadata pane (#31852)

Resolves https://github.com/microsoft/playwright/issues/31847 by adding
playwright config's `baseURL` value to the `context-options` trace
event, and showing that in the Trace Viewer.

Because the added property is optional, I didn't increment the trace
format version.

I've also considered pulling the `baseURL` from the existing
`browser.newContext` step to get around modifying the trace format, but
that felt pretty hacky.


https://github.com/user-attachments/assets/ecaef747-727d-4937-9ca3-1605ca9907b9

---------

Signed-off-by: Simon Knott <info@simonknott.de>
Co-authored-by: Dmitry Gozman <dgozman@gmail.com>

packages/trace-viewer/src/ui/callTab.css

@@ -73,6 +73,14 @@
   overflow: hidden;
 }
 
+a.call-value {
+  text-decoration: none;
+}
+
+a.call-value:hover {
+  text-decoration: underline;
+}
+
 .call-value::before {
   content: '\00a0';
 }

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

@@ -33,6 +33,12 @@ export const MetadataView: React.FunctionComponent<{
     {model.channel && <div className='call-line'>channel:<span className='call-value string' title={model.channel}>{model.channel}</span></div>}
     {model.platform && <div className='call-line'>platform:<span className='call-value string' title={model.platform}>{model.platform}</span></div>}
     {model.options.userAgent && <div className='call-line'>user agent:<span className='call-value datetime' title={model.options.userAgent}>{model.options.userAgent}</span></div>}
+    {model.options.baseURL && (
+      <>
+        <div className='call-section' style={{ paddingTop: 2 }}>Config</div>
+        <div className='call-line'>baseURL:<a className='call-value string' href={model.options.baseURL} title={model.options.baseURL} target='_blank' rel='noopener noreferrer'>{model.options.baseURL}</a></div>
+      </>
+    )}
     <div className='call-section'>Viewport</div>
     {model.options.viewport && <div className='call-line'>width:<span className='call-value number' title={String(!!model.options.viewport?.width)}>{model.options.viewport.width}</span></div>}
     {model.options.viewport && <div className='call-line'>height:<span className='call-value number' title={String(!!model.options.viewport?.height)}>{model.options.viewport.height}</span></div>}

packages/trace/src/trace.ts

@@ -24,6 +24,7 @@ export type Size = { width: number, height: number };
 export type VERSION = 7;
 
 export type BrowserContextEventOptions = {
+  baseURL?: string,
   viewport?: Size,
   deviceScaleFactor?: number,
   isMobile?: boolean,

tests/config/traceViewerFixtures.ts

@@ -44,6 +44,7 @@ class TraceViewerPage {
   consoleStacks: Locator;
   stackFrames: Locator;
   networkRequests: Locator;
+  metadataTab: Locator;
   snapshotContainer: Locator;
 
   constructor(public page: Page) {
@@ -57,6 +58,7 @@ class TraceViewerPage {
     this.stackFrames = page.getByTestId('stack-trace-list').locator('.list-view-entry');
     this.networkRequests = page.getByTestId('network-list').locator('.list-view-entry');
     this.snapshotContainer = page.locator('.snapshot-container iframe.snapshot-visible[name=snapshot]');
+    this.metadataTab = page.locator('.metadata-view');
   }
 
   async actionIconsText(action: string) {
@@ -93,6 +95,10 @@ class TraceViewerPage {
     await this.page.click('text="Network"');
   }
 
+  async showMetadataTab() {
+    await this.page.click('text="Metadata"');
+  }
+
   @step
   async snapshotFrame(actionName: string, ordinal: number = 0, hasSubframe: boolean = false): Promise<FrameLocator> {
     await this.selectAction(actionName, ordinal);

tests/library/trace-viewer.spec.ts

@@ -31,7 +31,9 @@ test.slow();
 let traceFile: string;
 
 test.beforeAll(async function recordTrace({ browser, browserName, browserType, server }, workerInfo) {
-  const context = await browser.newContext();
+  const context = await browser.newContext({
+    baseURL: 'https://example.com',
+  });
   await context.tracing.start({ name: 'test', screenshots: true, snapshots: true, sources: true });
   const page = await context.newPage();
   await page.goto(`data:text/html,<!DOCTYPE html><html>Hello world</html>`);
@@ -1368,3 +1370,12 @@ test('should allow hiding route actions', {
     /route.fulfill/,
   ]);
 });
+
+test('should show baseURL in metadata pane', {
+  annotation: { type: 'issue', description: 'https://github.com/microsoft/playwright/issues/31847' },
+}, async ({ showTraceViewer }) => {
+  const traceViewer = await showTraceViewer([traceFile]);
+  await traceViewer.selectAction('page.evaluate');
+  await traceViewer.showMetadataTab();
+  await expect(traceViewer.metadataTab).toContainText('baseURL:https://example.com');
+});