Playwright einrichten

Diese Anleitung führt dich durch drei Einrichtungsschritte, mit denen career-ops den Browser automatisieren kann:

Playwright-Paket installieren

Führe npm install im Stammordner von career-ops aus:

npm install

Damit werden Playwright und alle anderen Abhängigkeiten installiert, die in package.json angegeben sind. Überspringe diesen Schritt, wenn du ihn bei der Ersteinrichtung schon ausgeführt hast.

Chromium herunterladen

Playwright braucht eine eigene Chromium-Kopie, die es steuern kann. Der Installer lädt sie normalerweise direkt nach den Abhängigkeiten automatisch herunter. Falls npm run doctor meldet, dass sie fehlt, lade sie mit diesem Befehl herunter:

npx playwright install chromium

Diesen Schritt machst du nur einmal. Nach npm-Updates musst du ihn nicht wiederholen.

Playwright MCP konfigurieren

Mit dem Playwright MCP kann Claude den Browser während des Schritts /career-ops apply direkt steuern: Er öffnet Bewerbungsformulare, liest die Feldbezeichnungen und schlägt Antworten vor.

MCP-Server registrieren

Führe diesen Befehl im Stammordner von career-ops aus, um den Playwright MCP bei Claude Code zu registrieren:

claude mcp add --scope project playwright -- npx @playwright/mcp@latest

So läuft die Registrierung in einem einzigen Schritt, wie in der Playwright-MCP-Dokumentation beschrieben, ergänzt um --scope project: Claude Code trägt den Server dann in die .mcp.json im Stammordner von career-ops ein, eine der Dateien, die npm run doctor prüft. Wenn du Claude Code dort das nächste Mal startest, gib den Server frei, sobald du gefragt wirst.

Willst du ihn stattdessen in jedem Projekt nutzen, führe den Befehl mit --scope user aus. npm run doctor liest keine Server mit User-Scope und warnt dann, dass es den MCP nicht erkennt, obwohl Claude Code ihn lädt.

Manuelle Konfiguration (Alternative)

Wenn du lieber alles von Hand einrichtest, füge den folgenden Eintrag in die .mcp.json im Stammordner von career-ops ein (leg die Datei an, falls es sie noch nicht gibt):

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp@latest"]
    }
  }
}

Starte Claude Code nach dem Speichern der Datei neu und gib den Server frei, sobald du gefragt wirst. Danach kann career-ops in apply-Sitzungen browser_navigate und browser_snapshot verwenden.

Einrichtung überprüfen

Führe das doctor-Script aus, um zu prüfen, ob alle drei Komponenten vorhanden sind:

npm run doctor

In der Ausgabe sollte bestätigt werden, dass Playwright, Chromium und der MCP-Server bereit sind. Wenn die Prüfung erfolgreich ist, ist die Einrichtung abgeschlossen.

Dem Browser beim Ausfüllen des Formulars zusehen

Der Playwright MCP öffnet standardmäßig ein sichtbares Browserfenster (die Einrichtung oben übergibt kein --headless). So siehst du jede Seite, die er liest, und jedes Feld, das er ausfüllt.

Damit er die Bewerbung in diesem Fenster öffnet und das gesamte Formular ausfüllt, ergänze den apply-Befehl um eine Anweisung:

/career-ops apply {company_name} open up with playwright the browser and fill out the entire form

Run the /career-ops apply command with the {company_name} argument. Then, use the Playwright MCP to open a browser window and fill out the entire form live.

Run the /career-ops apply command with the {company_name} argument. Then, use the Playwright MCP to open a browser window and fill out the entire form live.

Run the /career-ops apply command with the {company_name} argument. Then, use the Playwright MCP to open a browser window and fill out the entire form live.

Auch ohne diese Anweisung nutzt career-ops im selben sichtbaren Fenster Playwright und den MCP, um das Formular zu lesen und deine Antworten zu entwerfen.

Wofür die einzelnen Komponenten da sind