Zum Hauptinhalt springen

Wie man Pop-ups, Cookie-Banner und mehr entfernt

Erfahren Sie, wie Sie in Silktide CSS-Selektoren nutzen, um Pop-ups und Cookie-Banner automatisch zu entfernen.

Daniel Towers avatar
Verfasst von Daniel Towers
Vor über 2 Wochen aktualisiert

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

  1. Öffnen Sie die Seite im Inkognito-Modus, damit das Banner sicher erscheint.

  2. Rechtsklicken Sie auf die gewünschte Schaltfläche (z. B. „Alle akzeptieren“) → Untersuchen.

  3. Rechtsklick auf die markierte Zeile → KopierenSelektor kopieren.

  4. In Silktide einfügen unter Website-Einstellungen → Erweitert → Klick-Selektor.

  5. Auf Speichern klicken.

  6. Seite erneut testen. Wenn das Banner entfernt ist, wird es beim nächsten vollständigen Test auf der gesamten Website entfernt.

Shadow-DOM-Element

  1. Öffnen Sie die Seite im Inkognito-Modus.

  2. Rechtsklicken Sie auf die Schaltfläche → Untersuchen.

  3. Folgen Sie der weißen Hilfslinie in den DevTools nach oben, bis Sie shadow-root (open) sehen.

  4. Rechtsklicken Sie auf das Shadow-Host-Element direkt darüber → KopierenSelektor kopieren. Speichern Sie diesen Selektor.

  5. Rechtsklicken Sie erneut auf die Schaltfläche → KopierenSelektor kopieren.

  6. Kombinieren Sie beide mit >>>, z. B.:

    #shadow-banner >>> #accept
  7. In Silktide einfügen unter Website-Einstellungen → Erweitert → Klick-Selektor.

  8. Auf Speichern klicken.

  9. 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-handler

    • button[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.

Hat dies deine Frage beantwortet?