Refactor tests to use forEach instead of for-of loop

May help with Playwright test discovery issues in CI.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: ochafik

tests/e2e/servers.spec.ts

@@ -1,20 +1,12 @@
-import { test, expect } from "@playwright/test";
+import { test, expect, type Page } from "@playwright/test";
 
 // Server configurations
 const SERVERS = [
   { key: "basic-react", index: 0, name: "Basic MCP App Server (React-based)" },
-  {
-    key: "basic-vanillajs",
-    index: 1,
-    name: "Basic MCP App Server (Vanilla JS)",
-  },
+  { key: "basic-vanillajs", index: 1, name: "Basic MCP App Server (Vanilla JS)" },
   { key: "budget-allocator", index: 2, name: "Budget Allocator Server" },
   { key: "cohort-heatmap", index: 3, name: "Cohort Heatmap Server" },
-  {
-    key: "customer-segmentation",
-    index: 4,
-    name: "Customer Segmentation Server",
-  },
+  { key: "customer-segmentation", index: 4, name: "Customer Segmentation Server" },
   { key: "scenario-modeler", index: 5, name: "SaaS Scenario Modeler" },
   { key: "system-monitor", index: 6, name: "System Monitor Server" },
   { key: "threejs", index: 7, name: "Three.js Server" },
@@ -24,13 +16,18 @@ const SERVERS = [
  * Wait for the MCP App to load inside nested iframes.
  * Structure: page > iframe (sandbox) > iframe (app)
  */
-async function waitForAppLoad(page: import("@playwright/test").Page) {
-  // Wait for outer iframe (sandbox)
+async function waitForAppLoad(page: Page) {
   const outerFrame = page.frameLocator("iframe").first();
-  // Wait for inner iframe (app) to be visible
   await expect(outerFrame.locator("iframe")).toBeVisible();
 }
 
+async function loadServer(page: Page, serverIndex: number) {
+  await page.goto("/");
+  await page.locator("select").first().selectOption({ index: serverIndex });
+  await page.click('button:has-text("Call Tool")');
+  await waitForAppLoad(page);
+}
+
 test.describe("Host UI", () => {
   test("initial state shows controls", async ({ page }) => {
     await page.goto("/");
@@ -46,37 +43,19 @@ test.describe("Host UI", () => {
   });
 });
 
-// Generate tests for each server
-for (const server of SERVERS) {
-  test.describe(`${server.name}`, () => {
-    test(`loads app UI`, async ({ page }) => {
-      await page.goto("/");
-
-      // Select server and call tool
-      await page.locator("select").first().selectOption({ index: server.index });
-      await page.click('button:has-text("Call Tool")');
-
-      // Wait for app to load in nested iframes
-      await waitForAppLoad(page);
+// Define tests for each server using forEach to avoid for-loop issues
+SERVERS.forEach((server) => {
+  test.describe(server.name, () => {
+    test("loads app UI", async ({ page }) => {
+      await loadServer(page, server.index);
     });
 
-    test(`screenshot matches golden`, async ({ page }) => {
-      await page.goto("/");
-
-      // Select server and call tool
-      await page.locator("select").first().selectOption({ index: server.index });
-      await page.click('button:has-text("Call Tool")');
-
-      // Wait for app to load
-      await waitForAppLoad(page);
-
-      // Brief stabilization for animations/rendering
-      await page.waitForTimeout(500);
-
-      // Take screenshot
+    test("screenshot matches golden", async ({ page }) => {
+      await loadServer(page, server.index);
+      await page.waitForTimeout(500); // Brief stabilization
       await expect(page).toHaveScreenshot(`${server.key}.png`, {
-        maxDiffPixelRatio: 0.1, // 10% tolerance for dynamic content
+        maxDiffPixelRatio: 0.1,
       });
     });
   });
-}
+});