Was ist ein MCP Server?
Bevor man mit der technischen Umsetzung startet, ist es wichtig zu verstehen, was ein MCP Server überhaupt ist. Viele Begriffe in diesem Bereich wirken am Anfang sehr abstrakt, daher lohnt sich ein kurzer Überblick.
MCP steht für Model Context Protocol und beschreibt eine Schnittstelle zwischen KI-Systemen und externen Tools. Dadurch kann eine KI nicht nur Text generieren, sondern aktiv mit Software und Systemen interagieren.
Merke: Ein MCP Server fungiert dabei als eine Art Brücke zwischen einem KI-System – beispielsweise einem Copilot – und externen Werkzeugen wie Browsern, Datenbanken oder Testframeworks wie Playwright. Über diese Verbindung kann die KI Aktionen ausführen, Informationen abrufen oder automatisierte Prozesse steuern.
Die nachfolgende Grafik soll das Verständnis für einen MCP-Server schärfen:
Warum ist das für Testautomatisierung interessant?
Im Bereich Testautomatisierung eröffnet MCP einen komplett neuen Ansatz. In der Regel war es so, dass Tests manuell geschrieben und anschließend ausgeführt wurden.
Mit MCP wird dieser Prozess deutlich dynamischer, da die KI direkt mit dem Browser arbeiten kann.
Das bedeutet konkret:
- Tests können von der KI erzeugt werden
- Browseraktionen können direkt ausgeführt werden
- Ergebnisse können sofort interpretiert werden
Gerade in Kombination mit Playwright entsteht dadurch ein sehr spannender Workflow für moderne QA-Prozesse. Einen ersten Versuchen wollen wir im Nachfolgenden starten : – ).
Voraussetzungen
Für mein Setup habe ich einige grundlegende Tools verwendet, die notwendig sind, um MCP und Playwright miteinander zu verbinden. Die Installation ist dabei relativ unkompliziert, wenn die Basis einmal steht.
Folgende Komponenten kamen zum Einsatz:
- Visual Studio Code Insiders
- GitHub Copilot Chat
- Node.js
- Playwright MCP Server
Schritt 1 – Visual Studio Code Insiders installieren
Als erstes habe ich Visual Studio Code Insiders installiert. Diese Version wird häufig für neue experimentelle Features verwendet, da MCP-Integration noch nicht vollständig stabil in der Standard-Version ist. Und jap, keine Sorge, Visual Studio Code Insiders ist völlig kostenlos.
Nach der Installation konnte ich direkt mit der Erweiterung und Konfiguration beginnen.
Schritt 2 – MCP Server hinzufügen
Im nächsten Schritt habe ich den MCP Server in VS Code eingerichtet. Dafür wird die Command Palette verwendet, über die sich viele Entwickler-Features schnell aufrufen lassen. Hierfür verwende ich:
MCP: Add Server
Schritt 3 – Playwright MCP Server installieren
Anstatt eines spezifischen Community-Pakets habe ich mich für den allgemeinen Playwright MCP Server entschieden. Dieser ist näher am offiziellen Playwright-Ökosystem und wirkt langfristig stabiler.
npx -y @playwright/mcp@latest
Weitere Informationen und die aktuelle Dokumentation findest du im offiziellen GitHub-Repository von Playwright MCP.
Schritt 4 – MCP Server Konfiguration
Nach der Installation muss der MCP Server in VS Code registriert werden. Dies erfolgt in der Regel über eine JSON-Konfiguration. Bei VS Code kann diese entweder direkt über die Command Palette (z.B. „MCP: List Servers“) geöffnet werden. Dort wird anschließend der Playwright Server aktiviert.
Ich gehe wie folgt vor: MCP: List Servers > playwright wählen.
Anschließend auf Show Configuration klicken.
Und siehe da:
{
"servers": {
"playwright": {
"command": "npx",
"args": [
"-y",
"@playwright/mcp@latest"
],
"type": "stdio"
}
},
"inputs": []
}
Hier nochmal ein Einblick in VS:
Schritt 5 – Server starten
Nun kann der MCP Server gestartet werden. Je nach Setup passiert das automatisch oder manuell über die Konfigurationsdatei.
Schritt 6 – GitHub Copilot Chat installieren
Im nächsten Schritt wird außerdem GitHub Copilot Chat benötigt. Diese Erweiterung ermöglicht die Kommunikation mit dem MCP Server.
Wenn alles installiert wurde, kann es nun endlich losgehen. Jetzt wird es interessant, weil die KI jetzt nicht mehr nur Code generiert, sondern tatsächlich mit dem Browser interagieren kann. Also: Lasst uns den Copilot-Chat öffnen und einen ersten Test starten.
Schritt 7 – Verbindung testen und ein erster Testfall
In meinem ersten Test habe ich versucht, einen einigermaßen, realistischen Use Case abzubilden. Statt eines simplen Beispiels habe ich Copilot gleich eine konkrete Aufgabe gegeben. Mein Prompt:
> „Navigate to wetter.com and search for the town Hamburg. Click on the result ‘Hamburg-Poppenbüttel – 22391 – Hamburg’ and verify that the weather forecast for the upcoming days is displayed.“
Die Idee dahinter war zu prüfen, ob der MCP Server in Kombination mit Playwright tatsächlich in der Lage ist, mehrstufige Benutzerinteraktionen auszuführen – also nicht nur eine Seite zu öffnen, sondern auch Suchprozesse, Navigation und Validierungen durchzuführen.
Die KI steuert dabei den Ablauf Schritt für Schritt.
Hier erste Einblicke:
Während der Ausführung wird man mehrfach um Bestätigung gebeten, z. B.:
- „Allow navigation to website?“
- „Proceed with browser action?“
- „Allow click action?“
Das ist kein Fehler, sondern ein bewusstes Sicherheitskonzept von MCP und Copilot.
Da der MCP Server direkten Zugriff auf einen echten Browser hat, könnten theoretisch auch ungewollte Aktionen ausgeführt werden. Deshalb gilt ein „Human-in-the-loop“-Prinzip: Jede kritische Aktion muss vom Nutzer bestätigt werden.
Diese Bestätigungen sorgen dafür, dass:
- keine unkontrollierten Browseraktionen passieren
- der Nutzer jederzeit die Kontrolle behält
- Fehler im Agenten früh gestoppt werden können
- Transparenz über alle Schritte besteht
Gerade im Kontext von Testautomatisierung ist das sinnvoll, da man so genau nachvollziehen kann, welche Schritte tatsächlich ausgeführt werden.
Schritt 8 – Die Erkenntnis:
Es zeigt sich schnell der eigentliche Vorteil dieses Ansatzes:
Die KI kann den kompletten Ablauf interpretieren und Schritt für Schritt im Browser ausführen, ähnlich wie ein menschlischer Tester.
Es passiert nach meinem Prompt also Folgendes:
- Die Seite wird automatisch geöffnet (wetter.com)
- Die Suchfunktion wird genutzt, um nach „Hamburg“ zu suchen
- Aus den Ergebnissen wird der spezifische Ort „Hamburg-Poppenbüttel – 22391 – Hamburg“ ausgewählt
- Anschließend wird geprüft, ob die Wetter-Vorhersage für die kommenden Tage sichtbar ist
Am Ende wird der Browser wieder geschlossen und der Test abgeschlossen. Außerdem wird mir zusätzlich noch wie gewünscht der Playwright-Code ausgegeben:
Abschließende Sätze
Zugegeben, der Einstieg in MCP und Playwright ist für mich selbst noch etwas experimentell, aber die Richtung ist sehr klar. Der obige Test zeigt sehr gut, wie MCP die Lücke zwischen natürlicher Sprache und echter Browser-Automatisierung schließt.
Die Kombination aus Playwright, MCP Server und GitHub Copilot zeigt bereits jetzt, wie sich Testautomatisierung künftig verändern wird. Ich möchte in den nächsten Wochen weiter mit MCP experiementieren und halte euch hier auf dem Laufenden!
Weiterführende Links