yujunjun/playwright
1
0
Fork 0
mirror of https://github.com/microsoft/playwright.git synced 2025-06-26 21:40:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(trace-viewer): hide status code field for failed request (#31977)

Browse Source 
* Hide 'Status Code:' field for interrupted requests that don't have it.
* Clear up previously selected body when showing aborted requests.
* Highlight interrupted requests in red.
This commit is contained in:
Yury Semikhatsky 2024-08-01 17:26:52 -07:00 committed by GitHub
parent 5a80ddfaf9
commit 5a83fe55bc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 5 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/trace-viewer/src/ui/networkResourceDetails.tsx
View File

@ -78,10 +78,10 @@ const RequestTab: React.FunctionComponent<{
<div className='network-request-details-header'>General</div> <div className='network-request-details-header'>General</div>
<div className='network-request-details-url'>{`URL: ${resource.request.url}`}</div> <div className='network-request-details-url'>{`URL: ${resource.request.url}`}</div>
<div className='network-request-details-general'>{`Method: ${resource.request.method}`}</div> <div className='network-request-details-general'>{`Method: ${resource.request.method}`}</div>
<div className='network-request-details-general' style={{ display: 'flex' }}> {resource.response.status !== -1 && <div className='network-request-details-general' style={{ display: 'flex' }}>
Status Code: <span className={statusClass(resource.response.status)} style={{ display: 'inline-flex' }}> Status Code: <span className={statusClass(resource.response.status)} style={{ display: 'inline-flex' }}>
{`${resource.response.status} ${resource.response.statusText}`} {`${resource.response.status} ${resource.response.statusText}`}
</span></div> </span></div>}
<div className='network-request-details-header'>Request Headers</div> <div className='network-request-details-header'>Request Headers</div>
<div className='network-request-details-headers'>{resource.request.headers.map(pair => `${pair.name}: ${pair.value}`).join('\n')}</div> <div className='network-request-details-headers'>{resource.request.headers.map(pair => `${pair.name}: ${pair.value}`).join('\n')}</div>
{requestBody && <div className='network-request-details-header'>Request Body</div>} {requestBody && <div className='network-request-details-header'>Request Body</div>}
@ -118,6 +118,8 @@ const BodyTab: React.FunctionComponent<{
const formattedBody = formatBody(await response.text(), resource.response.content.mimeType); const formattedBody = formatBody(await response.text(), resource.response.content.mimeType);
setResponseBody({ text: formattedBody, mimeType: resource.response.content.mimeType }); setResponseBody({ text: formattedBody, mimeType: resource.response.content.mimeType });
} }
} else {
setResponseBody(null);
} }
}; };

2
packages/trace-viewer/src/ui/networkTab.tsx
View File

@ -93,7 +93,7 @@ export const NetworkTab: React.FunctionComponent<{
columnTitle={columnTitle} columnTitle={columnTitle}
columnWidths={columnWidths} columnWidths={columnWidths}
setColumnWidths={setColumnWidths} setColumnWidths={setColumnWidths}
isError={item => item.status.code >= 400} isError={item => item.status.code >= 400 || item.status.code === -1}
isInfo={item => !!item.route} isInfo={item => !!item.route}
render={(item, column) => renderCell(item, column)} render={(item, column) => renderCell(item, column)}
sorting={sorting} sorting={sorting}