From e36ebb6ede6d42cc841e4078527bba3cf33a40e9 Mon Sep 17 00:00:00 2001
From: ryanrosello-og <50574915+ryanrosello-og@users.noreply.github.com>
Date: Thu, 4 Jul 2024 17:59:56 +0800
Subject: [PATCH] feat(trace-viewer) add request urls for actions initiated via
 APIRequestContext  (#31534)

---
 packages/trace-viewer/src/ui/actionList.tsx | 10 ++++++++++
 tests/library/trace-viewer.spec.ts          |  6 +++---
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/trace-viewer/src/ui/actionList.tsx b/packages/trace-viewer/src/ui/actionList.tsx
index 886df28a4..e5866ba31 100644
--- a/packages/trace-viewer/src/ui/actionList.tsx
+++ b/packages/trace-viewer/src/ui/actionList.tsx
@@ -102,6 +102,7 @@ export const renderAction = (
       <span>{action.apiName}</span>
       {locator && <div className='action-selector' title={locator}>{locator}</div>}
       {action.method === 'goto' && action.params.url && <div className='action-url' title={action.params.url}>{action.params.url}</div>}
+      {action.class === 'APIRequestContext' && action.params.url && <div className='action-url' title={action.params.url}>{excludeOrigin(action.params.url)}</div>}
     </div>
     {(showDuration || showBadges) && <div className='spacer'></div>}
     {showDuration && <div className='action-duration'>{time || <span className='codicon codicon-loading'></span>}</div>}
@@ -111,3 +112,12 @@ export const renderAction = (
     </div>}
   </>;
 };
+
+function excludeOrigin(url: string): string {
+  try {
+    const urlObject = new URL(url);
+    return urlObject.pathname + urlObject.search;
+  } catch (error) {
+    return url;
+  }
+}
\ No newline at end of file
diff --git a/tests/library/trace-viewer.spec.ts b/tests/library/trace-viewer.spec.ts
index dc9e9faca..0f7feb365 100644
--- a/tests/library/trace-viewer.spec.ts
+++ b/tests/library/trace-viewer.spec.ts
@@ -812,12 +812,12 @@ test('should open two trace files', async ({ context, page, request, server, sho
   await traceViewer.selectAction('apiRequestContext.get');
   await traceViewer.selectAction('apiRequestContext.post');
   await expect(traceViewer.actionTitles).toHaveText([
-    `apiRequestContext.get`,
+    `apiRequestContext.get/simple.json`,
     `page.gotohttp://localhost:${server.PORT}/input/button.html`,
-    `apiRequestContext.head`,
+    `apiRequestContext.head/simplezip.json`,
     `locator.clicklocator('button')`,
     `locator.clicklocator('button')`,
-    `apiRequestContext.post`,
+    `apiRequestContext.post/one-style.css`,
   ]);
 
   await traceViewer.page.locator('text=Metadata').click();