Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

fix(ui-mode): format request body when headers are lower case

Browse source
This commit is contained in:
Kuba Janik 2024-08-30 15:35:29 +02:00
parent ed5c21b827
commit 676b80ece7
3 changed files with 62 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/trace-viewer/src/ui/networkResourceDetails.tsx
View file

@ -59,7 +59,7 @@ const RequestTab: React.FunctionComponent<{
React.useEffect(() => { React.useEffect(() => {
const readResources = async () => { const readResources = async () => {
if (resource.request.postData) { if (resource.request.postData) {
const requestContentTypeHeader = resource.request.headers.find(q => q.name === 'Content-Type'); const requestContentTypeHeader = resource.request.headers.find(q => q.name.toLowerCase() === 'content-type');
const requestContentType = requestContentTypeHeader ? requestContentTypeHeader.value : ''; const requestContentType = requestContentTypeHeader ? requestContentTypeHeader.value : '';
if (resource.request.postData._sha1) { if (resource.request.postData._sha1) {
const response = await fetch(`sha1/${resource.request.postData._sha1}`); const response = await fetch(`sha1/${resource.request.postData._sha1}`);

19
tests/assets/network-tab/network.html
View file

@ -13,6 +13,25 @@
</style> </style>
<script src='script.js'></script> <script src='script.js'></script>
<script>fetch('/api/endpoint')</script> <script>fetch('/api/endpoint')</script>
<script>
const body = JSON.stringify({
data: {
key: 'value',
array: ['value-1', 'value-2'],
},
});
fetch('/post-data-1', {
method: 'POST',
headers: { 'content-type': 'application/json' },
body,
});
fetch('/post-data-2', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body,
});
</script>
</head> </head>
<body> <body>
<h1>Network Tab Test</h1> <h1>Network Tab Test</h1>

42
tests/playwright-test/ui-mode-test-network-tab.spec.ts
View file

@ -93,3 +93,45 @@ test('should filter network requests by url', async ({ runUITest, server }) => {
await expect(networkItems).toHaveCount(1); await expect(networkItems).toHaveCount(1);
await expect(networkItems.getByText('font.woff2')).toBeVisible(); await expect(networkItems.getByText('font.woff2')).toBeVisible();
}); });
test('should format JSON request body', 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('post-data-1').click();
await expect(page.locator('.CodeMirror-code .CodeMirror-line').allInnerTexts()).resolves.toEqual([
'{',
' "data": {',
' "key": "value",',
' "array": [',
' "value-1",',
' "value-2"',
' ]',
' }',
'}',
]);
await page.getByText('post-data-2').click();
await expect(page.locator('.CodeMirror-code .CodeMirror-line').allInnerTexts()).resolves.toEqual([
'{',
' "data": {',
' "key": "value",',
' "array": [',
' "value-1",',
' "value-2"',
' ]',
' }',
'}',
]);
});