So verwenden Sie die Stabilitätskarte
StableHTMLFinder vergleicht mehrere Seitenaufrufe und zeigt Elemente und Merkmale, die in allen Beobachtungen stabil bleiben. So können erfahrene Nutzer Selektoren ohne zufällig wechselnde Klassen, IDs oder Strukturen erstellen.
StableHTMLFinder-Seite StableHTMLFinder aus dem Chrome Web Store installieren
Typischer Ablauf
- Öffnen Sie die Seite mit dem gesuchten Element.
- Wählen Sie die Anzahl der Ladevorgänge. Zwei reichen meist für eine schnelle Prüfung; mehr erhöhen die Genauigkeit.
- Starten Sie die Analyse. Nach jedem Laden wartet die Erweiterung die eingestellte Zeit, damit die Seite ihren normalen Inhalt aufbauen kann.
- Suchen Sie das Element, indem Sie Zweige öffnen oder die Suche verwenden.
- Öffnen Sie das Menü ⋮ am gewünschten Knoten, lesen Sie die Beschreibung und kopieren Sie den CSS-Selektor oder die BlockIt-Regel.
- Fügen Sie das Ergebnis in das entsprechende BlockIt-Feld ein und testen Sie es auf der Seite.
Mehr Ladevorgänge verringern das Risiko, einen Zufall für ein stabiles Merkmal zu halten. Zwei Buchstaben einer dynamischen ID können zweimal zufällig übereinstimmen, aber selten über weitere Ladevorgänge.
So lesen Sie die Stabilitätskarte
Jede Zeile steht für ein HTML-Element. Die Einrückung folgt der bestätigten Seitenstruktur. Die Karte zeigt nur Merkmale, die bei allen Ladevorgängen stabil waren. Fehlende Klassen, Attribute oder Baumteile können auf der Seite vorhanden sein, sich aber geändert haben.
<div>,<a>,<section>— stabiler Tagname.id="menu"— Attributname und vollständiger Wert stimmten bei jedem Laden überein.data-*,*-label,*test*— nur ein Teil des Attributnamens ist stabil: Er beginnt mitdata-, endet mit-labeloder enthälttest.id^="prefix"— der Attributwert beginnt mit dem angegebenen Text;id$="suffix"— endet damit;id*="part"— enthält ihn. Ein=ohne^,$oder*bedeutet eine exakte Übereinstimmung.- Ein Attributname ohne Wert bedeutet, dass das Attribut vorhanden bleibt, sein Wert sich jedoch änderte oder nicht bestätigt wurde.
class(3 Klassen) bedeutet eine stabile Klassenanzahl, obwohl Namen oder der vollständigeclass.- Text rechts neben den Attributen — stabiler eigener Text des Elements. „Erweitern“ zeigt ihn vollständig.
iframe,iframe documentund#shadow-rootkennzeichnen Grenzen besonderer verschachtelter Seitenbereiche. Ihr Inhalt wird in einem eigenen Ast fortgesetzt.<...>kennzeichnet einen veränderlichen oder unsicher zugeordneten Abschnitt. Darunter kann wieder ein bestätigtes stabiles Fragment liegen.
Grüne Zeilen sind bestätigte Elemente. Helleres Grün markiert wahrscheinliche Treffer oder stabile Fragmente nach veränderlichen Bereichen. Orange umrandet Suchtreffer; die hellere Umrandung zeigt den aktuellen Treffer.
Nach Auswahl von ⋮ kann die Beschreibung weitere bestätigte Merkmale zeigen: genaue Attribut-/Klassenanzahl, eigenen Text, Geschwisterposition, Ergebnisnummer sowie Beziehungen zu Eltern, Vorfahren, Kindern, Nachfahren oder Geschwistern. Sie können das Ergebnis auch ohne eigene Zeilenbeschriftung verfeinern.
Karte durchsuchen
Das Suchfeld findet angezeigten Knotentext, Tags, Attribute, Werte und Elementtext. Sie können auch HTML aus den DevTools einfügen. Ein CSS-Selektor wird im letzten Snapshot ausgewertet und hebt verknüpfte Kartenelemente hervor.
Mit den Pfeilen wechseln Sie zwischen Treffern. Der übrige Baum bleibt sichtbar, sodass Vorfahren und Nachfahren geprüft werden können.
CSS-Selektor oder BlockIt-Regel?
Bevorzugen Sie CSS-Selektoren mit klaren, dauerhaften Merkmalen wie stabiler ID, Attributname, konstantem Wert oder eindeutiger Struktur. CSS ist einfacher und meist schneller.
Verwenden Sie eine BlockIt-Regel, wenn CSS nicht ausreicht, etwa für Klassen-/Attributanzahl, dynamische Attributnamen, eigenen Text oder Ergebnispositionen. Regeln sind leistungsfähiger, können aber langsamer sein.
Die Karte erzeugt Vorschläge automatisch, doch diese Funktion wird noch weiterentwickelt. Prüfen Sie sie und lesen Sie die Beschreibung. Eine fette Warnung bedeutet, dass die Eindeutigkeit nicht bestätigt wurde.
Warum das Quellrepository nicht öffentlich ist
Die Erweiterung hilft bei wechselndem Website-Markup. Ein öffentliches Repository mit Algorithmusdetails würde gezielte Gegenmaßnahmen erleichtern; daher ist das Quellrepository nicht öffentlich. Die Prüfung durch den Chrome Web Store bleibt bestehen und vollständige Geheimhaltung wird nicht versprochen.
Verbindung mit BlockIt
StableHTMLFinder findet dauerhafte Merkmale; BlockIt wendet die Regel an und blendet Treffer aus oder entfernt sie. Zusammen helfen sie, wenn ein DevTools-Selektor nach dem Neuladen nicht mehr funktioniert.
BlockIt ist eine separate Erweiterung und wird für die Karte nicht benötigt.