Improve test infrastructure and error handling

- Enable dotenv in Playwright config to load environment variables
- Pass LiteLLM credentials to webServer for test environment
- Fix get-servers.ts error handling: wrap tool loading in try/catch
- Fix getMcpServers to work when Caddy server is not configured
- Make test-mcp-server load tools dynamically instead of caching
- Update MCP test to select model and enable server/tool checkboxes
- Remove unused browserName parameters from tests

Tests: 12/15 passing (80%). MCP tool call tests still failing -
needs further investigation of SSE/WebSocket message streaming.

Author: gecBurton

frontend/src/logic/get-servers.ts

@@ -109,18 +109,17 @@ const getTools = async(mcpServer: MCP_SERVER, authToken?: string) => {
 
   try {
     console.log(`${mcpServer.name}: Connected using Streamable HTTP transport`);
+    const serverMcpTools = await loadMcpTools(mcpServer.url, client) as unknown as Tool[];
+    const toolList = await client.listTools();
+    serverMcpTools.forEach((tool, toolIndex) => {
+      tool.serverName = mcpServer.name;
+      tool.annotations = toolList.tools[toolIndex].annotations;
+    });
+    tools.push(...serverMcpTools);
   } catch(error) { /* eslint @typescript-eslint/no-unused-vars: "off" */
-    console.log(`${mcpServer.name}: Error connecting via StreamableHTTTP`, error);
+    console.log(`${mcpServer.name}: Error loading tools`, error);
   }
 
-  const serverMcpTools = await loadMcpTools(mcpServer.url, client) as unknown as Tool[];
-  const toolList = await client.listTools();
-  serverMcpTools.forEach((tool, toolIndex) => {
-    tool.serverName = mcpServer.name;
-    tool.annotations = toolList.tools[toolIndex].annotations;
-  });
-
-  tools.push(...serverMcpTools);
   return tools;
 };
 
@@ -141,13 +140,15 @@ const getPrompt = async(promptName: string, mcpServer: MCP_SERVER, authToken?: s
 
 const cachedServers: MCP_SERVER[] = [];
 let caddyServer: MCP_SERVER | undefined;
+let testServer: MCP_SERVER | undefined;
 
 
-// Cache all servers except Caddy
+// Cache all servers except Caddy and test-mcp-server
 (async() => {
   const servers = getServerList();
   caddyServer = servers.find((server) => server.name === 'Caddy');
-  for (const server of servers.filter((server) => server.name !== 'Caddy')) {
+  testServer = servers.find((server) => server.name === 'test-mcp-server');
+  for (const server of servers.filter((server) => server.name !== 'Caddy' && server.name !== 'test-mcp-server')) {
     server.tools = await getTools(server);
     cachedServers.push(server);
   }
@@ -158,25 +159,30 @@ export const getMcpServers = async(authToken: string) => {
 
   // Get Caddy collections
   const caddyServers: MCP_SERVER[] = [];
-  if (!caddyServer) {
-    return cachedServers;
+  if (caddyServer) {
+    const caddyTools = await getTools(caddyServer, authToken);
+
+    for (const tool of caddyTools) {
+      const prompt = await getPrompt(tool.name, caddyServer, authToken);
+      caddyServers.push({
+        name: tool.annotations?.title?.replace('Search ', '') || tool.name,
+        description: tool.description,
+        url: caddyServer?.url || '',
+        accessToken: caddyServer?.accessToken,
+        tools: [tool],
+        customPrompt: prompt.trim(),
+        isCaddy: true,
+      });
+    }
   }
 
-  const caddyTools = await getTools(caddyServer, authToken);
-
-  for (const tool of caddyTools) {
-    const prompt = await getPrompt(tool.name, caddyServer, authToken);
-    caddyServers.push({
-      name: tool.annotations?.title?.replace('Search ', '') || tool.name,
-      description: tool.description,
-      url: caddyServer?.url || '',
-      accessToken: caddyServer?.accessToken,
-      tools: [tool],
-      customPrompt: prompt.trim(),
-      isCaddy: true,
-    });
+  // Load test server tools dynamically (not cached)
+  const testServers: MCP_SERVER[] = [];
+  if (testServer) {
+    testServer.tools = await getTools(testServer, authToken);
+    testServers.push(testServer);
   }
 
-  return [...caddyServers, ...cachedServers];
+  return [...caddyServers, ...testServers, ...cachedServers];
 
 };

tests/playwright.config.ts

@@ -4,9 +4,9 @@ import { defineConfig, devices } from '@playwright/test';
  * Read environment variables from file.
  * https://github.com/motdotla/dotenv
  */
-// import dotenv from 'dotenv';
-// import path from 'path';
-// dotenv.config({ path: path.resolve(__dirname, '.env') });
+import dotenv from 'dotenv';
+import path from 'path';
+dotenv.config({ path: path.resolve(__dirname, '../.env') });
 
 /**
  * See https://playwright.dev/docs/test-configuration.
@@ -78,17 +78,23 @@ export default defineConfig({
 
   /* Run local dev servers before starting the tests */
   webServer: [
-    {
-      cwd: '../',
-      command: 'make run_frontend',
-      url: 'http://localhost:4321',
-      reuseExistingServer: !process.env.CI,
-    },
     {
       cwd: '../mcp-server-demo',
       command: 'npm run start',
       url: 'http://localhost:3210/sse',
       reuseExistingServer: !process.env.CI,
     },
+    {
+      cwd: '../',
+      command: 'make run_frontend',
+      url: 'http://localhost:4321',
+      reuseExistingServer: !process.env.CI,
+      env: {
+        ...process.env,
+        USE_LITE_LLM: process.env.USE_LITE_LLM || '',
+        LITELLM_GOVAI_CLIENT_OPENAI_API_KEY: process.env.LITELLM_GOVAI_CLIENT_OPENAI_API_KEY || '',
+        LLM_GATEWAY_URL: process.env.LLM_GATEWAY_URL || '',
+      },
+    },
   ]
 });

tests/tests.spec.ts

@@ -67,7 +67,7 @@ test('Basic prompt-related tasks', async ({ page }) => {
 });
 
 
-test('Chat history', async ({ page, browserName }) => {
+test('Chat history', async ({ page }) => {
 
   await page.locator('a:has-text("Chat history")').click();
 
@@ -89,7 +89,17 @@ test('Chat history', async ({ page, browserName }) => {
 
 
 test('MCP call', async ({ page }) => {
-  
+
+  await page.locator('#model-selector').selectOption('gpt-4.1-nano');
+
+  // Enable the test-mcp-server
+  await page.locator('summary:has-text("Plugins")').click();
+  await page.getByLabel('test-mcp-server').check();
+  // Wait for tools to load after checking the server
+  await page.waitForTimeout(1000);
+  // Check the ping-pong tool
+  await page.getByLabel('ping-pong:').check();
+
   await sendPrompt('@ping-pong What is 6 * 7?', page);
 
   // check the tool call and the response is shown
@@ -138,7 +148,7 @@ test('Message input functionality', async ({ page }) => {
 });
 
 
-test('Copy to clipboard', async ({ page, browserName }) => {
+test('Copy to clipboard', async ({ page }) => {
 
   await page.locator('#model-selector').selectOption('gpt-4.1-nano');