NCA Social Media
Aktualisiert:
Autor:
Roland Golla
Grüner Wegweiser teilt Cypress Tests nach Prod und Stage

Was ist Cypress Grep?

Cypress Grep ist das offizielle Plugin @cypress/grep, mit dem du Cypress Tests nach Titel oder Tags filterst. Statt der ganzen Suite läuft nur der Teil, den du gerade brauchst, zum Beispiel alle Tests mit dem Tag @smoke.

Das Plugin wird vom Cypress Team im Cypress Monorepo gepflegt und steht unter MIT Lizenz. Es kann Specs ohne passende Tests vorab überspringen, gefilterte Tests ganz ausblenden und einzelne Tests mehrfach hintereinander laufen lassen, um wackelige Tests zu finden.

Wir setzen Grep für drei Dinge ein: eine schnelle Smoke Stufe in der Pipeline, getrennte Läufe für Production und Stage und Burn Tests für neue Specs. Alle drei zeigen wir weiter unten mit Beispielen.

Inhalt

Cypress Grep mit NCA, schnelle Hilfe vom Experten

Jede wachsende Suite kommt an den Punkt, an dem ein Tippfehler zwanzig Minuten Pipeline kostet, bis ihn jemand sieht. Dann fangen Teams an, Tests zu überspringen. Mit @cypress/grep drehen wir die Reihenfolge um: Die wichtigsten Tests laufen zuerst, alles andere danach. Roland Golla ist Cypress Ambassador und kennt dieses Problem aus über zwanzig Jahren Testing und Refactoring. Die erste Stufe bilden bei uns die Basistests aus dem eigenen NCA TESTIFY Cypress Plugin, das mit einer Zeile ins CI/CD Setup kommt.

Die Tag Strategie für dein Projekt bauen wir in den Cypress Power Hours oder im Cypress Workshop mit Roland Golla direkt an deinem Code. Die Stufen in der Pipeline richten wir über das CI/CD Pipeline Setup ein, mit getrennten Läufen für Staging, Docker und Preview URLs. Danach verteilt Cypress Parallelisierung die volle Suite auf mehrere Maschinen, und mit Cypress Test Replay siehst du jeden Fehler aus der CI so, wie er passiert ist.

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

Installation in drei Schritten

Aktuelle Versionen von @cypress/grep setzen Cypress 15.10 oder neuer voraus. Zuerst installierst du das Paket als Dev Abhängigkeit.

Code:
          

npm install --save-dev @cypress/grep

Danach registrierst du Grep in der Support Datei. Ohne diesen Schritt filtert nichts.

Code:
          

// cypress/support/e2e.ts
import { register as registerCypressGrep } from '@cypress/grep'
registerCypressGrep()

Der dritte Schritt ist optional, lohnt sich aber ab mittelgroßen Suiten. Das Plugin in der Konfiguration erlaubt es, Specs ohne passende Tests gar nicht erst zu laden.

Code:
          

// cypress.config.ts
import { defineConfig } from 'cypress'
import { plugin as cypressGrepPlugin } from '@cypress/grep/plugin'

export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      cypressGrepPlugin(config)
      return config
    },
  },
})

TypeScript Typen sind seit Version 5 im Paket enthalten. Falls deine IDE die Option tags nicht kennt, trägst du @cypress/grep zusätzlich unter types in der cypress/tsconfig.json ein.

Tests taggen und nach Tags filtern

Tags setzt du als Option an it oder describe. Ein Tag am describe gilt für alle Tests darin. Mehrere Tags gibst du als Array an.

Code:
          

describe('Checkout', { tags: '@checkout' }, () => {
  it('legt einen Artikel in den Warenkorb', { tags: ['@smoke', '@critical'] }, () => {
    cy.visit('/produkte')
    cy.get('[data-cy=add-to-cart]').first().click()
    cy.get('[data-cy=cart-count]').should('have.text', '1')
  })

  it('zeigt alle Versandarten', { tags: '@slow' }, () => {
    // ...
  })
})

Eine Falle, die wir oft in Reviews sehen: tags: '@smoke @fast' als ein String erzeugt einen Tag mit Leerzeichen, nicht zwei. Für mehrere Tags immer ein Array nutzen.

Auf der Kommandozeile filterst du dann mit --expose. Die Syntax für Kombinationen ist kurz:

  • Leerzeichen bedeutet ODER: @smoke @critical
  • Plus bedeutet UND: @smoke+@critical
  • Minus bedeutet NICHT: @smoke+-@slow
Code:
          

npx cypress run --expose grepTags="@smoke"
npx cypress run --expose grepTags="@smoke+@critical"
npx cypress run --expose grepTags="@smoke+-@slow"
npx cypress run --expose grep="Warenkorb",grepTags="@smoke"

Von env zu expose, die Umstellung ab Version 6

Viele Anleitungen im Netz zeigen noch --env grepTags. Das funktioniert mit aktuellen Versionen nicht mehr. Cypress hat Cypress.env() mit Version 15.10 als veraltet markiert und für öffentliche Werte durch Cypress.expose() ersetzt. @cypress/grep ist ab Version 6 mitgezogen.

Code:
          

# alt, bis @cypress/grep 5
npx cypress run --env grepTags="@smoke"

# neu, ab @cypress/grep 6
npx cypress run --expose grepTags="@smoke"

Bei einem Update prüfst du drei Stellen: die Scripts in der package.json, die CI Konfiguration und feste Werte in der cypress.config. Dort heißt der Block jetzt expose statt env. Wer von Version 4 kommt, muss außerdem die Imports umstellen, weil register und plugin seit Version 5 benannte Exporte sind.

Genau solche Umstellungen übersehen KI Agenten gern, weil ihr Trainingswissen die alte Syntax kennt. Ein Grund mehr, Agenten mit aktueller Doku zu versorgen, etwa über die offiziellen Cypress AI Skills, und Pipeline Änderungen immer im Review zu prüfen.

Specs vorfiltern, ausblenden und Burn Tests

Drei Optionen machen Grep in großen Suiten erst richtig schnell und nützlich:

  • grepFilterSpecs=true lädt nur Specs, die passende Tests enthalten. Ohne diese Option lädt Cypress jede Spec Datei und markiert die gefilterten Tests nur als pending. Das braucht das Plugin in der Konfiguration.
  • grepOmitFiltered=true blendet gefilterte Tests komplett aus, statt sie als pending anzuzeigen.
  • burn=5 lässt die gefilterten Tests fünfmal hintereinander laufen. So findest du Flaky Tests, bevor sie in der Pipeline auffallen.
Code:
          

npx cypress run --expose grepTags="@smoke",grepFilterSpecs=true,grepOmitFiltered=true
npx cypress run --expose grep="Warenkorb",burn=10
npx cypress run --expose grepUntagged=true

Zwei Grenzen solltest du kennen. Negative Filter wie -@slow funktionieren nicht zusammen mit grepFilterSpecs. Und gefilterte Tests können in Cypress Cloud trotzdem als pending in der Aufzeichnung erscheinen.

Die letzte Zeile oben ist ein unterschätztes Werkzeug. grepUntagged zeigt alle Tests ohne Tag. Damit prüfst du regelmäßig, ob neue Tests sauber eingeordnet sind, gerade wenn Agenten Tests schreiben.

Die wichtigsten Grep Optionen

Option Was sie macht Beispiel
grep Filtert nach Text im Testtitel, mehrere Begriffe mit Semikolon grep="login; logout"
grepTags Filtert nach Tags mit ODER, UND und NICHT grepTags="@smoke+-@slow"
grepFilterSpecs Lädt nur Specs mit passenden Tests grepFilterSpecs=true
grepOmitFiltered Blendet gefilterte Tests ganz aus grepOmitFiltered=true
grepUntagged Zeigt nur Tests ohne Tag grepUntagged=true
burn Wiederholt Tests, um Flakes zu finden burn=10

Smoke Tests zuerst in GitLab CI und GitHub Actions

Unsere Pipelines laufen in zwei Stufen. Zuerst die Smoke Suite mit @smoke, die in wenigen Minuten zeigt, ob Login, Navigation und die wichtigsten Abläufe funktionieren. Erst wenn sie grün ist, startet die volle Suite parallel über Cypress Cloud. Ein kaputter Build fällt so früh auf und blockiert keine teuren CI Minuten.

Code:
          

# .gitlab-ci.yml
cypress:smoke:
  stage: e2e-smoke
  image: cypress/included:latest
  script:
    - npm ci
    - npx cypress run --expose grepTags="@smoke",grepFilterSpecs=true,grepOmitFiltered=true

cypress:full:
  stage: e2e-full
  needs: ['cypress:smoke']
  parallel: 4
  image: cypress/included:latest
  script:
    - npm ci
    - npx cypress run --record --parallel

Praktisch sind außerdem feste Scripts in der package.json. Dann muss sich niemand die Syntax merken, weder Menschen noch Agenten:

Code:
          

{
  "scripts": {
    "cy:smoke": "cypress run --expose grepTags=@smoke",
    "cy:critical": "cypress run --expose grepTags=@critical",
    "cy:burn": "cypress run --expose grepTags=@smoke,burn=5"
  }
}

Im interaktiven Modus mit cypress open filterst du übrigens direkt in der DevTools Konsole, zum Beispiel mit Cypress.grep(null, '@smoke'). Ein Aufruf ohne Argumente entfernt den Filter wieder.

Tests nach Umgebung gruppieren, auf Production nur schauen

Nicht jeder Test darf überall laufen. Auf Production soll ein Test nur schauen: Seite laden, Links prüfen, Inhalte lesen. Auf Stage darf er richtig loslegen, Formulare abschicken, Bestellungen anlegen und Daten ändern. Mit Grep trennst du diese Gruppen sauber über Tags.

  • @readonly für Tests, die nichts verändern. Sie laufen auf jeder Umgebung, auch gegen die Live URL.
  • @write für Tests, die Daten anlegen, ändern oder löschen. Sie laufen nur lokal, in Review Apps und auf Stage.
Code:
          

describe('Startseite', { tags: '@readonly' }, () => {
  it('lädt ohne Fehler und zeigt das Impressum', () => {
    cy.visit('/')
    cy.get('[data-cy=imprint-link]').should('be.visible')
  })
})

describe('Kontaktformular', { tags: '@write' }, () => {
  before(() => requireWritableEnv())

  it('schickt eine Anfrage ab', () => {
    cy.visit('/kontakt')
    cy.get('[data-cy=contact-mail]').type('test@example.test')
    cy.get('[data-cy=contact-submit]').click()
    cy.get('[data-cy=contact-success]').should('be.visible')
  })
})

In der Pipeline steuert die Ziel URL, welche Gruppe läuft. Gegen Production laufen nur die lesenden Tests, gegen Stage alles.

Code:
          

# Production: nur schauen
CYPRESS_BASE_URL=https://www.example.de npx cypress run --expose grepTags="@readonly",grepFilterSpecs=true,grepOmitFiltered=true

# Stage: alles, auch schreibende Tests
CYPRESS_BASE_URL=https://stage.example.de npx cypress run

Auf einen Tag allein verlassen wir uns nicht. Jeder schreibende Block bekommt eine kleine Schutzfunktion. Zeigt die baseUrl auf eine Live Umgebung, bricht der Block ab, bevor ein Test etwas abschickt. So landet auch bei einem falsch konfigurierten Job oder einem KI Agenten keine Testbestellung im echten Shop.

Code:
          

// cypress/support/guards.ts
const writableHosts = ['localhost', 'stage.example.de', 'review.example.de']

export function requireWritableEnv() {
  const host = new URL(Cypress.config('baseUrl') ?? '').hostname
  if (!writableHosts.some((allowed) => host.endsWith(allowed))) {
    throw new Error(`Schreibender Test gegen ${host} abgebrochen`)
  }
}

Die Liste ist bewusst eine Erlaubnisliste. Neue Umgebungen sind damit erst einmal gesperrt, bis jemand sie freigibt. Die passende Regel für die AGENTS.md steht im nächsten Abschnitt.

Eine Tag Strategie, die das Team versteht

Ohne Regeln entstehen in wenigen Monaten @smoke, @Smoke, @smoketest und @quick für dasselbe, und der Filter findet nur noch einen Teil der Tests. Wir arbeiten deshalb mit einer kurzen, festen Liste:

  • @smoke für die wenigen Abläufe, ohne die nichts geht.
  • @critical für Geld, Daten und Recht, etwa Checkout oder Einwilligungen.
  • @readonly und @write für die Frage, ob ein Test nur schaut oder Daten verändert.
  • @slow für Tests, die nicht in jede Stufe gehören.
  • Bereichs Tags wie @checkout oder @admin am describe Block.

Die Liste steht in der README des Testordners und in der AGENTS.md. Ein KI Agent, der einen neuen Test schreibt, vergibt dann passende Tags, statt neue zu erfinden:

Code:
          

## Cypress Tags

- Erlaubte Tags: @smoke, @critical, @readonly, @write, @slow und Bereichs Tags am describe.
- Jeder Test ist entweder @readonly oder @write.
- Jeder @write Block ruft in before() requireWritableEnv() auf.
- Keine neuen Tags ohne Rücksprache.
- Mehrere Tags immer als Array: { tags: ['@smoke', '@critical'] }
- Neue Tests mit npm run cy:burn prüfen, bevor sie in den Merge Request gehen.

Für Cypress mit KI Agenten ist burn besonders wertvoll. Einen generierten Test, der beim vierten Lauf kippt, schicken wir zurück an den Agenten, bevor er im Merge Request landet.

Filter and organize your Cypress tests with grep and tag-based filtering

Cypress Team, Maintainer von @cypress/grep – README auf npm

Aus der NCA Praxis, die wichtigsten Tests zuerst

Wenn wir eine Suite in Stufen teilen, beginnen wir mit einer Frage an das Team: Welche Abläufe würden morgen das meiste Geld oder den meisten Ärger kosten, wenn sie kaputt wären? Die bekommen @smoke. Alles andere wartet auf die volle Suite und läuft trotzdem bei jedem Merge Request.

Die Basistests aus dem NCA TESTIFY Plugin tragen bei uns zwei Tags. @smoke, weil kaputte Links oder ein fehlendes Impressum sofort auffallen müssen. Und @readonly, weil sie nichts verändern. Deshalb laufen sie zusätzlich als Monitoring gegen Production. Fachliche Tests aus dem Team kommen mit @critical dazu, wenn es um Geld oder Daten geht.

Vor Grep steht bei uns das ESLint Plugin für Cypress, und neue Tests mit passenden Tags schreiben Agenten mit dem Cypress AI Toolkit. Weiterlesen im NCA Cypress Glossar: Cypress UI Coverage, Cypress Custom Commands und unser Artikel zu Quality Gates für KI Code.

CYPRESS.IO Ambassador und IT Consultant für QA Engenieering und Qualität in PHP Projekten.
Frontend: Optimieren Sie Ihre Webseite mit Astro JS und nutzen Sie die Vorteile der Barrierefreiheit

Optimieren Sie Ihre Webseite mit Astro JS und nutzen Sie die Vorteile einer schnellen, sicheren und barrierefreien Webseite. Erfüllen Sie die gesetzlichen Anforderungen und verbessern Sie die Benutzererfahrung Ihrer Webseite. Mit Astro JS können Sie die Ladezeit reduzieren, die Sicherheit maximieren und die SEO-Optimierung verbessern. Kontaktieren Sie uns, um mehr zu erfahren und um Ihre Webseite auf ein neues Level zu heben.

Häufige Fragen zu Cypress Grep

Die wichtigsten Antworten zu Setup, Tags, expose Syntax, CI und Burn Tests mit @cypress/grep.

Was ist Cypress Grep 2026?

Cypress Grep ist das offizielle Plugin @cypress/grep vom Cypress Team. Es filtert Tests nach Text im Titel oder nach Tags, die du an it und describe setzt. So läuft nur der Teil der Suite, den du brauchst, etwa alle @smoke Tests. Zusätzlich kann es Specs vorfiltern, gefilterte Tests ausblenden und Tests wiederholen.

Wie installiere ich @cypress/grep 2026?

Mit npm install --save-dev @cypress/grep. Danach importierst du register aus @cypress/grep in der Support Datei und rufst registerCypressGrep() auf. Optional bindest du plugin aus @cypress/grep/plugin in setupNodeEvents der cypress.config ein. Das brauchst du, wenn Specs ohne passende Tests gar nicht erst geladen werden sollen.

Warum funktioniert --env grepTags 2026 nicht mehr?

Weil Cypress Cypress.env() mit Version 15.10 als veraltet markiert und für öffentliche Werte durch Cypress.expose() ersetzt hat. Ab @cypress/grep 6 nutzt du deshalb --expose statt --env, also npx cypress run --expose grepTags="@smoke". Prüfe beim Update package.json Scripts, CI Konfiguration und feste Werte in der cypress.config.

Welche Cypress Version brauche ich 2026?

Aktuelle Versionen von @cypress/grep setzen Cypress 15.10 oder neuer voraus, weil sie auf Cypress.expose aufbauen. Ältere Projekte bleiben bei einer älteren Grep Version mit --env Syntax. Wir empfehlen, Cypress und Grep zusammen zu aktualisieren und danach die Smoke Suite einmal komplett laufen zu lassen.

Wie kombiniere ich Tags 2026 mit UND, ODER und NICHT?

Leerzeichen bedeutet ODER, etwa "@smoke @critical". Ein Plus bedeutet UND, etwa "@smoke+@critical". Ein Minus bedeutet NICHT, etwa "@smoke+-@slow". Titel und Tags kannst du kombinieren, dann müssen beide Filter passen. Negative Filter funktionieren allerdings nicht zusammen mit grepFilterSpecs.

Wie verhindere ich, dass Tests auf Production Daten ändern?

Mit zwei Tags und einer Schutzfunktion. Tests, die nur lesen, bekommen @readonly, Tests mit Formularen oder Bestellungen bekommen @write. Gegen Production läuft nur grepTags="@readonly". Zusätzlich prüft jeder @write Block in before() die baseUrl gegen eine Erlaubnisliste und bricht auf Live Umgebungen ab.

Wie setze ich mehrere Tags an einem Test?

Als Array, also { tags: ['@smoke', '@critical'] }. Ein String mit Leerzeichen wie '@smoke @critical' erzeugt einen einzigen Tag mit Leerzeichen und nicht zwei. Das ist ein häufiger Fehler, auch bei KI generierten Tests. Tags am describe Block gelten für alle Tests darin.

Was macht grepFilterSpecs?

Mit grepFilterSpecs=true lädt Cypress nur Spec Dateien, die passende Tests enthalten. Ohne diese Option lädt es jede Spec und markiert gefilterte Tests nur als pending. Bei großen Suiten spart das viel Zeit. Die Option braucht das Plugin in setupNodeEvents und funktioniert nicht mit negativen Filtern.

Was ist ein Burn Test?

Mit der Option burn läuft ein gefilterter Test mehrmals hintereinander, etwa burn=10. Kippt er dabei auch nur einmal, ist er flaky, selbst wenn er beim ersten Lauf grün war. Wir prüfen so jeden neuen Test, egal ob ihn ein Mensch oder ein Agent geschrieben hat.

Wie finde ich Tests ohne Tag?

Mit grepUntagged=true laufen nur Tests, die keinen Tag haben. Das ist ein einfacher Check, ob neue Tests sauber eingeordnet wurden. Wir lassen ihn regelmäßig laufen und ergänzen fehlende Tags, damit Smoke und Critical Suiten vollständig bleiben.

Kann ich in cypress open filtern?

Ja. Im interaktiven Modus rufst du in der DevTools Konsole Cypress.grep auf, zum Beispiel Cypress.grep('login') für den Titel oder Cypress.grep(null, '@smoke') für Tags. Ein Aufruf ohne Argumente entfernt den Filter wieder. Das ist praktisch beim Debuggen einzelner Gruppen.

Passt Grep zu Cypress Cloud Parallelisierung?

Ja. Typisch ist eine Smoke Stufe mit grepTags="@smoke" und danach die volle Suite parallel über Cypress Cloud. Beachte, dass gefilterte Tests in Cloud Aufzeichnungen als pending erscheinen können. Mit grepOmitFiltered=true und grepFilterSpecs=true bleibt die Aufzeichnung übersichtlicher.

Welche Tags sind sinnvoll?

Eine kurze, feste Liste. Bei uns sind das @smoke für Pflichtabläufe, @critical für Geld, Daten und Recht, @readonly und @write für die Frage, ob ein Test Daten ändert, @slow für lange Tests und Bereichs Tags am describe. Die Liste steht in der AGENTS.md, damit Menschen und Agenten dieselben Tags nutzen.