cookiebanner | one file pure js cookie banner for gpdr

From the documentation page you linked:

Inline styles will always take precedence over external CSS, so you cannot override it by simply increasing specificity.

Let's stop right there. Styled Components adds classes to elements. In HTML/CSS, style attribute styles will almost always trump class-based styles; there is nothing Styled Components (or any other class-based library) can do to change that ... unless you use a "hack" with !important that is ...

There is a neat trick however, which is to use the style element-attr CSS Selector in conjunction with !important:

The !important is an essential part of that hack, and so the (working) code you posted:

You've just missed the await keyword. You have to await the element (button) before interacting (clicking) with it. So, your script looks good, just add the await for the acceptCookiesButton element.

Whenever there are dynamically rendered css selectors on pages, I look to use the xpath route.

Step 1 => Find the xPath through inspect element, right click the element > "copy xpath"

Step 2 => Use the page.waitForXPath(xpath[, options]) and page.$x() function found in puppeteer documentation https://devdocs.io/puppeteer/index#pagexexpression

Step 3 => Run/Test your code

//button[.='Accept All']

As well as adding a webdriver wait would solve your issue.

The comment thread on this question is semantically correct, you can only have one instance of each html id attribute, they must be unique, and your find_script_by_id methods are both searching for the same thing.

However, you're doing what's generally called "baking in" the scripts into your header which is at best, a faux pas, at least as far as WordPress is concerned. Properly Enqueueing Scripts (and styles) is very easy in WordPress, and your future self, web clients, and other people who look at your code will thank you for doing it.

It's not unlike how you're "baking in" the scripts now:

So this may be a bit "hackie", however I achieved my objective by setting the following in my application_controller

The filter() function returns an array of all the elements of the original array that match a condition. In this case, the original array is the one that results from splitting the document.cookie at ; delimiters.

item.trim().indexOf('CookieConsent=') returns the position of the string of CookieConsent=.

== 0 tests whether that position is 0, so it's testing whether the string begins with CookieConsent=.

Thus, the filter() call returns an array of all the cookies that begin with CookieConsent=.

.length returns the length of this filtered array. It will be 0 if no such cookies were found, non-zero if there were any.

Any non-zero number is truthy, so the if condition will succeed if a CookieConsent cookie was found.