fix(trace-viewer): show ellipsis and copy full Return value

packages/playwright-core/src/tools/trace/traceSnapshot.ts

@@ -87,11 +87,12 @@ async function serveTraceSnapshot(storage: SnapshotStorage, loader: TraceLoader,
   const snapshotServer = new SnapshotServer(storage, sha1 => loader.resourceForSha1(sha1));
   const httpServer = new HttpServer();
 
-  httpServer.routePrefix('/snapshot', (request: any, response: any) => {
+  httpServer.routePrefix('/snapshot/', (request: any, response: any) => {
     const url = new URL('http://localhost' + request.url!);
+    const pageOrFrameId = url.pathname.substring('/snapshot/'.length);
     const searchParams = url.searchParams;
     searchParams.set('name', snapshotKey);
-    const snapshotResponse = snapshotServer.serveSnapshot(pageId, searchParams, '/snapshot');
+    const snapshotResponse = snapshotServer.serveSnapshot(pageOrFrameId, searchParams, url.href);
     response.statusCode = snapshotResponse.status;
     snapshotResponse.headers.forEach((value: string, key: string) => response.setHeader(key, value));
     snapshotResponse.text().then((text: string) => response.end(text));
@@ -100,7 +101,7 @@ async function serveTraceSnapshot(storage: SnapshotStorage, loader: TraceLoader,
 
   httpServer.routePrefix('/', (_request: any, response: any) => {
     response.statusCode = 302;
-    response.setHeader('Location', '/snapshot');
+    response.setHeader('Location', `/snapshot/${pageId}?name=${encodeURIComponent(snapshotKey)}`);
     response.end();
     return true;
   });

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

@@ -84,12 +84,15 @@ function renderDuration(action: ActionTraceEventInContext): string {
 }
 
 function renderProperty(property: Property) {
-  let text = property.text.replace(/\n/g, '↵');
+  let text = property.text;
+  if (text.length > 1000)
+    text = text.slice(0, 1000) + '…';
+  text = text.replace(/\n/g, '↵');
   if (property.type === 'string')
     text = `"${text}"`;
   return (
     <div key={property.name} className='call-line'>
-      {property.name}:<span className={clsx('call-value', property.type)} title={property.text}>{text}</span>
+      {property.name}:<span className={clsx('call-value', property.type)} title={text}>{text}</span>
       { ['literal', 'string', 'number', 'object', 'locator'].includes(property.type) &&
         <CopyToClipboard value={property.text} />
       }
@@ -121,7 +124,7 @@ function propertyToString(event: ActionTraceEvent, name: string, value: any, sdk
     return { text: String(value), type, name };
   if (value.guid)
     return { text: '<handle>', type: 'handle', name };
-  return { text: JSON.stringify(value).slice(0, 1000), type: 'object', name };
+  return { text: JSON.stringify(value), type: 'object', name };
 }
 
 function parseSerializedValue(value: SerializedValue, handles: any[] | undefined): any {

tests/library/trace-viewer.spec.ts

@@ -389,6 +389,28 @@ test('should show null as a param', async ({ showTraceViewer, browserName }) =>
   ]);
 });
 
+test('should truncate long return values with ellipsis but copy full value', async ({ page, runAndTrace }) => {
+  test.info().annotations.push({ type: 'issue', description: 'https://github.com/microsoft/playwright/issues/40527' });
+  const traceViewer = await runAndTrace(async () => {
+    await page.evaluate(() => {
+      const value: Record<string, string> = {};
+      for (let i = 0; i < 100; i++)
+        value['key_' + i] = 'value_' + i + '_padding_padding_padding';
+      return value;
+    });
+  });
+  await traceViewer.selectAction('Evaluate');
+  const returnValue = traceViewer.callLines.filter({ hasText: 'value:' });
+  await expect(returnValue.locator('.call-value')).toHaveText(/…$/);
+
+  await traceViewer.page.context().grantPermissions(['clipboard-read', 'clipboard-write']);
+  await returnValue.hover();
+  await returnValue.getByRole('button', { name: 'Copy' }).click();
+  const copied = await traceViewer.page.evaluate(() => navigator.clipboard.readText());
+  expect(copied.length).toBeGreaterThan(1000);
+  expect(copied.endsWith('…')).toBe(false);
+});
+
 test('should have correct snapshot size', async ({ showTraceViewer }, testInfo) => {
   const traceViewer = await showTraceViewer(traceFile);
   await traceViewer.selectAction('SET VIEWPORT');

tests/mcp/trace-cli-fixtures.ts

@@ -57,7 +57,27 @@ export const test = baseTest
         server.setContent('/page2', `
           <html>
             <head><title>Page 2</title></head>
-            <body><h1>Page 2</h1></body>
+            <body>
+              <h1>Page 2</h1>
+              <iframe src="/iframe" id="frame1"></iframe>
+            </body>
+          </html>
+        `, 'text/html');
+
+        server.setContent('/iframe', `
+          <html>
+            <head><title>Iframe</title></head>
+            <body>
+              <p>Iframe content</p>
+              <iframe src="/iframe-inner" id="frame2"></iframe>
+            </body>
+          </html>
+        `, 'text/html');
+
+        server.setContent('/iframe-inner', `
+          <html>
+            <head><title>Inner iframe</title></head>
+            <body><p>Innermost</p></body>
           </html>
         `, 'text/html');
 
@@ -84,7 +104,9 @@ export const test = baseTest
 
         // Navigate to another page
         await page.locator('a').click();
-        await page.waitForURL('**/page2');
+
+        // Click into innermost frame
+        await page.frameLocator('#frame1').frameLocator('#frame2').locator('p').click();
 
         await page.close();
         const tmpDir = path.join(workerInfo.project.outputDir, 'pw-trace-cli-' + workerInfo.workerIndex);

tests/mcp/trace-cli.spec.ts

@@ -175,6 +175,16 @@ test('trace snapshot --name before', async ({ runTraceCli }) => {
   expect(stdout).toBeTruthy();
 });
 
+test('trace snapshot resolves inner frames', async ({ runTraceCli }) => {
+  const { stdout: listOutput } = await runTraceCli(['actions', '--grep', 'Click']);
+  const ordinals = [...listOutput.matchAll(/^\s+(\d+)\.\s/gm)].map(m => m[1]);
+  expect(ordinals.length).toBeGreaterThanOrEqual(2);
+  const anchorClickOrdinal = ordinals[ordinals.length - 1];
+
+  const { stdout } = await runTraceCli(['snapshot', '--name', 'after', anchorClickOrdinal]);
+  expect(stdout).toContain('Innermost');
+});
+
 test('trace screenshot saves image file', async ({ runTraceCli }, testInfo) => {
   const { stdout: listOutput } = await runTraceCli(['actions', '--grep', 'Navigate']);
   const match = listOutput.match(/^\s+(\d+)\.\s/m);