Playbooks
English

CSS-Selector-Generator

Erzeuge einen eindeutigen CSS-Selektor für jedes Element aus dem eingefügten HTML, mit Live-Vorschau und einem Klick zum Kopieren. DSGVO-konform.

Wie hilfreich ist dieses Tool?

Ergebnis erscheint hier …

Video: So nutzt du dieses Tool

Das Video wird von YouTube gehostet. Beim Abspielen können Daten an Google übertragen werden.

CSS-Selector-Generator: eindeutige CSS-Selektoren aus HTML erzeugen

Für Browser-Automation, End-to-End-Tests und Web Scraping brauchst du zuverlässige Selektoren, die dein HTML an der genau richtigen Stelle ansprechen. Mit diesem CSS-Selector-Generator fügst du das HTML deiner Seite oder eines Snippets ein und erhältst für jedes einzelne Element einen eindeutigen CSS-Selektor, fertig zum Kopieren in Playwright, Selenium, Puppeteer oder Cypress. Eine Live-Vorschau rendert dein HTML direkt im Browser, ein Slider wechselt zwischen allen Elementen, und das ausgewählte Element wird im Vorschaubereich automatisch markiert und angefahren.

So funktioniert der CSS-Selector-Generator

  1. HTML einfügen: Paste deinen Code ins Textfeld, ganz egal ob als vollständige Seite oder nur als Fragment wie <div>...</div>. Das Tool erkennt das automatisch.
  2. Element wählen: Über den Slider gehst du Element für Element durch. Die Vorschau zeigt das HTML gleichzeitig und hebt jedes gewählte Element direkt hervor.
  3. Selektor kopieren: Der Generator baut den Pfad aus Eltern- und Kind-Elementen auf und zeigt dir das Ergebnis. Mit einem Klick auf Kopieren landet der Selektor in der Zwischenablage.

Eindeutig und stabil: vom id-Kürzel zum vollständigen Pfad

Enthält das Element eine id, erhältst du den kurzen, stabilen Selektor #meine-id: schnell, lesbar und unabhängig von der Position im Dokument. Ohne id konstruiert der Generator den vollständigen Pfad über Tag, Klassen und Position, zum Beispiel ul.menu li:nth-child(2) > a. So spricht der Selektor genau ein Element an und bricht nicht, wenn sich oberhalb gelegener Inhalt verschiebt. Das beim Parsen automatisch erzeugte html, head und body wird dabei ignoriert, damit der Selektor sauber mit dem obersten Element deines Inhalts beginnt.

CSS-Selektor statt XPath: warum das besser ist

XPath ist mächtig, aber fehleranfällig und umständlich zu schreiben. Moderne Frameworks wie Playwright, Selenium und Cypress bevorzugen CSS-Selektoren, weil sie kürzer, schneller und deutlich besser lesbar sind. Dieser Generator übernimmt die Handarbeit: Du musst keine Positionsangaben zählen oder verschachtelte Pfade abtippen, sondern bekommst den eindeutigen Selektor in Sekunden, verifiziert anhand einer echten Vorschau deines HTML.

Funktionen im Überblick

  • Live-Vorschau: dein HTML wird direkt im Browser gerendert und nicht an unseren Server gesendet.
  • Slider-Auswahl: jedes Element per Index wählen, die Vorschau scrollt zum Element und hebt es farblich hervor.
  • Stabile Pfade: id-Kürzel #id oder voller Pfad mit Klassen und :nth-child.
  • Schnelles Kopieren: voller Selektor und Kurzform mit einem Klick in die Zwischenablage.
  • Sicher & privat: die Vorschau ist standardmäßig bereinigt und lädt keine externen Ressourcen, sodass eingefügte Tracker keine Netzwerk-Anfrage auslösen.
  • Optional live: per Umschalter kannst du echte Bilder und iframes laden, wenn du sie für deine Arbeit brauchst.

Typische Anwendungsfälle

  • End-to-End- und UI-Tests mit Playwright, Cypress oder Selenium
  • Web Scraping und Datenextraktion mit Puppeteer oder Scrapy
  • Browser-Automation und Skripte, die einzelne Elemente anklicken oder ändern
  • CSS-Debugging und gezieltes Styling einzelner Komponenten

Häufige Fragen

Läuft der CSS-Selector-Generator lokal?

Ja. Das eingefügte HTML wird ausschließlich in deinem Browser mit dem DOMParser verarbeitet und weder an unseren Server übertragen noch gespeichert. Die Vorschau ist standardmäßig bereinigt und löst keine externen Netzwerk-Anfragen aus.

Was ist der Unterschied zwischen #id und dem vollständigen Pfad?

Hat das Element eine id, liefert der Generator den kurzen Selektor #id. Ohne id baut er den vollständigen Pfad über Tag, Klassen und :nth-child-Position auf. Der Kurz-Selektor ist robuster gegen Layoutänderungen, der vollständige Pfad funktioniert auch ohne id.

Was bedeutet :nth-child im Selektor?

:nth-child(n) wählt das n-te Geschwisterelement desselben Elternteils. Kommen mehrere Elemente desselben Typs vor, nummeriert der Generator sie, zum Beispiel li:nth-child(2), damit der Selektor eindeutig bleibt.

Funktioniert das Tool auch mit HTML-Fragmenten?

Ja. Du kannst eine vollständige Seite oder nur einen Ausschnitt wie <div>...</div> einfügen. Das beim Parsen automatisch erzeugte html, head und body wird ignoriert, sodass der Selektor mit deinem eigentlichen Inhalt beginnt.

Warum ein CSS-Selektor statt XPath?

CSS-Selektoren sind kürzer, schneller und besser lesbar und werden von Playwright, Selenium und Cypress nativ unterstützt. Der Generator liefert sie eindeutig und ohne Handarbeit, anhand einer echten Vorschau deines HTML.

Wird mein HTML gespeichert?

Nein. Die gesamte Verarbeitung passiert lokal in deinem Browser. Weder das eingefügte HTML noch die erzeugten Selektoren werden an einen Server übertragen oder gespeichert.