Many websites display pop-ups such as cookie banners. These often include buttons like “Accept all” or “Allow cookies”.
Silktide can be set to automatically select these buttons during testing. This makes reports cleaner:
The banner will not cover or interfere with the page being checked.
Some banners block interaction with the page until they are dismissed.
If the banner contains an issue, the same issue may be counted on every page where it appears, reducing scores unnecessarily.
To do this, you will use a CSS selector. A CSS selector is a piece of code that uniquely identifies an element on a page. Silktide’s Click selector setting tells the platform which element should be selected automatically.
TL;DR checklist
First, decide if the banner’s button is inside a shadow DOM or not.
If you do not see “shadow-root (open)” or a white guideline in Chrome DevTools → follow the Normal element checklist.
If you do see “shadow-root (open)” or a white guideline leading up to it → follow the Shadow DOM checklist.
Normal element
Open the page in Incognito mode so the banner appears fresh.
Right-click the button you want to select (for example, Accept all) → Inspect.
Right-click the highlighted line → Copy → Copy selector.
Paste into Silktide → Website settings → Advanced → Click selector.
Select Save.
Retest the page. If the banner is removed, the next full retest will remove it across the whole site.
Shadow DOM element
Open the page in Incognito mode.
Right-click the button → Inspect.
Follow the white guideline in the Elements panel upward until you find shadow-root (open).
Right-click the shadow host element just above it → Copy → Copy selector. Keep this safe.
Right-click the button again → Copy → Copy selector.
Combine them with
>>>, for example:#shadow-banner >>> #accept
Paste into Silktide → Website settings → Advanced → Click selector.
Select Save.
Retest the page. If the banner is removed, the next full retest will remove it across the whole site.
Full instructions
Step 1: Open the webpage
Open the website in Incognito mode.
This ensures the cookie banner appears, even if you have already accepted it in your normal browser.
Step 2: Inspect the button
Move your mouse over the button you want (for example, “Accept all”).
Right-click and select Inspect.
The Chrome DevTools panel will open, with the matching line of code already highlighted.
At this point, you have identified the button you want.
(Example: in the screenshot below, the highlighted line shows an “Accept all” button with the selector #accept-regular. Your page will look different, but the idea is the same.)
Step 3: Copy the selector
Right-click the highlighted line.
Hover over Copy, then select Copy selector.
You now have the CSS selector for that button.
Step 4: Add the selector in Silktide
Go to Website settings → Advanced → Click selector.
Paste your selector.
Select Save.
Step 5: Retest the page
Run a retest of that single page.
If the banner is no longer there, you are finished.
The next full retest will apply this change across the entire website.
Shadow DOM instructions
Sometimes buttons are hidden inside a shadow DOM. You can tell because:
You see shadow-root (open) in the DevTools panel, or
You see a solid white vertical line in the margin of the panel leading upward to a shadow-root.
When this happens, you must copy two selectors and combine them with >>>.
Step 1: Find the shadow host
In DevTools, follow the white vertical guideline upwards until you reach the line that says shadow-root (open).
Select the element just above it. This is the shadow host.
Right-click the shadow host → Copy → Copy selector. Keep this safe.
(Example: in the screenshot below, the highlighted line shows the shadow DOM host with the selector #shadow-banner. Your page will look different, but the idea is the same.)
Step 2: Find the button inside
Go back to the button inside the shadow DOM (for example, “Accept all”).
Right-click the highlighted button line → Copy → Copy selector.
(Example: in the screenshot below, the highlighted line shows the “Accept all” button inside the shadow DOM with the selector #accept. Your page will look different, but the idea is the same.)
Step 3: Combine them
Finally, you combine the two selectors with >>>.
Example result:
#shadow-banner >>> #accept
Paste this into Silktide → Website settings → Advanced → Click selector, and select Save.
Examples of selectors
Selectors can look very different. All of these are valid:
Clean and simple:
#onetrust-accept-btn-handlerbutton[data-testid="uc-accept-all-button"].cookie-banner .accept
Complex but valid (often uses
nth-child):#root > div > div:nth-child(3) > div.cookie-wrapper > div:nth-child(2) > button:nth-child(1)
Shadow DOM combined:
#shadow-banner >>> #accept
Tip: shorter selectors (IDs, data-attributes, or simple classes) are usually more reliable than long selectors with many nth-child parts.
Multiple selectors
If you need to select more than one thing (for example, two different cookie banners that can appear), you can list multiple selectors separated by commas.
Example:
.cookie-banner .accept, .newsletter-popup .close
Silktide will try each of them in turn.
Silktide’s User Flow pages
By default, every Silktide test includes a User Flow. This is a duplicate of the homepage that simply opens the site without selecting anything, so that banners and pop-ups are always tested at least once.
You can recognise these by the flow label:
In a page list, it appears next to the page title.
In the inspector view, it appears in the top-right corner.
Still need help?
If you are still struggling to remove a pop-up, contact us here:
https://silktide.com/contact/