Add request parsing from issue details

Author: Natallia Harshunova

src/formatters/consoleFormatter.ts

@@ -73,6 +73,10 @@ interface IssueDetailsWithResources {
   violatingNodeId?: number;
   nodeId?: number;
   documentNodeId?: number;
+  request?: {
+    requestId?: string;
+    url: string;
+  };
 }
 export function formatIssue(
   issue: AggregatedIssue,
@@ -96,20 +100,29 @@ export function formatIssue(
     }
   }
 
-  const issues: Array<{details?: () => IssueDetailsWithResources}> = [
+  const issues: Array<{details?: () => IssueDetailsWithResources, getDetails?: () => IssueDetailsWithResources}> = [
+    ...issue.getCorsIssues(),
+    ...issue.getMixedContentIssues(),
     ...issue.getGenericIssues(),
     ...issue.getLowContrastIssues(),
     ...issue.getElementAccessibilityIssues(),
     ...issue.getQuirksModeIssues(),
-    // ...issue.getAttributionReportingIssues(), // Uncomment when AttributionReportingIssue has details()
   ];
-  const affectedElement: Array<{uid?: string; data?: object}> = [];
+  const affectedResources: Array<{
+    uid?: string;
+    data?: object;
+    request?: string|number;
+  }> = [];
   for (const singleIssue of issues) {
-    if (!singleIssue.details) break;
+    if (!singleIssue.details && !singleIssue.getDetails) continue;
+
+    let details =
+      singleIssue.details?.() as unknown as IssueDetailsWithResources;
+    if (!details) details =  singleIssue.getDetails?.() as unknown as IssueDetailsWithResources;
+    if (!details) continue;
 
-    const details =
-      singleIssue.details() as unknown as IssueDetailsWithResources;
     let uid;
+    let request: number | string | undefined;
     if (details.violatingNodeId && context) {
       uid = context.resolveCdpElementId(details.violatingNodeId);
     }
@@ -120,22 +133,45 @@ export function formatIssue(
       uid = context.resolveCdpElementId(details.documentNodeId);
     }
 
+    if (details.request) {
+      request = details.request.url;
+      if (details.request.requestId && context) {
+        const resolvedId = context.resolveCdpRequestId(
+          details.request.requestId,
+        );
+        if (resolvedId) {
+          request = resolvedId;
+        }
+      }
+    }
+
     // eslint-disable-next-line
     const data = structuredClone(details) as any;
     delete data.violatingNodeId;
+    delete data.nodeId;
+    delete data.documentNodeId;
     delete data.errorType;
     delete data.frameId;
-    affectedElement.push({uid, data: data});
+    delete data.request;
+    affectedResources.push({
+      uid,
+      data: data,
+      request
+    });  
   }
-  if (affectedElement.length) {
+  if (affectedResources.length) {
     result.push('### Affected resources');
   }
   result.push(
-    ...affectedElement.map(item => {
-      return `uid=${item.uid} data=${JSON.stringify(item.data)}`;
+    ...affectedResources.map(item => {
+      const details = [];
+      if(item.uid) details.push(`uid=${item.uid}`);
+      if(item.data) details.push(`data=${JSON.stringify(item.data)}`);
+      if(item.request) details.push((typeof item.request === 'number' ? `reqid=` : 'url=') + item.request);
+      return details.join(' ');
     }),
   );
   if (result.length === 0)
     return 'No details provided for the issue ' + issue.code();
   return result.join('\n');
-}
+}

tests/formatters/consoleFormatter.test.js.snapshot

@@ -44,5 +44,5 @@ Learn more:
 [Learn more](http://example.com/learnmore)
 [Learn more 2](http://example.com/another-learnmore)
 ### Affected resources
-uid=undefined data={"violatingNodeAttribute":"test"}
+data={"violatingNodeAttribute":"test"}
 `;

tests/tools/console.test.js.snapshot

@@ -1,4 +1,4 @@
-exports[`console > get_console_message > issues type > gets issue details 1`] = `
+exports[`console > get_console_message > issues type > gets issue details with node id parsing 1`] = `
 # test response
 ID: 1
 Message: issue> An element doesn't have an autocomplete attribute
@@ -11,3 +11,19 @@ Learn more:
 ### Affected resources
 uid=1_1 data={"violatingNodeAttribute":"name"}
 `;
+
+exports[`console > get_console_message > issues type > gets issue details with request id parsing 1`] = `
+# test response
+ID: 1
+Message: issue> Ensure CORS response header values are valid
+
+A cross-origin resource sharing (CORS) request was blocked because of invalid or missing response headers of the request or the associated [preflight request](issueCorsPreflightRequest).
+
+To fix this issue, ensure the response to the CORS request and/or the associated [preflight request](issueCorsPreflightRequest) are not missing headers and use valid header values.
+
+Note that if an opaque response is sufficient, the request's mode can be set to \`no-cors\` to fetch the resource with CORS disabled; that way CORS headers are not required but the response content is inaccessible (opaque).
+Learn more:
+[Cross-Origin Resource Sharing (\`CORS\`)](https://web.dev/cross-origin-resource-sharing)
+### Affected resources
+reqid=1 data={"corsErrorStatus":{"corsError":"PreflightMissingAllowOriginHeader","failedParameter":""},"isWarning":false,"initiatorOrigin":"","clientSecurityState":{"initiatorIsSecureContext":false,"initiatorIPAddressSpace":"Loopback","privateNetworkRequestPolicy":"BlockFromInsecureToMorePrivate"}}
+`;

tests/tools/console.test.ts

@@ -159,7 +159,7 @@ describe('console', () => {
         setIssuesEnabled(false);
       });
 
-      it('gets issue details', async t => {
+      it('gets issue details with node id parsing', async t => {
         await withBrowser(async (response, context) => {
           const page = await context.newPage();
           const issuePromise = new Promise<void>(resolve => {
@@ -181,6 +181,38 @@ describe('console', () => {
           t.assert.snapshot?.(formattedResponse[0].text);
         });
       });
+      it('gets issue details with request id parsing', async t => {
+        await withBrowser(async (response, context) => {
+          const page = await context.newPage();
+          const issuePromise = new Promise<void>(resolve => {
+            page.once('issue', () => {
+              resolve();
+            });
+          });
+          await page.setContent(`
+            <script>
+              fetch('https://example.com/data.json', {
+                  method: 'GET',
+                  headers: {
+                      'Content-Type': 'application/json',
+                      'X-Custom-Header': 'MyValue'
+                  }
+              });
+            </script>
+          `);
+          await context.createTextSnapshot();
+          await issuePromise;
+          await listConsoleMessages.handler({params: {}}, response, context);
+          const response2 = new McpResponse();
+          await getConsoleMessage.handler(
+            {params: {msgid: 1}},
+            response2,
+            context,
+          );
+          const formattedResponse = await response2.handle('test', context);
+          t.assert.snapshot?.(formattedResponse[0].text);
+        });
+      });
     });
   });
 });

tests/utils.ts

@@ -189,5 +189,7 @@ export function getMockAggregatedIssue(): sinon.SinonStubbedInstance<AggregatedI
   mockAggregatedIssue.getLowContrastIssues.returns(new Set());
   mockAggregatedIssue.getElementAccessibilityIssues.returns(new Set());
   mockAggregatedIssue.getQuirksModeIssues.returns(new Set());
+  mockAggregatedIssue.getCorsIssues.returns(new Set());
+  mockAggregatedIssue.getMixedContentIssues.returns(new Set());
   return mockAggregatedIssue;
 }