fix: trace requests should show bodies from resource

Author: Skn0tt

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

@@ -22,7 +22,7 @@ import path from 'path';
 export async function installSkill() {
   const cwd = process.cwd();
   const skillSource = path.join(__dirname, 'SKILL.md');
-  const destDir = path.join(cwd, '.claude', 'playwright-trace');
+  const destDir = path.join(cwd, '.claude', 'skills', 'playwright-trace');
   await fs.promises.mkdir(destDir, { recursive: true });
   const destFile = path.join(destDir, 'SKILL.md');
   await fs.promises.copyFile(skillSource, destFile);

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

@@ -114,12 +114,19 @@ 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 text = r.request.postData.text.length > 2000
-        ? r.request.postData.text.substring(0, 2000) + '...'
-        : r.request.postData.text;
+    let body = r.request.postData.text;
+    const resource = r.request.postData._sha1 ?? r.request.postData._file;
+    if (resource) {
+      const blob = await trace.loader.resourceForSha1(resource);
+      if (blob)
+        body = await blob.text();
+    }
+
+    if (body) {
+      console.log('\n  Request body');
+      const text = body.length > 2000
+        ? body.substring(0, 2000) + '...'
+        : body;
       console.log(`    ${text}`);
     }
   }
@@ -131,6 +138,25 @@ export async function traceRequest(requestId: string) {
       console.log(`    ${h.name}: ${h.value}`);
   }
 
+  // Response body
+  {
+    let body = r.response.content.text;
+    const resource = r.response.content._sha1 ?? r.response.content._file;
+    if (resource) {
+      const blob = await trace.loader.resourceForSha1(resource);
+      if (blob)
+        body = await blob.text();
+    }
+
+    if (body) {
+      console.log('\n  Response body');
+      const text = body.length > 2000
+        ? body.substring(0, 2000) + '...'
+        : 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

@@ -108,6 +108,21 @@ test('trace request shows details', async ({ runTraceCli }) => {
   expect(stdout).toContain('Response headers');
 });
 
+test('trace request shows request and response body', async ({ 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');
+  expect(requestOutput).toContain('text/plain');
+  expect(requestOutput).toContain('What a great product!');
+  expect(requestOutput).toContain('Response body');
+  expect(requestOutput).toContain('application/json');
+  expect(requestOutput).toContain(JSON.stringify({ received: true }));
+});
+
 test('trace request with invalid ID', async ({ runTraceCli }) => {
   const { stderr, exitCode } = await runTraceCli(['request', '999999']);
   expect(exitCode).toBe(1);