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 (#32395)

Browse source 
Resolves https://github.com/microsoft/playwright/issues/32396

Currently, the request body is not formatted when content type header is
lower case (`content-type`). Even though the value is
`application/json`.

It happens because we are looking only for `Content-Type` header
ignoring headers that are lower case.

<img width="674" alt="363197933-5178ec23-b9cf-46b5-8284-e8d4d730b036"
src="https://github.com/user-attachments/assets/0ef01b52-7dd8-4f33-b836-9adb86f94cc9">
This commit is contained in:
Kuba Janik 2024-08-30 16:21:51 +02:00 committed by GitHub
parent ed5c21b827
commit a6b320e362
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
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"',
' ]',
' }',
'}',
]);
});