Demo Playwright

Demo project showing how to use Playwright MCP with GitHub Copilot Agent to navigate a .NET 10 Blazor Server application protected by Keycloak OIDC authentication.

Stack

Layer	Technology
App	.NET 10 Blazor Server
Auth	Keycloak 26 (OIDC / Authorization Code Flow)
Browser automation	Playwright MCP (@playwright/mcp)
AI agent	GitHub Copilot (Claude Sonnet)

Project Structure

demo-playwright-mcp/
├── .github/
│   ├── prompts/          # Copilot Agent prompt files (.prompt.md)
│   └── instructions/     # Reporting rules applied to all prompts
├── .vscode/
│   └── mcp.json          # Playwright MCP server configuration
├── .auth/                # Runtime only — auth.json is gitignored
├── keycloak/
│   └── realm-export.json # Pre-configured realm (auto-imported on startup)
├── src/
│   └── BlazorDemo/       # .NET 10 Blazor Server app
└── docker-compose.yml    # Keycloak

Pages

Route	Auth	Description
/	Public	Home — shows auth status
/dashboard	Required	Activity cards
/profile	Required	Keycloak claims
/contact	Required	Contact form with submit

Prompts

File	Purpose
00-save-auth-state	User logs in manually → saves .auth/auth.json
01-login-flow	Visual demo of the full OIDC login flow
02-logout	Logout and session termination
03-protected-page-redirect	Unauthenticated access → redirect to Keycloak
04-navigate-authenticated	Navigation between protected pages
05-submit-form	Fill and submit the contact form
06-full-demo	All scenarios in a single run
07-validation-failure	Intentional validation errors — demonstrates ❌ reporting

Prerequisites

• .NET 10 SDK
• Docker
• Node.js (for npx @playwright/mcp)
• VS Code with GitHub Copilot

Getting Started

1. Start Keycloak

docker compose up -d

Wait ~30s for Keycloak to import the realm. Verify at http://localhost:8080 (admin / admin).

2. Run the app

dotnet run --project src/BlazorDemo

App runs at http://localhost:5000.

3. Enable Playwright MCP in VS Code

Open the Command Palette → MCP: List Servers → confirm playwright is running.

4. Save auth state (one-time)

In Copilot Chat (Agent mode), run:

/00-save-auth-state

The agent opens the browser and navigates to the Keycloak login page. Type your credentials manually in the browser, then reply done in the chat. The agent saves .auth/auth.json.

5. Run the demo

/06-full-demo

Or run individual prompts (/01-login-flow, /03-protected-page-redirect, etc.).

Test Credentials

Field	Value
Username	[email protected]
Password	Demo@123

These credentials exist only in the local Keycloak instance and have no external access.

Auth State Approach

Prompts 04, 05, and 06 load .auth/auth.json instead of using hardcoded credentials — this is the Playwright recommended pattern for separating authentication setup from test logic.

Prompt 01 intentionally includes credentials because demonstrating the login flow is its purpose.