NCA Social Media
Aktualisiert:
Autor:
Roland Golla
Grüner KI Agent heilt einen kaputten Cypress Test mit Diagnosegerät

Was ist das Cypress AI Toolkit?

Das Cypress AI Toolkit ist eine offizielle Open Source Sammlung des Cypress Teams, die KI Coding Agenten Cypress Wissen mitgibt. Herzstück sind drei Skills: cypress-author zum Schreiben und Reparieren von Tests, cypress-explain zum Verstehen und Kritisieren bestehender Tests und cypress-docs für verlässliche Antworten aus der Cypress Doku.

Skills sind Ordner mit einer SKILL.md Datei. Der Agent lädt sie, wenn eine Aufgabe passt, oder du rufst sie per Slash Command auf. Sie funktionieren mit jedem Agenten, der Skills oder eigene Anweisungen unterstützt, also auch mit OpenCode. Zum Toolkit gehört außerdem die Konfiguration für Cypress Cloud MCP.

Das Problem dahinter kennt jeder, der Agenten Tests schreiben lässt: Der Code läuft, folgt aber generischen Mustern. Falsche Selektoren, feste Wartezeiten, keine Nutzung der vorhandenen Custom Commands. Das Toolkit gibt dem Agenten das Wissen, das erfahrene Cypress Entwickler im Kopf haben.

Inhalt

Cypress AI Toolkit mit NCA, schnelle Hilfe vom Experten

Ein KI Agent schreibt in Sekunden einen Cypress Test. Ob der Test etwas taugt, hängt am Wissen, das er mitbekommt. Die offiziellen Skills liefern das Cypress Wissen, wir liefern den Rest: Regeln in der AGENTS.md, saubere Custom Commands und Quality Gates, die jeden generierten Test prüfen. Wir nutzen die Skills täglich in OpenCode. Roland Golla ist Cypress Ambassador und hat Tests von Hand geschrieben, reviewt und repariert, lange bevor Agenten dazukamen. Dieses Wissen steckt bei uns in den Regeln, mit denen der Agent arbeitet.

In den NCA KI Workshops für Entwicklerteams arbeitet das Team im Terminal mit OpenCode, und die Cypress Skills richten wir dort gleich mit ein. Für Teams, die Agenten schon im Alltag nutzen, gibt es die Vibe Coding Beratung mit den NCA Agentic AI Coding Guardrails. Wer tiefer in Cypress selbst einsteigen will, ist im Cypress Workshop mit Roland Golla richtig. Wie OpenCode Skills lädt und verwaltet, zeigt unsere Seite zu OpenCode Features und Plugins.

NCA Cypress Workshop mit Cypress Ambassador Roland Golla

E2E Tests, die euer Team selbst schreibt

Ein Tag inhouse mit Roland Golla, offizieller Cypress Ambassador und seit über 20 Jahren in Testing und Refactoring zu Hause. Auf unserem YouTube Kanal zeigt er in über 70 Live Coding Tutorials, wie Cypress in echten Projekten läuft. Dazu kommt unser Open Source Plugin NCA TESTIFY: Basistests für jede Website, mit einer Zeile im CI/CD Setup. Im Workshop lernt euer Team Setup, stabile Selektoren, Custom Commands und Tests in der Pipeline.

  1. 1
    Kostenloses Vorgespräch
    Projekt, Stack und Teststand klären
  2. 2
    Workshoptag bei euch
    Setup, Patterns und erste Tests im Team
  3. 3
    Praxistag optional
    Tests im eigenen Projekt und in CI
Roland Golla
Roland Golla
Fullstack Developer
Zum Cypress Workshop arrow_forward

Die drei Skills und wofür du sie einsetzt

Jeder Skill hat eine klare Aufgabe. Zusammen decken sie den Alltag mit Cypress und KI Agenten ab.

  • cypress-author erstellt, ändert und repariert E2E und Komponenten Tests. Er liest vorher dein Projekt: Konfiguration, bestehende Specs, Custom Commands und Fixtures. So passen neue Tests zu deinen Konventionen statt zu generischen Beispielen. Er springt auch an, wenn du nur schreibst: Schreib einen Test für diese Datei.
  • cypress-explain erklärt, beschreibt und kritisiert bestehende Tests. Er findet schwache Selektoren, flaky Assertions und zu eng gekoppelte Tests und zeigt fehlende Abdeckung. Ideal für Audits, Onboarding und vor jedem größeren Umbau.
  • cypress-docs lässt den Agenten gezielt in der offiziellen Cypress Doku nachschlagen, über LLM optimierte Quellen. Antworten stützen sich dann auf die aktuelle Doku statt auf altes Trainingswissen.

Gerade der letzte Punkt ist mehr wert, als er klingt. Cypress ändert sich, und ein Agent ohne Doku Zugriff schreibt oft noch Syntax aus seinem Training. Ein aktuelles Beispiel ist die Umstellung auf --expose bei Cypress Grep.

Installation in OpenCode und anderen Agenten

Der schnellste Weg ist das skills Paket. Ein Befehl im Projektordner installiert alle drei Skills.

Code:
          

npx skills add cypress-io/ai-toolkit

Du willst nur einzelne Skills? Dann gibst du den Namen mit an. Alternativ geht es auch über die GitHub CLI.

Code:
          

npx skills add https://github.com/cypress-io/ai-toolkit --skill cypress-author
npx skills add https://github.com/cypress-io/ai-toolkit --skill cypress-explain
npx skills add https://github.com/cypress-io/ai-toolkit --skill cypress-docs

gh skill install cypress-io/ai-toolkit

Manuell kopierst du die Skill Ordner aus dem Repository in das Skills Verzeichnis deines Agenten. OpenCode findet Skills im Projekt an drei Stellen:

  • .opencode/skills/ als eigenes OpenCode Verzeichnis
  • .agents/skills/ als agentenübergreifendes Verzeichnis
  • .claude/skills/ für Projekte, die schon Claude Code Skills haben

Global geht es über ~/.config/opencode/skills/. Wir installieren die Cypress Skills immer projektbezogen und committen sie mit. So arbeitet das ganze Team mit derselben Version, und das Update läuft über einen Merge Request.

Code:
          

.opencode/
  skills/
    cypress-author/
      SKILL.md
    cypress-explain/
      SKILL.md
    cypress-docs/
      SKILL.md

Wichtig für Updates: Das skills Paket prüft nur projektbezogene Installationen auf neue Versionen, globale nicht. Ein weiterer Grund für die Installation im Projekt.

So setzt du die Skills im Alltag ein

Die Skills starten automatisch, wenn dein Prompt passt. Sicherer ist der direkte Aufruf per Slash Command. Dann weißt du, welcher Skill arbeitet. Das Wort Cypress im Prompt erhöht außerdem die Chance, dass der richtige Skill anspringt.

Neue Tests schreiben mit cypress-author. Je genauer du das erwartete Verhalten beschreibst, desto besser der Test:

Code:
          

/cypress-author Schreib einen E2E Test für den Checkout.
Ein Artikel kommt in den Warenkorb, die Anzahl zeigt 1,
der Button Bestellen ist deaktiviert, solange keine Versandart gewählt ist.
Nutze cy.login und cy.dataCy aus cypress/support/commands.ts.
Nutze cypress/e2e/cart.cy.ts als Vorlage.

Kaputte Tests reparieren ebenfalls mit cypress-author. Gib dem Agenten die Fehlermeldung und die Spec, nicht das ganze Projekt.

Code:
          

/cypress-author Der Test in cypress/e2e/search.cy.ts schlägt in CI fehl:
Timed out retrying after 4000ms: Expected to find element [data-cy=result].
Finde die Ursache und repariere den Test.
Keine festen Wartezeiten, kein force: true.

Bestehende Tests prüfen mit cypress-explain. Das ist unser Standard vor jedem Umbau einer Suite:

Code:
          

/cypress-explain Prüfe cypress/e2e/dashboard.cy.ts.
Welche Selektoren sind schwach, welche Assertions können flaky werden,
und welche Fälle fehlen?

Fragen zur API beantwortet cypress-docs, zum Beispiel: Wie funktioniert cy.intercept, und wann nutze ich cy.wait mit Alias? Der Agent schlägt in der Doku nach und nennt die Quelle.

Unser Workflow von der Analyse bis zum Merge

Bei uns läuft jeder KI generierte Test durch dieselbe Kette, egal wie gut der Prompt war. Der Agent arbeitet dabei gegen eine lokale Umgebung mit Fake Daten aus dem Seed, nie gegen echte Kundendaten.

Cypress Tests mit Skills, Schritt für Schritt

Schritt Werkzeug Ergebnis
1. Bestehende Suite verstehen cypress-explain Liste schwacher Selektoren, flaky Assertions und Lücken
2. Test schreiben oder reparieren cypress-author mit AGENTS.md Regeln Neue oder reparierte Spec im Projektstil
3. Statisch prüfen eslint-plugin-cypress Keine festen Wartezeiten, kein force, nur data-cy
4. Stabilität prüfen @cypress/grep mit burn Test ist mehrfach hintereinander grün
5. Review und Merge Mensch, Pipeline, Cypress Cloud Freigabe, danach Ergebnisse über Cloud MCP

Skills mit eigenen Regeln in der AGENTS.md kombinieren

Die Skills setzen allgemeine Cypress Regeln. Deine Projektregeln kennen sie nicht. Die gehören in die AGENTS.md. Der Agent mischt beides: das Cypress Wissen aus dem Skill und die Konventionen deines Teams.

Code:
          

## Cypress Tests

- Für neue oder kaputte Tests immer den Skill cypress-author nutzen.
- Vor jedem Umbau einer Spec erst cypress-explain auf die Datei anwenden.
- Selektoren nur über cy.dataCy, Login nur über cy.login.
- Nach jeder Änderung: npx eslint cypress --max-warnings=0
- Neue Tests mit npm run cy:burn prüfen.
- Bestehende Specs und Custom Commands nicht abschwächen, löschen oder umbauen.
- Testdaten nur aus dem lokalen Faker Seed.

Ein Tipp aus der Troubleshooting Doku des Toolkits: Skills lassen den Agenten gern package.json und Cypress Konfiguration lesen. Das kostet Token. Sag im Prompt ausdrücklich minimal exploration oder nenn direkt die Datei, die als Vorlage dienen soll. Und prüf, ob deine AGENTS.md auf sehr große Dateien verweist.

Den Loop schließen mit Cypress Cloud MCP

Skills helfen beim Schreiben. Das zweite Standbein des Toolkits ist die Konfiguration für Cypress Cloud MCP. Damit liest der Agent Testergebnisse, flaky Tests und Fehler direkt aus Cypress Cloud und sieht, wie sich seine Tests in der Pipeline verhalten.

Der Loop sieht dann so aus:

  • Cloud MCP zeigt, welcher Test seit gestern rot oder flaky ist.
  • cypress-explain analysiert die Spec und nennt die wahrscheinliche Ursache.
  • cypress-author repariert den Test nach den Regeln aus der AGENTS.md.
  • Linting und burn prüfen lokal, die Pipeline prüft den Rest, ein Mensch gibt frei.

Die MCP Verbindung nutzt standardmäßig OAuth. Wer lieber mit einem Personal Access Token arbeitet, passt die MCP Konfiguration seines Agenten an. Mehr zum Zusammenspiel mit Agenten steht auf unserer Seite zu Cypress mit KI Agenten und bei Self Healing Tests.

It just does not know Cypress the way you do.

Cypress Team, Maintainer des Cypress AI Toolkit – README auf GitHub

Aus der NCA Praxis, der Agent schreibt und das Team gibt frei

Mit den Skills schreiben Agenten Tests, die näher an der Suite des Teams sind. Was getestet werden soll, entscheiden sie trotzdem nicht. Das klären wir vorher mit dem Team, zum Beispiel per Example Mapping, und geben dem Agenten die fertigen Beispiele als Auftrag.

Eine Regel setzen wir in jedem Projekt zuerst durch: Testdateien und Custom Commands sind geschützt. Ein Agent darf neue Specs anlegen. Eine bestehende Assertion abschwächen, damit ein Test grün wird, darf er nicht. Wie wir das technisch absichern, beschreiben die Quality Gates für KI Code und unser Artikel zu Code Qualität mit KI Agenten.

Weiterlesen: das ESLint Plugin für Cypress als erste Prüfung jedes generierten Tests, Cypress Grep für Burn Tests und Smoke Runs, Agent Skills und das skills Ökosystem, cy.prompt als weiterer KI Weg in Cypress und das NCA Cypress Glossar mit allen Einträgen.

CYPRESS.IO Ambassador und IT Consultant für QA Engenieering und Qualität in PHP Projekten.
NCA Vibe Coding Consulting

Roland Golla ist Entwickler aus Leidenschaft – seit über 20 Jahren. Er hat hunderte Projekte begleitet, von Legacy-Refactoring bis KI-Integration. Bei Vibe Coding verbindet er das Beste aus beiden Welten: Die Geschwindigkeit von KI-generiertem Code mit der Qualität professioneller Softwareentwicklung. Kein Bullshit, keine Agentur-Floskeln – direkte Hilfe von jemandem, der selbst täglich im Code steckt.

Häufige Fragen zum Cypress AI Toolkit

Die wichtigsten Antworten zu Skills, Installation, OpenCode, Prompts und Guardrails.

Was ist das Cypress AI Toolkit 2026?

Das Cypress AI Toolkit ist eine offizielle Open Source Sammlung des Cypress Teams für KI Coding Agenten. Es enthält die Skills cypress-author, cypress-explain und cypress-docs sowie eine Konfiguration für Cypress Cloud MCP. Die Skills geben Agenten Cypress Wissen, damit generierte Tests den Best Practices und deinem Projektstil folgen.

Wie installiere ich die Cypress Skills 2026?

Am schnellsten mit npx skills add cypress-io/ai-toolkit im Projektordner. Einzelne Skills installierst du mit dem Zusatz --skill und dem Namen. Alternativ nutzt du gh skill install cypress-io/ai-toolkit. Manuell kopierst du die Skill Ordner in das Skills Verzeichnis deines Agenten, etwa .opencode/skills im Projekt.

Funktioniert das Toolkit 2026 mit OpenCode?

Ja. OpenCode lädt Skills aus .opencode/skills, .agents/skills und .claude/skills im Projekt sowie global aus ~/.config/opencode/skills. Jeder Skill ist ein Ordner mit einer SKILL.md. Wir nutzen die Cypress Skills täglich in OpenCode und committen sie projektbezogen, damit das ganze Team dieselbe Version hat.

Welchen Skill nutze ich 2026 wofür?

cypress-author schreibt, ändert und repariert Tests und liest vorher Konfiguration, Specs, Commands und Fixtures. cypress-explain erklärt und kritisiert bestehende Tests und findet schwache Selektoren oder flaky Assertions. cypress-docs schlägt in der offiziellen Doku nach, damit Antworten auf aktuellem Wissen statt auf altem Training beruhen.

Ersetzen die Skills 2026 das Review?

Nein. Die Skills verbessern die Qualität der generierten Tests deutlich, machen sie aber nicht fehlerfrei. Bei uns läuft jeder KI generierte Test durch ESLint, mehrere Burn Läufe mit @cypress/grep, die Pipeline und ein menschliches Review. Testdateien und Custom Commands sind geschützt, der Agent darf sie nicht abschwächen.

Wie rufe ich einen Skill direkt auf?

Per Slash Command, also /cypress-author oder /cypress-explain gefolgt von deiner Aufgabe. Ohne Slash Command lädt der Agent den Skill automatisch, wenn der Prompt passt. Der direkte Aufruf ist verlässlicher, besonders wenn mehrere Skills installiert sind. Das Wort Cypress im Prompt hilft zusätzlich.

Warum springt ein Skill nicht an?

Meist liegt er im falschen Verzeichnis, der Prompt hat kein klares Cypress Signal, oder ein anderer Skill passt besser. Prüfe den Installationsort, nutze das Wort Cypress im Prompt oder ruf den Skill per Slash Command auf. In OpenCode muss die Datei SKILL.md in Großbuchstaben heißen.

Wie spare ich Token mit den Skills?

Die Skills lassen den Agenten gern package.json und Cypress Konfiguration lesen. Schreib minimal exploration in den Prompt oder nenn direkt eine Spec als Vorlage. Prüfe außerdem deine AGENTS.md auf Verweise zu sehr großen Dateien. Ein schnelleres Modell beschleunigt die Antwort, ein größeres verbessert die Qualität.

Was hat Cypress Cloud MCP mit dem Toolkit zu tun?

Das Toolkit enthält die Konfiguration für Cypress Cloud MCP. Damit liest dein Agent Testergebnisse, flaky Tests und Fehler direkt aus Cypress Cloud. Zusammen mit den Skills entsteht ein Loop: Fehler sehen, Ursache erklären, Test reparieren, lokal prüfen und nach dem Review mergen.

Darf der Agent mit echten Daten testen?

Nicht bei uns. Agenten arbeiten immer gegen eine lokale Entwicklungsumgebung mit anonymisierten oder Fake Daten aus einem Seed. So kann jede Coding KI genutzt werden, auch aus der Cloud, ohne dass echte Kundendaten das Projekt verlassen. Die Regel steht ausdrücklich in der AGENTS.md.

Wie halte ich die Skills aktuell?

Mit der projektbezogenen Installation über das skills Paket. Es prüft nur Projekt Installationen auf Updates, globale nicht. Wir aktualisieren die Skills über einen eigenen Merge Request und lassen danach die Suite einmal laufen. So sieht das Team, was sich geändert hat, und alle arbeiten mit derselben Version.

Brauche ich KI Erfahrung für das Toolkit?

Nein. Laut Cypress brauchst du nur Cypress und ein KI Coding Tool. Für den produktiven Einsatz im Team empfehlen wir trotzdem klare Regeln: AGENTS.md, Linting, Tags, geschützte Testdateien und Review. Genau dieses Setup richten wir in Workshops und in der Vibe Coding Beratung mit Teams ein.