Integration tests for command line arguments

Use different server startup commands in Playwright to allow tests that
command line arguments initialize form inputs as intended.

A full integration test is used because the Inspector comprises multiple
components (package bin entry point, start command, webClient, server),
making benefit to test-effort higher, and less dependent on
implementation details.

The webServer start command uses the package entry point to ensure tests
follow the exact user experience provided by: `npx @m/inspector [...]`

Playwright's `webServer.command` cannot be [re]configured after it has
started, so multiple Playwright invocations are necessary.  To do this,
use an environment variable and a command-generating function (instead
of multiple config files).

Test tagging (`@cli`) is used to select which tests execute, while
keeping the entire test suite together.

Future:

Playwright has a feature under consideration to permit a web server per
project, which might simplify the config:
microsoft/playwright#22496

Author: richardkmichael

.gitignore

@@ -14,4 +14,5 @@ sdk
 client/playwright-report/
 client/results.json
 client/test-results/
+client/e2e/test-results/
 mcp.json

client/e2e/cli-arguments.spec.ts

@@ -1,5 +1,8 @@
 import { test, expect } from "@playwright/test";
 
+// Adjust the URL if your dev server runs on a different port
+const APP_URL = "http://localhost:6274/?MCP_PROXY_AUTH_TOKEN=abc123";
+
 // These tests verify that CLI arguments correctly set URL parameters
 // The CLI should parse config files and pass transport/serverUrl as URL params
 test.describe("CLI Arguments @cli", () => {
@@ -63,3 +66,28 @@ test.describe("CLI Arguments @cli", () => {
     await expect(page.locator("#arguments-input")).toBeVisible();
   });
 });
+
+test.describe("CLI npx (npm exec) start up", { tag: "@cli" }, () => {
+  test("CLI arguments should populate form fields", async ({ page }) => {
+    const cliTestScenario = process.env.CLI_TEST_SCENARIO;
+
+    // Skip this test if not running a CLI test scenario
+    if (
+      !cliTestScenario ||
+      (cliTestScenario !== "inline" && cliTestScenario !== "file")
+    ) {
+      test.skip();
+      return;
+    }
+
+    await page.goto(APP_URL);
+
+    const commandInput = page.getByRole("textbox", { name: "Command" });
+    const argsInput = page.getByRole("textbox", { name: "Arguments" });
+
+    await expect(commandInput).toHaveValue("npm");
+    await expect(argsInput).toHaveValue(
+      "--silent --prefix /path/to/mcp/servers/src/everything run start",
+    );
+  });
+});

client/e2e/fixtures/everything-server.json

@@ -0,0 +1,18 @@
+{
+  "mcpServers": {
+    "everything": {
+      "command": "npm",
+      "args": [
+        "--silent",
+        "--prefix",
+        "/path/to/mcp/servers/src/everything",
+        "run",
+        "start"
+      ],
+      "env": {
+        "FOO": "bar",
+        "BAZ": "bat"
+      }
+    }
+  }
+}

client/e2e/startup-state.spec.ts

@@ -1,7 +1,7 @@
 import { test, expect } from "@playwright/test";
 
 // Adjust the URL if your dev server runs on a different port
-const APP_URL = "http://localhost:6274/";
+const APP_URL = "http://localhost:6274/?MCP_PROXY_AUTH_TOKEN=abc123";
 
 test.describe("Startup State", () => {
   test("should not navigate to a tab when Inspector first opens", async ({

client/e2e/transport-type-dropdown.spec.ts

@@ -1,7 +1,7 @@
 import { test, expect } from "@playwright/test";
 
 // Adjust the URL if your dev server runs on a different port
-const APP_URL = "http://localhost:6274/";
+const APP_URL = "http://localhost:6274/?MCP_PROXY_AUTH_TOKEN=abc123";
 
 test.describe("Transport Type Dropdown", () => {
   test("should have options for STDIO, SSE, and Streamable HTTP", async ({

client/package.json

@@ -21,7 +21,9 @@
     "preview": "vite preview --port 6274",
     "test": "jest --config jest.config.cjs",
     "test:watch": "jest --config jest.config.cjs --watch",
-    "test:e2e": "playwright test e2e && npm run cleanup:e2e",
+    "test:e2e": "playwright test --grep-invert @cli e2e && npm run test:e2e:cli-file && npm run test:e2e:cli-inline && npm run cleanup:e2e",
+    "test:e2e:cli-file": "CLI_TEST_SCENARIO=file playwright test --grep @cli e2e",
+    "test:e2e:cli-inline": "CLI_TEST_SCENARIO=inline playwright test --grep @cli e2e",
     "cleanup:e2e": "node e2e/global-teardown.js"
   },
   "dependencies": {

client/playwright.config.ts

@@ -1,17 +1,33 @@
 import { defineConfig, devices } from "@playwright/test";
 
+const getWebServerCommand = () => {
+  /**
+   * The content of the fixture configuration file matches the inline arguments such
+   * that the same set of tests (tagged `@cli`) can run in both scenarios.
+   */
+  switch (process.env.CLI_TEST_SCENARIO) {
+    case "inline":
+      return "npx . -e FOO=bar -e BAZ=bat npm --silent --prefix /path/to/mcp/servers/src/everything run start";
+    case "file":
+      return "npx . --config client/e2e/fixtures/everything-server.json --server everything";
+    default:
+      return "npm run dev";
+  }
+};
+
 /**
  * @see https://playwright.dev/docs/test-configuration
  */
 export default defineConfig({
   /* Run your local dev server before starting the tests */
   webServer: {
     cwd: "..",
-    command: "npm run dev",
-    url: "http://localhost:6274",
+    command: getWebServerCommand(),
+    url: "http://localhost:6274/?MCP_PROXY_AUTH_TOKEN=abc123",
     reuseExistingServer: !process.env.CI,
     env: {
       MCP_AUTO_OPEN_ENABLED: "false",
+      MCP_PROXY_AUTH_TOKEN: "abc123",
     },
   },
 
@@ -36,7 +52,7 @@ export default defineConfig({
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
-    baseURL: "http://localhost:6274",
+    baseURL: "http://localhost:6274/?MCP_PROXY_AUTH_TOKEN=abc123",
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: "on-first-retry",
@@ -46,6 +62,9 @@ export default defineConfig({
 
     /* Record video on failure */
     video: "retain-on-failure",
+
+    /* Useful for local debugging */
+    // headless: false,
   },
 
   /* Configure projects for major browsers */