Spring videre til hovedindholdet

Sådan fjerner du pop-ups, cookie-bannere og mere

Lær at bruge CSS-selektorer i Silktide til at fjerne pop-ups og cookie-bannere automatisk under test.

Daniel Towers avatar
Skrevet af Daniel Towers
Opdateret for over en måned siden

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

  1. Åbn siden i Inkognito-tilstand, så banneret med sikkerhed vises.

  2. Højreklik på den ønskede knap (fx Accepter alle) → Inspicer.

  3. Højreklik på den markerede linje → Kopiér → Kopiér selektor.

  4. Indsæt i Silktide → Website-indstillinger → Avanceret → Klik-selektor.

  5. Vælg Gem.

  6. Retest siden. Hvis banneret er væk, bliver det fjernet på hele websitet ved næste fulde test.

Shadow DOM-element

  1. Åbn siden i Inkognito-tilstand.

  2. Højreklik på knappen → Inspicer.

  3. Følg den hvide linje i DevTools opad, indtil du finder shadow-root (open).

  4. Højreklik på shadow-host-elementet lige over → Kopiér → Kopiér selektor. Gem dette.

  5. Højreklik på knappen igen → Kopiér → Kopiér selektor.

  6. Kombinér dem med >>>, fx:

    #shadow-banner >>> #accept

  7. Indsæt i Silktide → Website-indstillinger → Avanceret → Klik-selektor.

  8. Vælg Gem.

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

Læs mere om User Flow-sider.

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.

Besvarede dette dit spørgsmål?