Viele Websites zeigen Pop-ups wie Cookie-Banner an. Diese enthalten oft Schaltflächen wie „Alle akzeptieren“ oder „Cookies erlauben“.
Silktide kann so eingestellt werden, dass diese Schaltflächen während des Tests automatisch ausgewählt werden. Das macht die Berichte übersichtlicher:
Das Banner verdeckt oder stört die Seite nicht mehr.
Manche Banner blockieren die Interaktion mit der Seite, bis sie entfernt werden.
Wenn das Banner ein Problem enthält, wird dieses nicht mehr auf jeder einzelnen Seite gezählt und verfälscht das Ergebnis.
Dafür verwenden Sie einen CSS-Selektor. Ein CSS-Selektor ist ein Stück Code, das ein bestimmtes Element auf einer Seite eindeutig beschreibt. In Silktide zeigt die Einstellung Klick-Selektor, welches Element automatisch ausgewählt werden soll.
TL;DR-Checkliste
Zuerst prüfen, ob sich die Schaltfläche des Banners in einem Shadow DOM befindet.
Wenn Sie kein „shadow-root (open)“ oder keine weiße Hilfslinie in den Chrome DevTools sehen → folgen Sie der Normalen Methode.
Wenn Sie „shadow-root (open)“ oder die weiße Hilfslinie sehen → folgen Sie der Shadow-DOM-Methode.
Normales Element
Öffnen Sie die Seite im Inkognito-Modus, damit das Banner sicher erscheint.
Rechtsklicken Sie auf die gewünschte Schaltfläche (z. B. „Alle akzeptieren“) → Untersuchen.
Rechtsklick auf die markierte Zeile → Kopieren → Selektor kopieren.
In Silktide einfügen unter Website-Einstellungen → Erweitert → Klick-Selektor.
Auf Speichern klicken.
Seite erneut testen. Wenn das Banner entfernt ist, wird es beim nächsten vollständigen Test auf der gesamten Website entfernt.
Shadow-DOM-Element
Öffnen Sie die Seite im Inkognito-Modus.
Rechtsklicken Sie auf die Schaltfläche → Untersuchen.
Folgen Sie der weißen Hilfslinie in den DevTools nach oben, bis Sie shadow-root (open) sehen.
Rechtsklicken Sie auf das Shadow-Host-Element direkt darüber → Kopieren → Selektor kopieren. Speichern Sie diesen Selektor.
Rechtsklicken Sie erneut auf die Schaltfläche → Kopieren → Selektor kopieren.
Kombinieren Sie beide mit
>>>, z. B.:#shadow-banner >>> #accept
In Silktide einfügen unter Website-Einstellungen → Erweitert → Klick-Selektor.
Auf Speichern klicken.
Seite erneut testen. Wenn das Banner entfernt ist, wird es beim nächsten vollständigen Test auf der gesamten Website entfernt.
Vollständige Anleitung
Schritt 1: Seite öffnen
Öffnen Sie die Website im Inkognito-Modus.
So stellen Sie sicher, dass das Cookie-Banner erscheint, auch wenn Sie es zuvor schon einmal geschlossen haben.
Schritt 2: Schaltfläche untersuchen
Bewegen Sie die Maus über die gewünschte Schaltfläche (z. B. „Alle akzeptieren“).
Rechtsklick → Untersuchen.
Die Chrome DevTools öffnen sich, und die passende Codezeile ist markiert.
(Beispiel: Im Screenshot unten ist die Zeile markiert, die eine „Alle akzeptieren“-Schaltfläche mit dem Selektor #accept-regular zeigt. Ihre Seite wird anders aussehen, das Prinzip ist jedoch dasselbe.)
Schritt 3: Selektor kopieren
Rechtsklick auf die markierte Zeile.
Mit der Maus auf Kopieren gehen, dann Selektor kopieren auswählen.
Jetzt haben Sie den CSS-Selektor der Schaltfläche.
Schritt 4: Selektor in Silktide einfügen
Gehen Sie zu Website-Einstellungen → Erweitert → Klick-Selektor.
Fügen Sie den Selektor ein.
Auf Speichern klicken.
Schritt 5: Seite erneut testen
Führen Sie einen Test dieser Seite durch.
Wenn das Banner verschwunden ist, sind Sie fertig.
Beim nächsten vollständigen Test wird das Banner auf der gesamten Website entfernt.
Shadow DOM-Anleitung
Manche Schaltflächen befinden sich in einem Shadow DOM. Das erkennen Sie daran:
In den DevTools sehen Sie shadow-root (open), oder
Sie sehen eine weiße vertikale Linie am Rand des Panels, die bis zu einem Shadow-Root führt.
In diesem Fall müssen Sie zwei Selektoren kopieren und mit >>> kombinieren.
Schritt 1: Shadow-Host finden
Folgen Sie der weißen Linie nach oben, bis Sie shadow-root (open) finden.
Markieren Sie das Element direkt darüber → Rechtsklick → Kopieren → Selektor kopieren. Dies ist der Shadow-Host-Selektor.
(Beispiel: Im Screenshot unten ist der Shadow-Host markiert, mit dem Selektor #shadow-banner.)
Schritt 2: Schaltfläche im Shadow DOM finden
Gehen Sie zurück zur Schaltfläche (z. B. „Alle akzeptieren“) innerhalb des Shadow DOM.
Rechtsklick auf die markierte Zeile → Kopieren → Selektor kopieren.
(Beispiel: Im Screenshot unten ist die Schaltfläche „Alle akzeptieren“ markiert, mit dem Selektor #accept.)
Schritt 3: Selektoren kombinieren
Kombinieren Sie die beiden Selektoren mit
>>>.
Beispiel:
#shadow-banner >>> #accept
Fügen Sie dies in Silktide unter Website-Einstellungen → Erweitert → Klick-Selektor ein und klicken Sie auf Speichern.
Beispiele für Selektoren
Selektoren können sehr unterschiedlich aussehen. Alle folgenden sind gültig:
Einfach und übersichtlich:
#onetrust-accept-btn-handlerbutton[data-testid="uc-accept-all-button"].cookie-banner .accept
Komplex, aber gültig (oft mit
nth-child):#root > div > div:nth-child(3) > div.cookie-wrapper > div:nth-child(2) > button:nth-child(1)
Kombinierter Shadow-DOM-Selektor:
#shadow-banner >>> #accept
Tipp: Kürzere Selektoren (IDs, data-Attribute oder einfache Klassen) sind meist stabiler als lange Selektoren mit vielen nth-child.
Mehrere Selektoren
Wenn Sie mehrere Elemente auswählen möchten (z. B. zwei verschiedene Banner), können Sie die Selektoren mit Kommas trennen.
Beispiel:
.cookie-banner .accept, .newsletter-popup .close
Silktide versucht dann, alle nacheinander auszuwählen.
User-Flow-Seiten in Silktide
Standardmäßig enthält jeder Silktide-Test einen User Flow. Dabei wird die Startseite ohne Klicks geöffnet, damit Banner und Pop-ups mindestens einmal getestet werden.
Sie erkennen dies am flow-Label:
In der Seitenliste erscheint es neben dem Seitentitel.
In der Inspektor-Ansicht erscheint es oben rechts.
Brauchen Sie noch Hilfe?
Wenn Sie weiterhin Probleme haben, ein Pop-up zu entfernen, kontaktieren Sie uns hier:
https://silktide.com/contact/
Wir haben ChatGPT verwendet, um die englische Version dieses Artikels zu übersetzen. Wenn Sie etwas sehen, das geändert werden sollte, kontaktieren Sie bitte unser Support-Team.