feat(ui-mode): display list of query params in request tab (#32443)

microsoft · Sep 4, 2024 · ee91bdc · ee91bdc
1 parent b43915f
commit ee91bdc
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 0 deletions.
diff --git a/packages/trace-viewer/src/ui/networkResourceDetails.tsx b/packages/trace-viewer/src/ui/networkResourceDetails.tsx
@@ -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>}

diff --git a/tests/assets/network-tab/network.html b/tests/assets/network-tab/network.html
@@ -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: {

diff --git a/tests/playwright-test/ui-mode-test-network-tab.spec.ts b/tests/playwright-test/ui-mode-test-network-tab.spec.ts
@@ -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();
+});