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

client/e2e/cli-arguments.spec.ts

@@ -0,0 +1,40 @@
+import { test, expect } from "@playwright/test";
+
+// Adjust the URL if your dev server runs on a different port
+const APP_URL = "http://localhost:6274/";
+
+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("uv");
+    await expect(argsInput).toHaveValue("run main.py");
+
+    // Click to expand environment variables section
+    const envButton = page.getByRole("button", {
+      name: /Environment Variables/i,
+    });
+    await envButton.click();
+
+    // Check that environment variables are populated (sorted alphabetically)
+    const keyInputs = page.locator('input[placeholder="Key"]');
+    const valueInputs = page.locator('input[placeholder="Value"]');
+
+    await expect(keyInputs.first()).toHaveValue("BAZ");
+    await expect(valueInputs.first()).toHaveValue("bat");
+  });
+});

client/e2e/fixtures/test-cli-config.json

@@ -0,0 +1,12 @@
+{
+  "mcpServers": {
+    "test-server": {
+      "command": "uv",
+      "args": ["run", "main.py"],
+      "env": {
+        "FOO": "bar",
+        "BAZ": "bat"
+      }
+    }
+  }
+}

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,37 @@
 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 uv run main.py";
+    case "file":
+      return "npx . --config client/e2e/fixtures/test-cli-config.json --server test-server";
+    /* FIXME: With and without a mock localStorage
+     * case "none":
+     *   return "npx . ";
+     */
+    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",
+    command: getWebServerCommand(),
     url: "http://localhost:6274",
     reuseExistingServer: !process.env.CI,
     env: {
       MCP_AUTO_OPEN_ENABLED: "false",
+      DANGEROUSLY_OMIT_AUTH: "true",
     },
   },