microsoft/playwright
1
1
Fork 0
mirror of https://github.com/microsoft/playwright.git synced 2025-01-06 03:16:17 +03:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Kuba Janik 2024-09-04 16:54:44 +02:00 committed by GitHub
parent b43915f4cc
commit ee91bdc585
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 32 additions and 0 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

@ -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>}

1
tests/assets/network-tab/network.html
View File

@ -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: {

25
tests/playwright-test/ui-mode-test-network-tab.spec.ts
View File

@ -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();
});