feat(trace viewer): Extending existing NetworkTab view. #5009
Conversation
Currently the network tab contains a limited amount of information on the resources that were loaded in the browser. This change proposes extending the details displayed for each resource, to include: - HTTP method, - Full url, - Easily visible response content type, - Request headers, - Request & response bodies. Such level of information could help quickly understand what happened in the application, when it was communicating with backend services. This can help debug tests quicker to figure out why they are failing. This implementation still needs some clean up & tests improvement, but I wanted to propose such changes and gather your feedback before going too far. What do you think about such extension?
…onents into separate files.
…e more specific and use variables.
…ies when switching actions.
|
Hey @dgozman thanks for taking a look at this PR, I think all the changes you pointed out should be fixed now :) |
|
One more thing, I was looking at the failing checks, and most of them seems unrelated, but one of them peeked my interest, as it is related to the test I added here: https://github.com/microsoft/playwright/pull/5009/checks?check_run_id=1757111083 It looks like in this particular case, the trace file does not contain the It is not really related to this PR, so it shouldn't be a blocker, but if that is the case, it might be frustrating for users to miss those network events sometimes. Especially if they are expected on the last action in the script, this network request might not be captured at all in the trace file, like in this failed test run. |
| <div className='network-request-headers'>{resource.requestHeaders.map(pair => `${pair.name}: ${pair.value}`).join('\n')}</div> | ||
| <h4>Response Headers</h4> | ||
| <div className='network-request-headers'>{resource.responseHeaders.map(pair => `${pair.name}: ${pair.value}`).join('\n')}</div> | ||
| {resource.requestSha1 !== 'none' ? <h3>Request Body</h3> : ''} |
There was a problem hiding this comment.
Everything is h4, but this one is h3 - looks strange.
There was a problem hiding this comment.
Doh, should be fixed now.
Currently the network tab contains a limited amount of information on the resources that were loaded in the browser. This change proposes extending the details displayed for each resource, to include:
Such level of information could help quickly understand what happened in the application, when it was communicating with backend services. This can help debug tests quicker to figure out why they are failing.
What do you think about such extension?