Add Playwright end-to-end testing infrastructure to dev container

.devcontainer/Dockerfile

@@ -35,7 +35,13 @@ RUN --mount=type=cache,target=/var/lib/apt/lists,sharing=locked \
     php \
     php-cli \
     # includes certutil for dev cert verification
-    libnss3-tools
+    libnss3-tools \
+    # Playwright system dependencies (headless Chromium, English-only)
+    libasound2t64 libatk-bridge2.0-0t64 libatk1.0-0t64 libatspi2.0-0t64 \
+    libcairo2 libcups2t64 libdbus-1-3 libdrm2 libgbm1 libglib2.0-0t64 \
+    libnspr4 libnss3 libpango-1.0-0 libx11-6 libxcb1 libxcomposite1 \
+    libxdamage1 libxext6 libxfixes3 libxkbcommon0 libxrandr2 \
+    libfontconfig1 libfreetype6 fonts-liberation fonts-freefont-ttf
 # Install Vale
 ARG VALE_VERSION=3.12.0
 RUN set -eux; \

.devcontainer/devcontainer.json

@@ -20,14 +20,22 @@
       "kubectl": "latest",
       "helm": "latest"
     },
+    "ghcr.io/devcontainers/features/dotnet:2": {},
+    "ghcr.io/devcontainers/features/node:1": {},
+    "ghcr.io/devcontainers/features/kubectl-helm-minikube:1": {},
     "ghcr.io/devcontainers-extra/features/markdownlint-cli2:1": {},
     "ghcr.io/devcontainers/features/github-cli:1": {},
     "./features/aspire": {
       "version": "13.1.1"
     },
     "ghcr.io/devcontainers/features/go:1": {},
     "ghcr.io/devcontainers/features/terraform:1": {},
-    "ghcr.io/devcontainers-extra/features/go-task:1": {}
+    "ghcr.io/devcontainers-extra/features/go-task:1": {},
+    "ghcr.io/devcontainers/features/desktop-lite:1": {
+      "password": "crucible",
+      "webPort": "6080",
+      "vncPort": "5901"
+    }
   },
   "containerEnv": {
     "NUGET_PACKAGES": "/home/vscode/.nuget/packages", // this might not be needed. will try removing later.
@@ -57,7 +65,8 @@
   "postStartCommand": "bash -l .devcontainer/poststart.sh",
   "forwardPorts": [
     9003, // Xdebug
-    443 // Minikube ingress
+    443, // Minikube ingress
+    6080 // noVNC (Playwright headed browser)
   ],
   "customizations": {
     "vscode": {
@@ -74,6 +83,7 @@
         "shd101wyy.markdown-preview-enhanced",
         "pflannery.vscode-versionlens",
         "Anthropic.claude-code",
+        "ms-playwright.playwright",
         "AmazonWebServices.aws-toolkit-vscode",
         "bmewburn.vscode-intelephense-client",
         "xdebug.php-debug"
@@ -91,7 +101,13 @@
         // Enable when working on Moodle/PHP: Extensions > Intelephense > Enable (Workspace)
         "intelephense.enable": false,
         // Disable CloudFormation language server to save ~163MB memory (not used in this project)
-        "aws.cloudFormation.enable": false
+        "aws.cloudFormation.enable": false,
+        // Point Playwright extension to the test project
+        "playwright.reuseBrowser": true,
+        "playwright.env": {},
+        "playwright.configs": [
+          "/mnt/data/crucible/crucible-tests/playwright.config.ts"
+        ]
       }
     }
   }

.devcontainer/postcreate.sh

@@ -22,7 +22,30 @@ DOTNET_EF_PID=$!
 (npm config -g set fund false && npm install -g @angular/cli@latest) &
 ANGULAR_PID=$!
 
-wait $DOTNET_EF_PID $ANGULAR_PID
+# Initialize Playwright test agents in the dev container
+PLAYWRIGHT_TESTING_DIR="/mnt/data/crucible/crucible-tests"
+if [ -d "$PLAYWRIGHT_TESTING_DIR" ]; then
+  (
+    cd "$PLAYWRIGHT_TESTING_DIR" || exit 1
+
+    echo "Installing Playwright dependencies..."
+    npm install
+
+    echo "Installing Playwright browser binaries..."
+    npx playwright install chromium
+
+    echo "Initializing Playwright test agents..."
+    TMPDIR=$(mktemp -d)
+    cd "$TMPDIR"
+    npx --prefix "$PLAYWRIGHT_TESTING_DIR" playwright init-agents --loop=claude --config "$PLAYWRIGHT_TESTING_DIR/playwright.config.ts"
+    mkdir -p /workspaces/crucible-development/.claude/agents
+    cp "$TMPDIR/.claude/agents/"*.md /workspaces/crucible-development/.claude/agents/
+    rm -rf "$TMPDIR"
+  ) &
+  PLAYWRIGHT_AGENTS_PID=$!
+fi
+
+wait $DOTNET_EF_PID $ANGULAR_PID ${PLAYWRIGHT_AGENTS_PID:-}
 echo "Tool installs complete."
 
 # Generate dotnet dev-cert. Needed if not using aspire extension launch profiles

.gitignore

@@ -81,6 +81,9 @@ helm-charts/crucible/files/*.crt
 # playwright mcp logs
 .playwright-mcp/
 
+# Generated Playwright test agents
+.claude/agents/
+
 # Local repository configurations (private/internal/personal repos, local overrides)
 scripts/repos.local.json
 

.mcp.json

@@ -13,6 +13,15 @@
         "-y",
         "@playwright/mcp@latest"
       ]
+    },
+    "playwright-test": {
+      "command": "/mnt/data/crucible/crucible-tests/node_modules/.bin/playwright",
+      "args": [
+        "run-test-mcp-server",
+        "--config",
+        "/mnt/data/crucible/crucible-tests/playwright.config.ts"
+      ],
+      "cwd": "/mnt/data/crucible/crucible-tests"
     }
   }
-}
+}

CLAUDE.md

@@ -83,6 +83,9 @@ IMPORTANT! Aspire is designed to capture rich logs and telemetry for all resourc
 ## Playwright MCP server
 The playwright MCP server has also been configured in this repository and you should use it to perform functional investigations of the resources defined in the app model as you work on the codebase. To get endpoints that can be used for navigation using the playwright MCP server use the list resources tool.
 
+## Playwright Test Suite
+End-to-end Playwright tests live at `/mnt/data/crucible/crucible-tests/`. This repo contains test plans and spec files for all 11 Crucible applications. See the `README.md` in that directory for full details on test conventions, fixtures, and how to write/run tests. When asked to create, update, or run Playwright tests, work in that directory.
+
 ## Aspire workload
 IMPORTANT! The aspire workload is obsolete. You should never attempt to install or use the Aspire workload.
 

README.md

@@ -12,6 +12,7 @@ Development Environment for [Crucible](https://github.com/cmu-sei/crucible) - a
   - [Launch Profiles](#launch-profiles)
   - [Default Credentials](#default-credentials)
 - [Claude Code](#claude-code)
+- [Playwright Testing](#playwright-testing)
 - [Memory Optimization](#memory-optimization)
   - [Intelephense PHP Extension](#intelephense-php-extension)
   - [UI Development vs Production Mode](#ui-development-vs-production-mode)
@@ -143,6 +144,57 @@ The config file is mounted to `/home/vscode/.aws/config` inside the container an
 
 Once the container is running with valid credentials, run `claude` in the terminal to start Claude Code.
 
+## Playwright Testing
+
+The dev container includes [Playwright](https://playwright.dev/) for end-to-end testing of Crucible applications. Dependencies (Node.js packages and Chromium browser) are installed automatically during container creation.
+
+The test suite lives in `/mnt/data/crucible/crucible-tests/` and covers all 11 Crucible applications. Each app has a test plan and organized spec files. See the [crucible-tests README](https://github.com/cmu-sei/crucible-tests) for full documentation.
+
+### VS Code Playwright Extension
+
+The [Playwright Test for VS Code](https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright) extension is pre-installed and configured to use the Crucible test suite. Open the **Testing** panel in VS Code to browse, run, and debug tests visually.
+
+### Claude Code Playwright Test Agents
+
+The dev container automatically initializes three [Playwright test agents](https://playwright.dev/docs/test-agents) for use with Claude Code during container creation. These agents allow Claude Code to plan, generate, and fix Playwright tests interactively using a real browser.
+
+| Agent | Purpose |
+|-------|---------|
+| **playwright-test-planner** | Navigates a running application in a browser, explores the UI, and produces a comprehensive test plan (saved as a markdown file) |
+| **playwright-test-generator** | Takes a test plan and generates `.spec.ts` files by executing each step in a real browser, then recording the actions |
+| **playwright-test-healer** | Runs failing tests, debugs them in a live browser, identifies root causes, and fixes the test code |
+
+To use the agents, start Claude Code in the terminal and ask it to plan, generate, or fix tests. Claude Code will automatically delegate to the appropriate agent. For example:
+
+- *"Create a test plan for the Player application"* — invokes the **planner** to explore the Player UI and produce a test plan
+- *"Generate tests for the Blueprint authentication section"* — invokes the **generator** to create spec files from the test plan
+- *"Fix the failing Blueprint tests"* — invokes the **healer** to debug and repair broken tests
+
+The agents require Crucible services to be running since they interact with the applications through a real browser.
+
+### Running Tests from the Terminal
+
+Start the Crucible services first (via a VS Code launch profile or `aspire run`), then:
+
+```bash
+cd /mnt/data/crucible/crucible-tests
+
+# Run tests for a specific application
+./run-tests.sh blueprint
+
+# Run all tests
+./run-tests.sh all
+
+# Interactive UI mode
+./run-tests.sh ui blueprint
+
+# Headed mode (see browser)
+./run-tests.sh headed blueprint
+
+# View test report
+./run-tests.sh report
+```
+
 ## Memory Optimization
 
 The Crucible development environment includes 30+ microservices and can be memory-intensive. Several optimizations are configured to reduce memory usage:

aspire.config.json

@@ -0,0 +1,5 @@
+{
+  "appHost": {
+    "path": "Crucible.AppHost/Crucible.AppHost.csproj"
+  }
+}

scripts/repos.json

@@ -44,6 +44,10 @@
         {
           "name": "Crucible-Github-Actions",
           "url": "https://github.com/cmu-sei/Crucible-Github-Actions"
+        },
+        {
+          "name": "crucible-tests",
+          "url": "https://github.com/cmu-sei/crucible-tests.git"
         }
       ]
     },