add elementsID into console data message

Author: Natallia Harshunova

src/McpResponse.ts

@@ -255,7 +255,7 @@ export class McpResponse implements Response {
         const mappedIssueMessage = mapIssueToMessageObject(message);
         if (!mappedIssueMessage)
           throw new Error(
-            "Can't prpovide detals for the msgid " + consoleMessageStableId,
+            "Can't provide detals for the msgid " + consoleMessageStableId,
           );
         consoleData = {
           consoleMessageStableId,
@@ -402,7 +402,7 @@ Call ${handleDialog.name} to handle it before continuing.`);
     }
 
     response.push(...this.#formatNetworkRequestData(context, data.bodies));
-    response.push(...this.#formatConsoleData(data.consoleData));
+    response.push(...this.#formatConsoleData(context, data.consoleData));
 
     if (this.#networkRequestsOptions?.include) {
       let requests = context.getNetworkRequests(
@@ -500,13 +500,16 @@ Call ${handleDialog.name} to handle it before continuing.`);
     };
   }
 
-  #formatConsoleData(data: ConsoleMessageData | undefined): string[] {
+  #formatConsoleData(
+    context: McpContext,
+    data: ConsoleMessageData | undefined,
+  ): string[] {
     const response: string[] = [];
     if (!data) {
       return response;
     }
 
-    response.push(formatConsoleEventVerbose(data));
+    response.push(formatConsoleEventVerbose(data, context));
     return response;
   }
 

src/formatters/consoleFormatter.ts

@@ -5,6 +5,7 @@
  */
 
 import type {AggregatedIssue} from '../../node_modules/chrome-devtools-frontend/mcp/mcp.js';
+import type {McpContext} from '../McpContext.js';
 
 export interface ConsoleMessageData {
   consoleMessageStableId: number;
@@ -36,11 +37,14 @@ function getArgs(msg: ConsoleMessageData) {
 }
 
 // The verbose format for a console message, including all details.
-export function formatConsoleEventVerbose(msg: ConsoleMessageData): string {
+export function formatConsoleEventVerbose(
+  msg: ConsoleMessageData,
+  context?: McpContext,
+): string {
   const aggregatedIssue = msg.item;
   const result = [
     `ID: ${msg.consoleMessageStableId}`,
-    `Message: ${msg.type}> ${aggregatedIssue ? formatIssue(aggregatedIssue, msg.description) : msg.message}`,
+    `Message: ${msg.type}> ${aggregatedIssue ? formatIssue(aggregatedIssue, msg.description, context) : msg.message}`,
     aggregatedIssue ? undefined : formatArgs(msg),
   ].filter(line => !!line);
   return result.join('\n');
@@ -65,10 +69,15 @@ function formatArgs(consoleData: ConsoleMessageData): string {
 
   return result.join('\n');
 }
-
+interface IssueDetailsWithResources {
+  violatingNodeId?: number;
+  nodeId?: number;
+  documentNodeId?: number;
+}
 export function formatIssue(
   issue: AggregatedIssue,
   description?: string,
+  context?: McpContext,
 ): string {
   const result: string[] = [];
 
@@ -87,6 +96,45 @@ export function formatIssue(
     }
   }
 
+  const issues: Array<{details?: () => IssueDetailsWithResources}> = [
+    ...issue.getGenericIssues(),
+    ...issue.getLowContrastIssues(),
+    ...issue.getElementAccessibilityIssues(),
+    ...issue.getQuirksModeIssues(),
+    // ...issue.getAttributionReportingIssues(), // Uncomment when AttributionReportingIssue has details()
+  ];
+  const affectedElement: Array<{uid?: string; data?: object}> = [];
+  for (const singleIssue of issues) {
+    if (!singleIssue.details) break;
+
+    const details =
+      singleIssue.details() as unknown as IssueDetailsWithResources;
+    let uid;
+    if (details.violatingNodeId && context) {
+      uid = context.resolveCdpElementId(details.violatingNodeId);
+    }
+    if (details.nodeId && context) {
+      uid = context.resolveCdpElementId(details.nodeId);
+    }
+    if (details.documentNodeId && context) {
+      uid = context.resolveCdpElementId(details.documentNodeId);
+    }
+
+    // eslint-disable-next-line
+    const data = structuredClone(details) as any;
+    delete data.violatingNodeId;
+    delete data.errorType;
+    delete data.frameId;
+    affectedElement.push({uid, data: data});
+  }
+  if (affectedElement.length) {
+    result.push('### Affected resources');
+  }
+  result.push(
+    ...affectedElement.map(item => {
+      return `uid=${item.uid} data=${JSON.stringify(item.data)}`;
+    }),
+  );
   if (result.length === 0)
     return 'No details provided for the issue ' + issue.code();
   return result.join('\n');

tests/McpResponse.test.ts

@@ -10,11 +10,8 @@ import {tmpdir} from 'node:os';
 import {join} from 'node:path';
 import {describe, it} from 'node:test';
 
-import sinon from 'sinon';
-
-import {AggregatedIssue} from '../node_modules/chrome-devtools-frontend/mcp/mcp.js';
-
 import {
+  getMockAggregatedIssue,
   getMockRequest,
   getMockResponse,
   html,
@@ -302,7 +299,7 @@ describe('McpResponse', () => {
 
   it("doesn't list the issue message if mapping returns null", async () => {
     await withBrowser(async (response, context) => {
-      const mockAggregatedIssue = sinon.createStubInstance(AggregatedIssue);
+      const mockAggregatedIssue = getMockAggregatedIssue();
       const mockDescription = {
         file: 'not-existing-description-file.md',
         links: [],
@@ -321,7 +318,7 @@ describe('McpResponse', () => {
 
   it('throws error if mapping returns null on get issue details', async () => {
     await withBrowser(async (response, context) => {
-      const mockAggregatedIssue = sinon.createStubInstance(AggregatedIssue);
+      const mockAggregatedIssue = getMockAggregatedIssue();
       const mockDescription = {
         file: 'not-existing-description-file.md',
         links: [],
@@ -335,7 +332,7 @@ describe('McpResponse', () => {
       try {
         await response.handle('test', context);
       } catch (e) {
-        assert.ok(e.message.includes("Can't prpovide detals for the msgid 1"));
+        assert.ok(e.message.includes("Can't provide detals for the msgid 1"));
       }
     });
   });

tests/formatters/consoleFormatter.test.js.snapshot

@@ -43,4 +43,6 @@ This is a mock issue description
 Learn more:
 [Learn more](http://example.com/learnmore)
 [Learn more 2](http://example.com/another-learnmore)
+### Affected resources
+uid=undefined data={"violatingNodeAttribute":"test"}
 `;

tests/formatters/consoleFormatter.test.ts

@@ -6,14 +6,12 @@
 
 import {describe, it} from 'node:test';
 
-import sinon from 'sinon';
-
-import {AggregatedIssue} from '../../node_modules/chrome-devtools-frontend/mcp/mcp.js';
 import type {ConsoleMessageData} from '../../src/formatters/consoleFormatter.js';
 import {
   formatConsoleEventShort,
   formatConsoleEventVerbose,
 } from '../../src/formatters/consoleFormatter.js';
+import {getMockAggregatedIssue} from '../utils.js';
 
 describe('consoleFormatter', () => {
   describe('formatConsoleEventShort', () => {
@@ -97,7 +95,15 @@ describe('consoleFormatter', () => {
   });
 
   it('formats a console.log message with issue type', t => {
-    const mockAggregatedIssue = sinon.createStubInstance(AggregatedIssue);
+    const testGenericIssue = {
+      details: () => {
+        return {
+          violatingNodeId: 2,
+          violatingNodeAttribute: 'test',
+        };
+      },
+    };
+    const mockAggregatedIssue = getMockAggregatedIssue();
     const mockDescription = {
       file: 'mock.md',
       links: [
@@ -109,6 +115,8 @@ describe('consoleFormatter', () => {
       ],
     };
     mockAggregatedIssue.getDescription.returns(mockDescription);
+    // @ts-expect-error generic issue stub bypass
+    mockAggregatedIssue.getGenericIssues.returns(new Set([testGenericIssue]));
     const mockDescriptionFileContent =
       '# Mock Issue Title\n\nThis is a mock issue description';
 

tests/tools/console.test.js.snapshot

@@ -0,0 +1,13 @@
+exports[`console > get_console_message > issues type > gets issue details 1`] = `
+# test response
+ID: 1
+Message: issue> An element doesn't have an autocomplete attribute
+
+A form field has an \`id\` or \`name\` attribute that the browser's autofill recognizes. However, it doesn't have an \`autocomplete\` attribute assigned. This might prevent the browser from correctly autofilling the form.
+
+To fix this issue, provide an \`autocomplete\` attribute.
+Learn more:
+[HTML attribute: autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values)
+### Affected resources
+uid=1_1 data={"violatingNodeAttribute":"name"}
+`;

tests/tools/console.test.ts

@@ -17,11 +17,10 @@ import {
 import {withBrowser} from '../utils.js';
 
 describe('console', () => {
+  before(async () => {
+    await loadIssueDescriptions();
+  });
   describe('list_console_messages', () => {
-    before(async () => {
-      await loadIssueDescriptions();
-    });
-
     it('list messages', async () => {
       await withBrowser(async (response, context) => {
         await listConsoleMessages.handler({params: {}}, response, context);
@@ -160,7 +159,7 @@ describe('console', () => {
         setIssuesEnabled(false);
       });
 
-      it('gets issue details', async () => {
+      it('gets issue details', async t => {
         await withBrowser(async (response, context) => {
           const page = await context.newPage();
           const issuePromise = new Promise<void>(resolve => {
@@ -169,6 +168,7 @@ describe('console', () => {
             });
           });
           await page.setContent('<input type="text" name="username" />');
+          await context.createTextSnapshot();
           await issuePromise;
           await listConsoleMessages.handler({params: {}}, response, context);
           const response2 = new McpResponse();
@@ -178,16 +178,7 @@ describe('console', () => {
             context,
           );
           const formattedResponse = await response2.handle('test', context);
-          const textContent = formattedResponse[0] as {text: string};
-          const learnMoreLinks =
-            '[HTML attribute: autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values)';
-          const detailsDescription =
-            "A form field has an `id` or `name` attribute that the browser's autofill recognizes. However, it doesn't have an `autocomplete` attribute assigned. This might prevent the browser from correctly autofilling the form.\n\nTo fix this issue, provide an `autocomplete` attribute.";
-          const title =
-            "Message: issue> An element doesn't have an autocomplete attribute";
-          assert.ok(textContent.text.includes(title));
-          assert.ok(textContent.text.includes(detailsDescription));
-          assert.ok(textContent.text.includes(learnMoreLinks));
+          t.assert.snapshot?.(formattedResponse[0].text);
         });
       });
     });

tests/utils.ts

@@ -13,7 +13,9 @@ import type {
   HTTPResponse,
   LaunchOptions,
 } from 'puppeteer-core';
+import sinon from 'sinon';
 
+import {AggregatedIssue} from '../node_modules/chrome-devtools-frontend/mcp/mcp.js';
 import {McpContext} from '../src/McpContext.js';
 import {McpResponse} from '../src/McpResponse.js';
 import {stableIdSymbol} from '../src/PageCollector.js';
@@ -180,3 +182,12 @@ export function stabilizeResponseOutput(text: unknown) {
   output = output.replaceAll(savedSnapshot, 'Saved snapshot to <file>');
   return output;
 }
+
+export function getMockAggregatedIssue(): sinon.SinonStubbedInstance<AggregatedIssue> {
+  const mockAggregatedIssue = sinon.createStubInstance(AggregatedIssue);
+  mockAggregatedIssue.getGenericIssues.returns(new Set());
+  mockAggregatedIssue.getLowContrastIssues.returns(new Set());
+  mockAggregatedIssue.getElementAccessibilityIssues.returns(new Set());
+  mockAggregatedIssue.getQuirksModeIssues.returns(new Set());
+  return mockAggregatedIssue;
+}