145 UI-Elemente zum Üben von Test-Automation. Jedes Element läuft als Live-Demo und liefert Locator-Code zum Kopieren, für Playwright und Cypress.
Du übst am einzelnen Element oder spielst geführte Workflows durch. Im Lernmodus sammelst du Sterne. Danach jagst du die fest eingebauten Fehler. Ohne Setup, ohne Login.
145 Elemente 18 Kategorien 656 Testvariationen 188 fest eingebaute Fehler 31 Workflows
So übst du hier
Wähle ein Element aus 18 Kategorien. Es läuft als Live-Demo. Der Locator-Code liegt zum Kopieren bereit.
Jedes Element bringt fertige Testvariationen mit. Spiele sie durch. Für erledigte Tests gibt es Sterne. Volle Sterne schalten den Bug-Modus frei.
Im Bug-Modus verhalten sich Elemente absichtlich falsch. Die Fehler sind fest im Garden eingebaut. Fehler entdeckt? Alt-Klick auf das Element. Ein kurzes Quiz prüft deinen Fund. Jeder Fund wird in deinem Profil gezählt.
Zwei Wege durch den Garden
Du willst einen einzelnen Button testen? Oder einen ganzen Login-Ablauf? Beides geht hier.
Jedes einzelne UI-Element als Live-Demo: Eingabefelder, Buttons, Tabellen, Drag-and-Drop, Shadow DOM. Mit Locator-Code zum Kopieren. Zum gezielten Üben einer Locator-Strategie oder zum Vorführen deines Werkzeugs.
Realistische Abläufe wie Login-Formulare, Warenkorb-Strecken, Checkout-Assistenten und mehrstufige Formulare. Wie im echten Projekt, und hier darfst du alles kaputt testen. Für praxisnahes Training und Workshops.
Von der ersten Locator-Übung bis zum Shadow-DOM-Kanban-Board.
Der Katalog
Jede Kategorie enthält interaktive Elemente mit Live-Demo, Locator-Strategien und fertigem Testcode.
Zeig mir Code
Jedes Element bringt beides mit: fertige Testfälle zum Nachspielen und fertigen Testcode zum Kopieren. Zusammen sind es 656 Testvariationen.
Element wählen, jedes hat ein data-testid
Reiter wählen: Testfall, Playwright oder Cypress
Testfall nachspielen oder Code in dein Testprojekt einfügen
import { test, expect } from '@playwright/test'; test('Produkt in Warenkorb legen', async ({ page }) => { await page.goto('/shop/'); await page.click('[data-testid="product-card"]'); await page.click('[data-testid="btn-add-to-cart"]'); const badge = page.locator('[data-testid="cart-count"]'); await expect(badge).toHaveText('1'); });
describe('Shop', () => { it('Produkt in Warenkorb legen', () => { cy.visit('/shop/'); cy.get('[data-testid="product-card"]').first().click(); cy.get('[data-testid="btn-add-to-cart"]').click(); cy.get('[data-testid="cart-count"]').should('have.text', '1'); }); });
