Programmierung und Entwicklertools

Kostenloser CSS-Selektorgenerator.

Selektor mit Erklärung zu Spezifität und Stabilität.

Entwickle einen Selektor aus der tatsächlichen Seitenstruktur und prüfe seinen Bereich vor dem Einsatz in einer Browseraufgabe.

Chrome-Erweiterung und Konto erforderlich.
25 kostenlose Automatisierungsaufgaben pro Monat, über alle Tools geteilt. Es gelten die Limits des Browser-Anbieters.

WAS DU BEREITHALTEN SOLLTEST

Bereitgestelltes DOM-Fragment und Zielelement.

DEIN AUSGANGSPUNKT

Eine Aufgabe, die du anpassen kannst.

Kopiere ihn hier. Füge ihn in WebAct ein, wenn du bereit bist.

Diese Seite bereitet deinen Prompt vor. Die Aufgabe läuft in WebAct.

01

Passe die Aufgabe an dich an.

Prüfe den Prompt oben. Ergänze dein Ziel und wichtige Anforderungen.

02

Nimm sie mit zu WebAct.

Öffne WebAct, füge die Aufgabe ein und stelle dein Quellmaterial bereit. Beginne für einen Entwurf oder eine Erklärung in Chat; nutze Task für eine genehmigte Browseraktion oder eine Datei.

03

Prüfe den nützlichen Teil.

Prüfe Formeln, Code und Berechnungen mit bekannten Eingaben in der passenden Laufzeitumgebung. Prüfe Aktionen vor der Ausführung und halte die Originaldaten bereit.

PRAXISLEITFADEN

Stabile CSS-Selektoren mit klarem Bereich erstellen.

Ein Selektor sollte das Ziel präzise genug bestimmen und kleine Layoutänderungen überstehen. Vermeide Positionsselektoren, wenn sinnvolle Attribute existieren.

Passe den Ablauf an deine Aufgabe an.

Wähle ein sinnvolles stabiles Attribut oder eine semantische Beziehung und teste den Selektor im vorgesehenen Bereich. Prüfe Trefferzahlen und ergänze Zustand oder Container nur, wenn es zur Zielbestimmung nötig ist.

Was du bereitstellst
Bereitgestelltes DOM-Fragment und Zielelement.
Was du erhältst
Selektor mit Erklärung zu Spezifität und Stabilität.

Sieh dir Eingabe und Ergebnis an.

Beispielhafte Ein- und Ausgabe · ein Lehrbeispiel, kein tatsächlicher WebAct-Durchlauf

Beispiel Eingabe

DOM contains a button with data-action="export".

Vollständiges Beispiel

button[data-action="export"] targets the declared action; check that the attribute is unique within the intended scope.
Dieses Beispiel herunterladen

Lade diese Eingabe in den Prompt und kopiere ihn zum Ausprobieren nach WebAct. Dein Ergebnis kann vom Beispiel abweichen.

Entscheidungen und Fehlerbehebung.

Sollte ein Selektor auf der aktuellen Listenposition des Elements beruhen?

Bevorzuge stabile Bedeutung, sofern vorhanden. Positionsselektoren können nach kleinen Layout- oder Datenänderungen auf andere Elemente zeigen.

Warum trifft der Selektor mehrere Exportbuttons?

Begrenze den Bereich auf den relevanten Container oder ergänze ein unterstütztes unterscheidendes Attribut. Prüfe die Trefferzahl vor einer Aktion.

Probiere es mit deiner eigenen Quelle.

Ersetze das Beispiel im Aufgaben-Prompt durch dein Material. Behalte nötige Anforderungen bei und kopiere die Aufgabe nach WebAct.

Aufgabe anpassen und kopieren ↑
BEVOR DU BEGINNST

WebAct nutzen.

Prompt und Beispiel findest du hier. Führe deine Aufgabe in der WebAct-Erweiterung für Chrome aus.

Ist dieses Tool kostenlos?

Du kannst den Prompt hier kostenlos kopieren und bearbeiten. Installiere zur Nutzung mit WebAct die Chrome-Erweiterung, erstelle und bestätige dein Konto und verbinde eine verfügbare ChatGPT-Sitzung im Browser. Der Free-Tarif umfasst 25 vom Nutzer gestartete Automatisierungsaufgaben pro Kalendermonat, geteilt über alle Tools. Gewöhnlicher Browser-Chat ist davon getrennt; Anbieterlimits gelten.

Mehr zum gemeinsamen Kontext findest du in unserem Datenschutzerklärung und zur Wahl zwischen Chat oder Task.

VOM PROMPT ZU DEINER EIGENEN ARBEIT

Bringe die Aufgabe auf deine Seite.

Installiere WebAct, füge dein Quellmaterial hinzu und passe das Ergebnis an.

WebAct installieren