How do I view the response body of API calls in the trace viewer using Playwright Test in VSCode?

Answer

Viewing API Response Body in Trace Viewer

To view the response body of API calls in the trace viewer using @playwright/test in VSCode, follow these steps:

1. Generate the HTML report: Run npx playwright show-report in your terminal to display a report of your tests, including browsers, durations, and statuses.

npx playwright show-report

2. Find the test: Filter and search for the test you're interested in. Click the trace icon next to the test file name or open the detailed view and navigate to the 'Traces' tab.

3. Open the trace: Click on the trace screenshot to open the trace in Playwright's Trace Viewer tool.

4. Select the HTTP request: In the trace, find and click on the HTTP request you want to inspect.

5. View the response body: Click on "Response" under "Details" to expand the response section. You'll see information about the response body, such as size, content type, encoding, and more. If there's no response body, it will say "No Content".

By following these steps, you can easily inspect API call response bodies alongside other important information like headers and status codes in Playwright's Trace Viewer tool.