feat: use stable id for network request querying (#382)

Provides stable id when selecting a network request, this should fix
issues with multiple same places and long URL selection.

Author: Lightning00Blade

docs/tool-reference.md

@@ -258,7 +258,7 @@
 
 **Parameters:**
 
-- **url** (string) **(required)**: The URL of the request.
+- **reqid** (number) **(required)**: The reqid of a request on the page from the listed network requests
 
 ---
 

src/McpContext.ts

@@ -155,19 +155,8 @@ export class McpContext implements Context {
     await page.close({runBeforeUnload: false});
   }
 
-  getNetworkRequestByUrl(url: string): HTTPRequest {
-    const requests = this.getNetworkRequests();
-    if (!requests.length) {
-      throw new Error('No requests found for selected page');
-    }
-
-    for (const request of requests) {
-      if (request.url() === url) {
-        return request;
-      }
-    }
-
-    throw new Error('Request not found for selected page');
+  getNetworkRequestById(reqid: number): HTTPRequest {
+    return this.#networkCollector.getById(this.getSelectedPage(), reqid);
   }
 
   setNetworkConditions(conditions: string | null): void {

src/McpResponse.ts

@@ -24,7 +24,7 @@ import type {ImageContentData, Response} from './tools/ToolDefinition.js';
 import {paginate, type PaginationOptions} from './utils/pagination.js';
 
 interface NetworkRequestData {
-  networkRequestUrl: string;
+  networkRequestStableId: number;
   requestBody?: string;
   responseBody?: string;
 }
@@ -81,9 +81,9 @@ export class McpResponse implements Response {
     this.#includeConsoleData = value;
   }
 
-  attachNetworkRequest(url: string): void {
+  attachNetworkRequest(reqid: number): void {
     this.#attachedNetworkRequestData = {
-      networkRequestUrl: url,
+      networkRequestStableId: reqid,
     };
   }
 
@@ -98,8 +98,8 @@ export class McpResponse implements Response {
   get includeConsoleData(): boolean {
     return this.#includeConsoleData;
   }
-  get attachedNetworkRequestUrl(): string | undefined {
-    return this.#attachedNetworkRequestData?.networkRequestUrl;
+  get attachedNetworkRequestId(): number | undefined {
+    return this.#attachedNetworkRequestData?.networkRequestStableId;
   }
   get networkRequestsPageIdx(): number | undefined {
     return this.#networkRequestsOptions?.pagination?.pageIdx;
@@ -138,9 +138,9 @@ export class McpResponse implements Response {
 
     let formattedConsoleMessages: string[];
 
-    if (this.#attachedNetworkRequestData?.networkRequestUrl) {
-      const request = context.getNetworkRequestByUrl(
-        this.#attachedNetworkRequestData.networkRequestUrl,
+    if (this.#attachedNetworkRequestData?.networkRequestStableId) {
+      const request = context.getNetworkRequestById(
+        this.#attachedNetworkRequestData.networkRequestStableId,
       );
 
       this.#attachedNetworkRequestData.requestBody =
@@ -309,12 +309,12 @@ Call ${handleDialog.name} to handle it before continuing.`);
 
   #getIncludeNetworkRequestsData(context: McpContext): string[] {
     const response: string[] = [];
-    const url = this.#attachedNetworkRequestData?.networkRequestUrl;
+    const url = this.#attachedNetworkRequestData?.networkRequestStableId;
     if (!url) {
       return response;
     }
 
-    const httpRequest = context.getNetworkRequestByUrl(url);
+    const httpRequest = context.getNetworkRequestById(url);
     response.push(`## Request ${httpRequest.url()}`);
     response.push(`Status:  ${getStatusFromRequest(httpRequest)}`);
     response.push(`### Request Headers`);

src/PageCollector.ts

@@ -133,6 +133,21 @@ export class PageCollector<T> {
   getIdForResource(resource: WithSymbolId<T>): number {
     return resource[stableIdSymbol] ?? -1;
   }
+
+  getById(page: Page, stableId: number): T {
+    const data = this.storage.get(page);
+    if (!data || !data.length) {
+      throw new Error('No requests found for selected page');
+    }
+
+    for (const collected of data) {
+      if (collected[stableIdSymbol] === stableId) {
+        return collected;
+      }
+    }
+
+    throw new Error('Request not found for selected page');
+  }
 }
 
 export class NetworkCollector extends PageCollector<HTTPRequest> {

src/tools/ToolDefinition.ts

@@ -50,7 +50,7 @@ export interface Response {
   setIncludeConsoleData(value: boolean): void;
   setIncludeSnapshot(value: boolean): void;
   attachImage(value: ImageContentData): void;
-  attachNetworkRequest(url: string): void;
+  attachNetworkRequest(reqid: number): void;
 }
 
 /**

src/tools/network.ts

@@ -80,9 +80,13 @@ export const getNetworkRequest = defineTool({
     readOnlyHint: true,
   },
   schema: {
-    url: z.string().describe('The URL of the request.'),
+    reqid: z
+      .number()
+      .describe(
+        'The reqid of a request on the page from the listed network requests',
+      ),
   },
   handler: async (request, response, _context) => {
-    response.attachNetworkRequest(request.params.url);
+    response.attachNetworkRequest(request.params.reqid);
   },
 });

tests/McpResponse.test.ts

@@ -248,7 +248,10 @@ reqid=2 GET http://example.com [pending]`,
       context.getNetworkRequests = () => {
         return [request];
       };
-      response.attachNetworkRequest(request.url());
+      context.getNetworkRequestById = () => {
+        return request;
+      };
+      response.attachNetworkRequest(1);
 
       const result = await response.handle('test', context);
 
@@ -279,7 +282,10 @@ reqid=1 POST http://example.com [success - 200]`,
       context.getNetworkRequests = () => {
         return [request];
       };
-      response.attachNetworkRequest(request.url());
+      context.getNetworkRequestById = () => {
+        return request;
+      };
+      response.attachNetworkRequest(1);
       const result = await response.handle('test', context);
       assert.strictEqual(
         result[0].text,

tests/tools/network.test.ts

@@ -28,22 +28,19 @@ describe('network', () => {
         const page = await context.getSelectedPage();
         await page.goto('data:text/html,<div>Hello MCP</div>');
         await getNetworkRequest.handler(
-          {params: {url: 'data:text/html,<div>Hello MCP</div>'}},
+          {params: {reqid: 1}},
           response,
           context,
         );
-        assert.equal(
-          response.attachedNetworkRequestUrl,
-          'data:text/html,<div>Hello MCP</div>',
-        );
+        assert.equal(response.attachedNetworkRequestId, 1);
       });
     });
     it('should not add the request list', async () => {
       await withBrowser(async (response, context) => {
         const page = await context.getSelectedPage();
         await page.goto('data:text/html,<div>Hello MCP</div>');
         await getNetworkRequest.handler(
-          {params: {url: 'data:text/html,<div>Hello MCP</div>'}},
+          {params: {reqid: 1}},
           response,
           context,
         );