cherry-pick(#39930): fix: trace request should show bodies from resource (#39951)

Co-authored-by: Simon Knott <info@simonknott.de>

Author: dgozman

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

@@ -16,6 +16,7 @@
 
 /* eslint-disable no-console */
 
+import path from 'path';
 import { loadTrace } from './traceUtils';
 import { msToString } from '../../utils/isomorphic/formatUtils';
 
@@ -115,8 +116,10 @@ export async function traceRequest(requestId: string) {
   // Request body
   if (r.request.postData) {
     console.log('\n  Request body');
-    console.log(`    type: ${r.request.postData.mimeType}`);
-    if (r.request.postData.text) {
+    const resource = r.request.postData._sha1 ?? r.request.postData._file;
+    if (resource) {
+      console.log(`    ${path.relative(process.cwd(), path.join(trace.model.traceUri, 'resources', resource))}`);
+    } else {
       const text = r.request.postData.text.length > 2000
         ? r.request.postData.text.substring(0, 2000) + '...'
         : r.request.postData.text;
@@ -131,6 +134,21 @@ export async function traceRequest(requestId: string) {
       console.log(`    ${h.name}: ${h.value}`);
   }
 
+  // Response body
+  if (r.response.bodySize > 0) {
+    const resource = r.response.content._sha1 ?? r.response.content._file;
+    if (resource) {
+      console.log('\n  Response body');
+      console.log(`    ${path.relative(process.cwd(), path.join(trace.model.traceUri, 'resources', resource))}`);
+    } else if (r.response.content.text) {
+      const text = r.response.content.text.length > 2000
+        ? r.response.content.text.substring(0, 2000) + '...'
+        : r.response.content.text;
+      console.log('\n  Response body');
+      console.log(`    ${text}`);
+    }
+  }
+
   // Security
   if (r._securityDetails) {
     console.log('\n  Security');

tests/mcp/trace-cli-fixtures.ts

@@ -61,6 +61,8 @@ export const test = baseTest
           </html>
         `, 'text/html');
 
+        server.setContent('/feedback', JSON.stringify({ received: true }), 'application/json');
+
         // Navigate
         await page.goto(server.PREFIX);
 
@@ -77,6 +79,9 @@ export const test = baseTest
           console.error('error message');
         });
 
+        // Fetch
+        await page.evaluate(() => fetch('/feedback', { method: 'POST', body: 'What a great product!' }).then(res => res.text()));
+
         // Navigate to another page
         await page.locator('a').click();
         await page.waitForURL('**/page2');

tests/mcp/trace-cli.spec.ts

@@ -17,6 +17,7 @@
 import fs from 'fs';
 
 import { test, expect } from './trace-cli-fixtures';
+import path from 'path';
 
 test.skip(({ mcpBrowser }) => mcpBrowser !== 'chrome', 'Chrome-only');
 
@@ -108,6 +109,24 @@ test('trace request shows details', async ({ runTraceCli }) => {
   expect(stdout).toContain('Response headers');
 });
 
+test('trace request shows request and response body', async ({ traceCwd, runTraceCli }) => {
+  const { stdout, exitCode } = await runTraceCli(['requests', '--grep', 'feedback']);
+  expect(exitCode).toBe(0);
+  expect(stdout).toContain('feedback');
+  const ordinal = stdout.match(/^\s+(\d+)\.\s/m)![1];
+  const { stdout: requestOutput, exitCode: requestExitCode } = await runTraceCli(['request', ordinal]);
+  expect(requestExitCode).toBe(0);
+  expect(requestOutput).toContain('Request body');
+  const requestBodyPath = path.join('.playwright-cli', 'trace', 'resources', '60e4c013c41de11280ed8ba99dd94144124a0c35.txt');
+  expect(requestOutput).toContain(' ' + requestBodyPath);
+  expect(fs.readFileSync(path.join(traceCwd, requestBodyPath), 'utf-8')).toEqual('What a great product!');
+  expect(requestOutput).toContain('Response body');
+  expect(requestOutput).toContain('application/json');
+  const responseBodyPath = path.join('.playwright-cli', 'trace', 'resources', '030b61c2fb7042fb4fc0ef4287a4ae3c0d98ed68.json');
+  expect(requestOutput).toContain(' ' + responseBodyPath);
+  expect(fs.readFileSync(path.join(traceCwd, responseBodyPath), 'utf-8')).toEqual(JSON.stringify({ received: true }));
+});
+
 test('trace request with invalid ID', async ({ runTraceCli }) => {
   const { stderr, exitCode } = await runTraceCli(['request', '999999']);
   expect(exitCode).toBe(1);