Mange websites viser pop-ups som cookie-bannere. Disse indeholder ofte knapper som “Accepter alle” eller “Tillad cookies”.
Silktide kan indstilles til automatisk at vælge disse knapper under test. Det gør rapporterne mere overskuelige:
Banneret dækker eller forstyrrer ikke længere siden.
Nogle bannere blokerer for interaktion med siden, indtil de fjernes.
Hvis banneret har et problem, bliver dette ikke længere talt på hver eneste side og forvrænger resultatet.
Til dette bruger du en CSS-selektor. En CSS-selektor er et stykke kode, der entydigt beskriver et element på en side. I Silktide viser indstillingen Klik-selektor, hvilket element der skal vælges automatisk.
TL;DR-tjekliste
Start med at afgøre, om bannerets knap er i et shadow DOM eller ej.
Hvis du ikke ser “shadow-root (open)” eller en hvid hjælpelinje i Chrome DevTools → følg tjeklisten for Normalt element.
Hvis du ser “shadow-root (open)” eller den hvide hjælpelinje → følg tjeklisten for Shadow DOM.
Normalt element
Åbn siden i Inkognito-tilstand, så banneret med sikkerhed vises.
Højreklik på den ønskede knap (fx Accepter alle) → Inspicer.
Højreklik på den markerede linje → Kopiér → Kopiér selektor.
Indsæt i Silktide → Website-indstillinger → Avanceret → Klik-selektor.
Vælg Gem.
Retest siden. Hvis banneret er væk, bliver det fjernet på hele websitet ved næste fulde test.
Shadow DOM-element
Åbn siden i Inkognito-tilstand.
Højreklik på knappen → Inspicer.
Følg den hvide linje i DevTools opad, indtil du finder shadow-root (open).
Højreklik på shadow-host-elementet lige over → Kopiér → Kopiér selektor. Gem dette.
Højreklik på knappen igen → Kopiér → Kopiér selektor.
Kombinér dem med
>>>
, fx:#shadow-banner >>> #accept
Indsæt i Silktide → Website-indstillinger → Avanceret → Klik-selektor.
Vælg Gem.
Retest siden. Hvis banneret er væk, bliver det fjernet på hele websitet ved næste fulde test.
Fuld vejledning
Trin 1: Åbn siden
Åbn websitet i Inkognito-tilstand.
Det sikrer, at cookie-banneret vises, også selvom du allerede har lukket det i din normale browser.
Trin 2: Inspicer knappen
Hold musen over den ønskede knap (fx “Accepter alle”).
Højreklik → Inspicer.
Chrome DevTools åbner, og den tilhørende kodelinje er markeret.
(Eksempel: I skærmbilledet herunder er linjen markeret, der viser en “Accepter alle”-knap med selektoren #accept-regular
. Din side vil se anderledes ud, men princippet er det samme.)
Trin 3: Kopiér selektoren
Højreklik på den markerede linje.
Hold musen over Kopiér, og vælg Kopiér selektor.
Nu har du CSS-selektoren for knappen.
Trin 4: Indsæt selektoren i Silktide
Gå til Website-indstillinger → Avanceret → Klik-selektor.
Indsæt selektoren.
Vælg Gem.
Trin 5: Retest siden
Kør en test af denne side.
Hvis banneret er væk, er du færdig.
Ved næste fulde test fjernes banneret på hele websitet.
Shadow DOM-vejledning
Nogle knapper ligger i et shadow DOM. Det kan du se, når:
DevTools viser shadow-root (open), eller
Du ser en hvid lodret linje i venstre margen, der går op til et shadow-root.
I så fald skal du kopiere to selektorer og kombinere dem med >>>
.
Trin 1: Find shadow-host
Følg den hvide linje op, indtil du finder shadow-root (open).
Markér elementet lige over → højreklik → Kopiér → Kopiér selektor. Dette er shadow-host-selektoren.
(Eksempel: I skærmbilledet herunder er shadow-host markeret med selektoren #shadow-banner
.)
Trin 2: Find knappen i shadow DOM
Gå tilbage til knappen (fx “Accepter alle”) inde i shadow DOM.
Højreklik på den markerede linje → Kopiér → Kopiér selektor.
(Eksempel: I skærmbilledet herunder er “Accepter alle”-knappen markeret med selektoren #accept
.)
Trin 3: Kombinér selektorerne
Kombinér shadow-host og knap med
>>>
.
Eksempel:
#shadow-banner >>> #accept
Indsæt dette i Silktide under Website-indstillinger → Avanceret → Klik-selektor, og vælg Gem.
Eksempler på selektorer
Selektorer kan se meget forskellige ud. Alle nedenstående er gyldige:
Enkle og læsbare:
#onetrust-accept-btn-handler
button[data-testid="uc-accept-all-button"]
.cookie-banner .accept
Komplekse men gyldige (ofte med
nth-child
):#root > div > div:nth-child(3) > div.cookie-wrapper > div:nth-child(2) > button:nth-child(1)
Shadow DOM kombineret:
#shadow-banner >>> #accept
Tip: Kortere selektorer (ID’er, data-attributter eller simple klasser) er normalt mere stabile end lange selektorer med mange nth-child
.
Flere selektorer
Hvis du vil vælge mere end én ting (fx to forskellige bannere), kan du adskille dem med komma.
Eksempel:
.cookie-banner .accept, .newsletter-popup .close
Silktide prøver dem alle én efter én.
User Flow-sider i Silktide
Som standard indeholder hver Silktide-test en User Flow. Den åbner forsiden uden klik, så bannere og pop-ups altid testes mindst én gang.
Du kan kende dem på flow-mærket:
I sidelisten vises det ved siden af sidetitlen.
I inspektørvisningen vises det øverst til højre.
Har du stadig brug for hjælp?
Hvis du stadig har problemer med at fjerne et pop-up, kan du kontakte os her:
https://silktide.com/contact/
Vi har brugt ChatGPT til at oversætte den engelske version af denne artikel. Hvis du ser noget, der skal ændres, bedes du kontakte vores supportteam.