{"_id":"playwright-ws-trace","_rev":"4-34a30c5b84866ba763a4a990cff8890d","name":"playwright-ws-trace","dist-tags":{"latest":"1.1.2"},"versions":{"1.0.0":{"name":"playwright-ws-trace","version":"1.0.0","keywords":["playwright","websocket","trace","tracing","debugging","testing","e2e","automation"],"author":{"name":"kabaneridev"},"license":"MIT","_id":"playwright-ws-trace@1.0.0","maintainers":[{"name":"kabaneridev","email":"krplominski+npm@gmail.com"}],"homepage":"https://github.com/kabaneridev/playwright-ws-trace#readme","bugs":{"url":"https://github.com/kabaneridev/playwright-ws-trace/issues"},"dist":{"shasum":"a5c7edd406c913dff58ad5ba5cd1bab73fb4235b","tarball":"https://registry.npmjs.org/playwright-ws-trace/-/playwright-ws-trace-1.0.0.tgz","fileCount":32,"integrity":"sha512-Tj9CjaRW1pxzTvvTwjbwMKenKhkpWI+ITu4L316tr9deXBJnma7/jYkw0WhlVXaZNIYkd0ACHLK9UR+ohfFGTQ==","signatures":[{"sig":"MEUCIEHJWB34w6iIamEICKdJlCcD3UZdXCQNt4B6QMTLuu6pAiEA6icadiNn5dOIWOpIxA8LMkCvNHS+F24YZKLWQgIV7Mc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":3880828},"main":"src/index.js","engines":{"node":">=18.0.0"},"gitHead":"a880f9d43a68c2401fe1f66a2c8b6a07bdf10adb","scripts":{"postinstall":"node scripts/postinstall.js"},"_npmUser":{"name":"kabaneridev","email":"krplominski+npm@gmail.com"},"repository":{"url":"git+https://github.com/kabaneridev/playwright-ws-trace.git","type":"git"},"_npmVersion":"10.5.0","description":"Adds WebSocket frame tracing to Playwright trace viewer","directories":{},"_nodeVersion":"20.12.1","_hasShrinkwrap":false,"peerDependencies":{"@playwright/test":">=1.40.0"},"_npmOperationalInternal":{"tmp":"tmp/playwright-ws-trace_1.0.0_1766382701795_0.9253376646106561","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"playwright-ws-trace","version":"1.1.0","keywords":["playwright","websocket","trace","tracing","debugging","testing","e2e","automation"],"author":{"name":"kabaneridev"},"license":"MIT","_id":"playwright-ws-trace@1.1.0","maintainers":[{"name":"kabaneridev","email":"krplominski+npm@gmail.com"}],"homepage":"https://github.com/kabaneridev/playwright-ws-trace#readme","bugs":{"url":"https://github.com/kabaneridev/playwright-ws-trace/issues"},"dist":{"shasum":"ce120a47b6b83bc8e4d460a9b0b1e51697cff020","tarball":"https://registry.npmjs.org/playwright-ws-trace/-/playwright-ws-trace-1.1.0.tgz","fileCount":32,"integrity":"sha512-ZovwJGpwSovj//uA+naoiP2xOS7THDmi6komP1cgu+GWe1MzgEGJhRru0XAjqmU9C7/jOpoXsHdg/iD61AaXHA==","signatures":[{"sig":"MEUCIQD+SLUhhfOe14r10nHBzvXSzWAwMckhwriEH9/JETi7QwIgDYA5GZVyKhd9siXOs90fQG0zxBMnRa5XofOoGMz2fNA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":3882030},"main":"src/index.js","engines":{"node":">=18.0.0"},"gitHead":"78a99b1e0f83c18d3a4e4c88463806d041d54b80","scripts":{"postinstall":"node scripts/postinstall.js"},"_npmUser":{"name":"kabaneridev","email":"krplominski+npm@gmail.com"},"repository":{"url":"git+https://github.com/kabaneridev/playwright-ws-trace.git","type":"git"},"_npmVersion":"10.5.0","description":"Adds WebSocket frame tracing to Playwright trace viewer","directories":{},"_nodeVersion":"20.12.1","_hasShrinkwrap":false,"peerDependencies":{"@playwright/test":">=1.40.0"},"_npmOperationalInternal":{"tmp":"tmp/playwright-ws-trace_1.1.0_1768398878047_0.4805307943333712","host":"s3://npm-registry-packages-npm-production"}},"1.1.1":{"name":"playwright-ws-trace","version":"1.1.1","keywords":["playwright","websocket","trace","tracing","debugging","testing","e2e","automation"],"author":{"name":"kabaneridev"},"license":"MIT","_id":"playwright-ws-trace@1.1.1","maintainers":[{"name":"kabaneridev","email":"krplominski+npm@gmail.com"}],"homepage":"https://github.com/kabaneridev/playwright-ws-trace#readme","bugs":{"url":"https://github.com/kabaneridev/playwright-ws-trace/issues"},"dist":{"shasum":"aa38d124be4e6185b3843dd2809d502d7c808a04","tarball":"https://registry.npmjs.org/playwright-ws-trace/-/playwright-ws-trace-1.1.1.tgz","fileCount":32,"integrity":"sha512-MyyJIIwQavc0mvjT/92lmo/0El118c0SBY57gnIUDrY5imQGMTstFBGwr7Ay+FeUTVq81OYXfvpSIW4ClxYHTA==","signatures":[{"sig":"MEQCIHG/XALyWP0omqp6LygDp2H+sAmRJ1sk4iCXX1mKIRJiAiAA9GEkjuKxuj2I72sYI1gdSaVTnpDbCKEdSm9S48daBA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":3883694},"main":"src/index.js","engines":{"node":">=18.0.0"},"gitHead":"b9909c72436835e9a281cf099d1259a91608b215","scripts":{"postinstall":"node scripts/postinstall.js"},"_npmUser":{"name":"kabaneridev","email":"krplominski+npm@gmail.com"},"repository":{"url":"git+https://github.com/kabaneridev/playwright-ws-trace.git","type":"git"},"_npmVersion":"10.5.0","description":"Adds WebSocket frame tracing to Playwright trace viewer","directories":{},"_nodeVersion":"20.12.1","_hasShrinkwrap":false,"peerDependencies":{"@playwright/test":">=1.40.0"},"_npmOperationalInternal":{"tmp":"tmp/playwright-ws-trace_1.1.1_1769411966661_0.2139320135593652","host":"s3://npm-registry-packages-npm-production"}},"1.1.2":{"name":"playwright-ws-trace","version":"1.1.2","description":"Adds WebSocket frame tracing to Playwright trace viewer","author":{"name":"kabaneridev"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/kabaneridev/playwright-ws-trace.git"},"homepage":"https://github.com/kabaneridev/playwright-ws-trace#readme","bugs":{"url":"https://github.com/kabaneridev/playwright-ws-trace/issues"},"keywords":["playwright","websocket","trace","tracing","debugging","testing","e2e","automation"],"main":"src/index.js","scripts":{"postinstall":"node scripts/postinstall.js"},"peerDependencies":{"@playwright/test":">=1.40.0"},"engines":{"node":">=18.0.0"},"_id":"playwright-ws-trace@1.1.2","gitHead":"7afe391f54860af023dac2681a3cdd3144217c2d","_nodeVersion":"22.21.1","_npmVersion":"10.9.4","dist":{"integrity":"sha512-KZHCZfrZ/TjcbGcOYPnFvnE7q0eJ9IlvnSj3gEh4MsaiH9UTkRxFTIpODHqLMeshRXrey38q50nrjwePnb6dJQ==","shasum":"0aaed2fb3b5124c85e0589fe7266a4119b74bd82","tarball":"https://registry.npmjs.org/playwright-ws-trace/-/playwright-ws-trace-1.1.2.tgz","fileCount":32,"unpackedSize":3883979,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIGJLWQ89kQZtw45ceo+T4NCXEk4MYCSAynX4hZ0XyhEWAiEA7mZHMJp1ws/tm39ZzWAgPcafmfGj8szVF6z38iFsOSg="}]},"_npmUser":{"name":"kabaneridev","email":"krplominski+npm@gmail.com"},"directories":{},"maintainers":[{"name":"kabaneridev","email":"krplominski+npm@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/playwright-ws-trace_1.1.2_1777034633097_0.40482924593240366"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-22T05:51:41.641Z","modified":"2026-04-24T12:43:53.498Z","1.0.0":"2025-12-22T05:51:42.067Z","1.1.0":"2026-01-14T13:54:38.280Z","1.1.1":"2026-01-26T07:19:26.881Z","1.1.2":"2026-04-24T12:43:53.289Z"},"bugs":{"url":"https://github.com/kabaneridev/playwright-ws-trace/issues"},"author":{"name":"kabaneridev"},"license":"MIT","homepage":"https://github.com/kabaneridev/playwright-ws-trace#readme","keywords":["playwright","websocket","trace","tracing","debugging","testing","e2e","automation"],"repository":{"type":"git","url":"git+https://github.com/kabaneridev/playwright-ws-trace.git"},"description":"Adds WebSocket frame tracing to Playwright trace viewer","maintainers":[{"name":"kabaneridev","email":"krplominski+npm@gmail.com"}],"readme":"# playwright-ws-trace 🔌\n\n> WebSocket frame tracing for Playwright - see every WebSocket message in your traces!\n\n[![npm version](https://badge.fury.io/js/playwright-ws-trace.svg)](https://www.npmjs.com/package/playwright-ws-trace)\n\nThis package implements the long-requested feature from [Issue #10996](https://github.com/microsoft/playwright/issues/10996) (👍 49+ upvotes since 2021). Microsoft rejected our [PR #38427](https://github.com/microsoft/playwright/pull/38427), so we made it ourselves. 💪\n\n## Features\n\n- 📡 **Record WebSocket frames** - Captures all sent and received frames during test execution\n- 🔍 **View in trace viewer** - Browse WebSocket connections and frames in the standard Playwright trace viewer\n- 🎯 **Filter by type** - New \"WS\" filter in the Network tab to show only WebSocket traffic\n- 📊 **Frame details** - See direction (sent/received), timestamps, and payload data\n- 📝 **JSON formatting** - Automatically formats JSON payloads for readability\n\n## Installation\n\n```bash\nnpm install playwright-ws-trace\n# or\nyarn add playwright-ws-trace\n# or\npnpm add playwright-ws-trace\n# or\nbun add playwright-ws-trace\n```\n\nThe package automatically patches your Playwright installation on install. That's it!\n\n### Bun Users\n\nBun doesn't run postinstall scripts by default for security. Add `playwright-ws-trace` to `trustedDependencies` in your `package.json`:\n\n```json\n{\n  \"trustedDependencies\": [\n    \"playwright-ws-trace\"\n  ]\n}\n```\n\nThen reinstall:\n\n```bash\nbun install\n```\n\n## Usage\n\n### 1. Enable tracing in your tests\n\nConfigure in `playwright.config.ts`:\n\n```typescript\nimport { defineConfig } from '@playwright/test';\n\nexport default defineConfig({\n  use: {\n    trace: 'on', // or 'on-first-retry', 'retain-on-failure'\n  },\n});\n```\n\nOr start tracing manually:\n\n```typescript\nimport { test } from '@playwright/test';\n\ntest('websocket test', async ({ page, context }) => {\n  await context.tracing.start({ snapshots: true, screenshots: true });\n  \n  await page.goto('https://your-websocket-app.com');\n  // Your test actions...\n  \n  await context.tracing.stop({ path: 'trace.zip' });\n});\n```\n\n### 2. View WebSocket traces\n\nUse the standard Playwright trace viewer:\n\n```bash\nnpx playwright show-trace ./test-results/my-test/trace.zip\n```\n\nOr open from HTML report - click \"View Trace\" on any test.\n\n### 3. Find WebSocket data\n\nIn the trace viewer:\n1. Click the **Network** tab\n2. Click the **WS** filter to show only WebSocket traffic\n3. Click on a WebSocket connection to see frames\n4. View sent (↑) and received (↓) frames with full payload data\n\n## Screenshot\n\n![Trace Viewer with WS filter](https://raw.githubusercontent.com/kabaneridev/playwright-ws-trace/main/demo.png)\n\n## How it works\n\nThis package patches Playwright on install:\n\n1. **Recording** (`tracing.js`) - Hooks into CDP events to capture:\n   - `webSocketCreated` - Connection opened\n   - `webSocketFrameSent` - Frame sent to server\n   - `webSocketFrameReceived` - Frame received from server\n   - `webSocketClosed` - Connection closed\n   - `webSocketError` - Connection error\n\n2. **Trace Viewer** - Replaces the bundled viewer with a patched version that:\n   - Adds \"WS\" filter to Network tab\n   - Displays WebSocket connections and frames\n   - Shows frame direction, timestamp, and payload\n\n## Compatibility\n\n| Playwright | Status |\n|------------|--------|\n| 1.50.x - 1.58.x | ✅ Tested |\n| 1.40.0+    | ⚠️ Should work |\n\n## After Playwright Updates\n\nWhen you update Playwright, the patches need to be reapplied:\n\n```bash\n# Reinstall to reapply patches\nnpm uninstall playwright-ws-trace && npm install playwright-ws-trace\n\n# Or run postinstall manually\nnode node_modules/playwright-ws-trace/scripts/postinstall.js --force\n```\n\n## Troubleshooting\n\n### Bun: Patches not applying\n\nBun doesn't run postinstall scripts by default. Add to `package.json`:\n\n```json\n{\n  \"trustedDependencies\": [\"playwright-ws-trace\"]\n}\n```\n\nThen run `bun install` again.\n\n### npm/yarn/pnpm: Patches not applying\n\nRun the postinstall script with `--force`:\n\n```bash\nnode node_modules/playwright-ws-trace/scripts/postinstall.js --force\n```\n\n### WS filter not showing\n\nMake sure the patched trace viewer was installed. Check that:\n```bash\nls node_modules/playwright-core/lib/vite/traceViewer/\n```\nContains files from this package.\n\n### WebSocket frames not recorded\n\nEnsure tracing is enabled in your config with `trace: 'on'` or similar.\n\n## Contributing\n\nPRs welcome! The original PR to Playwright is at [#38427](https://github.com/microsoft/playwright/pull/38427).\n\nIf Microsoft ever accepts WebSocket tracing into Playwright core, this package will become obsolete - and that's a good thing! 🎉\n\n## License\n\nMIT - do whatever you want with it.\n\n---\n\nMade with ❤️ because Microsoft said no.\n","readmeFilename":"README.md"}