Skip to content

Commit

Permalink
feat(ui-mode): display list of query params in request tab (#32443)
Browse files Browse the repository at this point in the history
  • Loading branch information
kubajanik authored Sep 4, 2024
1 parent b43915f commit ee91bdc
Show file tree
Hide file tree
Showing 3 changed files with 32 additions and 0 deletions.
6 changes: 6 additions & 0 deletions packages/trace-viewer/src/ui/networkResourceDetails.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,12 @@ const RequestTab: React.FunctionComponent<{
Status Code: <span className={statusClass(resource.response.status)} style={{ display: 'inline-flex' }}>
{`${resource.response.status} ${resource.response.statusText}`}
</span></div>}
{resource.request.queryString.length ? <>
<div className='network-request-details-header'>Query String Parameters</div>
<div className='network-request-details-headers'>
{resource.request.queryString.map(param => `${param.name}: ${param.value}`).join('\n')}
</div>
</> : null}
<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>
{requestBody && <div className='network-request-details-header'>Request Body</div>}
Expand Down
1 change: 1 addition & 0 deletions tests/assets/network-tab/network.html
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
</style>
<script src='script.js'></script>
<script>fetch('/api/endpoint')</script>
<script>fetch('/call-with-query-params?param1=value1&param1=value2&param2=value2')</script>
<script>
const body = JSON.stringify({
data: {
Expand Down
25 changes: 25 additions & 0 deletions tests/playwright-test/ui-mode-test-network-tab.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -135,3 +135,28 @@ test('should format JSON request body', async ({ runUITest, server }) => {
'}',
]);
});

test('should display list of query parameters (only if present)', async ({ runUITest, server }) => {
const { page } = await runUITest({
'network-tab.test.ts': `
import { test, expect } from '@playwright/test';
test('network tab test', async ({ page }) => {
await page.goto('${server.PREFIX}/network-tab/network.html');
});
`,
});

await page.getByText('network tab test').dblclick();
await page.getByText('Network', { exact: true }).click();

await page.getByText('call-with-query-params').click();

await expect(page.getByText('Query String Parameters')).toBeVisible();
await expect(page.getByText('param1: value1')).toBeVisible();
await expect(page.getByText('param1: value2')).toBeVisible();
await expect(page.getByText('param2: value2')).toBeVisible();

await page.getByText('endpoint').click();

await expect(page.getByText('Query String Parameters')).not.toBeVisible();
});

0 comments on commit ee91bdc

Please sign in to comment.