From d2d11ac7d4067de7268c8c876aee9d2207485f99 Mon Sep 17 00:00:00 2001
From: Avi Alpert <aalpert@amazon.com>
Date: Wed, 29 Apr 2026 16:35:42 -0400
Subject: [PATCH] test(agent-inspector): add traces e2e tests

---
 browser-tests/tests/traces.test.ts | 30 +++++++++++++++++++++++-------
 docs/TESTING.md                    | 18 ++++++++++++++++++
 2 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/browser-tests/tests/traces.test.ts b/browser-tests/tests/traces.test.ts
index 77c1b5ad4..0ac481f04 100644
--- a/browser-tests/tests/traces.test.ts
+++ b/browser-tests/tests/traces.test.ts
@@ -1,22 +1,38 @@
 import { expect, sendMessage, test } from '../fixtures';
 
 test.describe('Traces', () => {
-  test('traces panel shows trace after invocation', async ({ page }) => {
+  test('traces panel shows span tree after invocation', async ({ page }) => {
     await page.goto('/');
 
     await sendMessage(page, 'Say hello');
 
-    await page.getByRole('tab', { name: 'Traces' }).click();
+    const resourcePanel = page.getByTestId('resource-panel');
+    await expect(resourcePanel).toBeVisible({ timeout: 10_000 });
 
-    const traceList = page.getByTestId('trace-list');
+    const tracesTab = resourcePanel.getByRole('tab', { name: 'Traces' });
+    await tracesTab.click();
+
+    // Wait for trace list to populate
+    const traceList = resourcePanel.getByTestId('traces-trace-list');
     await expect(traceList).toBeVisible({ timeout: 30_000 });
 
+    // Click the first trace
     const traceButton = traceList.getByRole('button').first();
-    await expect(traceButton).toBeVisible({ timeout: 30_000 });
-
+    await expect(traceButton).toBeVisible({ timeout: 10_000 });
     await traceButton.click();
 
-    const spanRow = page.locator('[role="button"]').filter({ hasText: /.+/ });
-    await expect(spanRow.first()).toBeVisible({ timeout: 10_000 });
+    // Verify span tree renders
+    const spanTree = resourcePanel.getByTestId('traces-span-tree');
+    await expect(spanTree).toBeVisible({ timeout: 10_000 });
+
+    // Verify tree has at least one span row with a name
+    const spanRows = spanTree.getByRole('button');
+    await expect(spanRows.first()).toBeVisible();
+
+    // Click a span to open log panel
+    await spanRows.first().click();
+
+    const logPanel = resourcePanel.getByTestId('traces-log-panel');
+    await expect(logPanel).toBeVisible({ timeout: 5_000 });
   });
 });
diff --git a/docs/TESTING.md b/docs/TESTING.md
index 700ab3aae..9c70af6b3 100644
--- a/docs/TESTING.md
+++ b/docs/TESTING.md
@@ -415,6 +415,24 @@ Test configuration is in `vitest.config.ts` using Vitest projects:
 - Test timeout: 120 seconds
 - Hook timeout: 120 seconds
 
+## Troubleshooting
+
+### `Cannot find module '@playwright/test'`
+
+Playwright is not installed. Run:
+
+```bash
+npm install
+```
+
+### `browserType.launch: Executable doesn't exist` (Playwright browsers)
+
+Playwright browsers need to be downloaded after install. Run:
+
+```bash
+npx playwright install chromium
+```
+
 ## Integration Tests
 
 Integration tests require: