kogiQA MCP Web Browser

offiziell

Dies ist ein Webbrowser, der es Ihrem Codierungsagenten, wie Claude Code, ermöglicht, Websites in Ihrem Namen zu besuchen und Sie bei der Identifizierung von Fehlern oder der Erstellung von UI-Testfällen zu unterstützen.

GitHub
144

Was kann man mit Kogi QA Web Browser MCP machen?

  • Debug style issues — Bitten Sie den Agenten, eine Seite bei einer bestimmten Viewport-Breite zu inspizieren, Layout-Probleme zu identifizieren und CSS-Korrekturen vorzuschlagen.
  • Fix console errors automatically — Lassen Sie den Agenten alle Seiten durchsuchen, die über ein Menü verlinkt sind, Konsolenfehler sammeln und Korrekturen im Quellcode anwenden.
  • Map and document web app functionality — Weisen Sie den Agenten an, interne Links bis zu einer festgelegten Tiefe zu crawlen und ein Markdown-Dokument zu erstellen, das jede Seite und ihre Funktionen beschreibt.
  • Generate end-to-end tests — Beschreiben Sie einen Benutzerablauf (z. B. Registrierung) und bitten Sie den Agenten, diesen durchzugehen und Cypress-Tests auszugeben, die den Happy Path und Validierungsfehler abdecken.
  • Perform exploratory testing — Fordern Sie zeitlich begrenztes exploratives Testen mit Grenzfall-Eingaben auf jedem Formular an, mit einem Bericht über alles, was defekt oder inkonsistent ist.

Dokumentation

kogiQA MCP Web Browser

Ein Model Context Protocol (MCP)-Server, der Browser-Automatisierungsfunktionen mit kogiQA bereitstellt. Dieser Server ermöglicht es LLMs, über natürliche Sprache mit Webseiten zu interagieren, ohne dass Screenshots oder visuell abgestimmte Modelle erforderlich sind.

Wofür zu verwenden:

  • Debuggen von Stilproblemen auf Ihrer Seite
  • Automatisches Beheben von Konsolenfehlern.
  • Abbilden und Dokumentieren der Funktionalität Ihrer Web-App
  • Automatisches Schreiben von End-to-End-Tests
  • Automatisieren explorativer Tests Ihrer Anwendung

Siehe Beispiel-Prompts Nutzungsbeispiele

kogiQA MCP vs Playwright MCP

Der kogiQA MCP-Server stellt einen Browser bereit, der die Fähigkeiten des kogiQA-Browsersteuerungsalgorithmus integriert. Dies ermöglicht es Agenten, ohne Selektor mit Seiten zu interagieren, was Zeit und Tokens spart.

Installation

Auto-Installation:

npx kogiqa-mcp@latest

Claude Code

claude mcp add kogiqa-browser npx kogiqa-mcp@latest

VS Code

Klicken Sie auf eine der Schaltflächen unten, um direkt in VS Code zu installieren:

Install in VS Code Install in VS Code Insiders

Alternativ über die VS Code-CLI installieren:

code --add-mcp '{"name":"kogiqa-browser","command":"npx","args":["kogiqa-mcp@latest"]}'

Cursor

Install in Cursor

Alternativ gehen Sie zu Cursor Settings → MCP → Add new MCP Server und geben Sie den Befehlnpx kogiqa-mcp@latest ein.

Standardkonfiguration

Für jeden anderen MCP-Client fügen Sie Folgendes zu Ihrer MCP-Konfiguration hinzu:

{ "mcpServers": { "kogiqa-browser": { "command": "npx", "args": [ "kogiqa-mcp@latest" ] } } }

Nutzungsbeispiele

Sobald der Server konfiguriert ist, sprechen Sie einfach in natürlicher Sprache mit Ihrem Agenten. Da kogiQA selektorfrei ist, beschreiben Sie, was Sie erledigt haben möchten – nicht, wie die Elemente zu finden sind.

Smoke-Test eines Benutzerflusses

Open http://localhost:3000, log in with the demo credentials, add the first product to the cart, and verify that the cart badge shows "1".

Debuggen eines Stilproblems

Go to https://myapp.example.com/pricing and check why the "Pro" plan card overflows its container on a 1280px-wide viewport. Suggest a CSS fix.

Beheben von Konsolenfehlern

Navigate to http://localhost:5173, open every page linked from the main menu, collect all console errors, and fix them in the source code.

Abbilden und Dokumentieren Ihrer App

Explore https://staging.example.com, follow all internal links up to two levels deep, and produce a Markdown document describing each page and its main features.

Generieren von End-to-End-Tests

Walk through the sign-up flow at http://localhost:3000/signup and write Cypress end-to-end tests covering the happy path and validation errors.

Explorative Tests

Do 10 minutes of exploratory testing on http://localhost:8080: try edge-case inputs in every form you find and report anything that looks broken or inconsistent.

Voraussetzungen

  • Node.js 20 oder neuer
  • VS Code, Cursor, Windsurf, Claude Desktop, Goose, Junie oder ein anderer MCP-Client