"enableJavaScript: true" disables discovery.cookies

[philipp-winterle]

The problem

If using enableJavaScript: true the discovery.cookies settings are ignored.

module.exports = {
  version: 2,
  snapshot: {
    widths: [1920],
    enableJavaScript: false,
  },
  discovery: {
    cookies: [
      {
        name: "MSCC",
        value: "cid=hqr4tmpjqgd1zyhujbr7etuc-c1=2-c2=2-c3=2",
      },
    ],
  }
};

- name: Dev To Cookie Test
  url: https://microsoft.com
  waitForTimeout: 3000

Environment

• Node version: 16.14
• @percy/cli version: 1.16.0
• Version of Percy SDK you’re using: "@percy/puppeteer": "^2.0.2"
• If needed, a build or snapshot ID: 23292125
• OS version: MacOs Ventura 13.0.1
• Type of shell command-line [interface]: zsh

Details

Iam trying to scan our pages. To get the full page screen I need to get rid of our cookie consent overlay. I can use cookies for that to simulate a already visited user.
If I set enableJavaScript to false I get the full page screen without the cookie banner. If I set it to true the same snapshot test will result in a page with cookie banner as if there are no cookies set.

Code to reproduce issue

Given the above settings just run

npx percy snapshot snapshot.yml

[philipp-winterle]

Found out the cookie seems to be set and not at the same time.

I found things on the snapshot that only exists if cookie is set. Same time I find things on the snapshot that only exists if cookie is NOT set. Strange

Seems like snapshots from local differ from online

[philipp-winterle]

Hey @itsjwala, :)

Let me explain my thoughts:
In a world where lazy-load import() is a thing, we should always expect JavaScript to alter DOM.
We heavily use IntersectionObserver to only load code to the user that also scrolls to the position where the code is needed. This is a thing in my professional business environment. So excluding this JS from doing stuff would mean that percy is not a working solution to our needs. As this would only work for ssr one page applications.

If I understand this right. Iam not totally sure about how percy snapshots work on my local environment and what happens after it is reprocessed in your environment.

What I can say is: We deliver the cookie banner by default if a cookie does not exist. The JavaScript handling is only for moving execute the specified allowed cookie functions for analytics and so on.

A very specific example in my production testing with percy:

I have a cookie banner and I have a search form below. If the cookie is not accepted I wont load the JS for the searchform. So with cookie shown it is just a svg showing the meaning of the searchform. If the cookie banner then is accepted it will lazyload the searchform js.
On next pageload the lazyloading will occur as soon as the js for the cookie banner executed the functions to load.

What I see in percy is, that it shows the cookie banner AND the loaded search form. Which means, the cookie was set correctly and the searchform loads correctly, but it still shows the cookie banner, which is not correct and also no real user example.

not sure if Iam getting some wrong impression :(

[itsjwala]

In a world where lazy-load import() is a thing, we should always expect JavaScript to alter DOM.
We heavily use IntersectionObserver to only load code to the user that also scrolls to the position where the code is needed. This is a thing in my professional business environment. So excluding this JS from doing stuff would mean that percy is not a working solution to our needs. As this would only work for ssr one page applications.

As I said, the page will load without bothering about enableJavaScript: false option -- It's only meant for it to work in our infrastructure, since we want whatever was captured when percySnapshot was called with to be exactly same in our browsers.

You can understand how Percy works better in the diagram available top of the page https://docs.percy.io/docs/debugging-sdks.

I have a cookie banner and I have a search form below. If the cookie is not accepted I wont load the JS for the searchform. So with cookie shown it is just a svg showing the meaning of the searchform. If the cookie banner then is accepted it will lazyload the searchform js.
On next pageload the lazyloading will occur as soon as the js for the cookie banner executed the functions to load.

in this case what you can do is call percySnapshot just after the above step is done, with enableJavascript: false it will capture the DOM state with cookie banner not shown.

[philipp-winterle]

I did it with enableJavaScript: false and with enableJavaScript: true. Both results are not valid.
Iam not sure I could explain it good enough to you.

Just have a look at my build: https://percy.io/ecfcc1c0/tcms/builds/23292950

[itsjwala]

• I'd tried -- post the cookie banner is clicked, scroll past to the last page to get all the assets loaded for DOM to set up properly. with enableJavaScript: false it might capture the state properly.

script.py

import time
from selenium import webdriver
from selenium.webdriver.common.desired_capabilities import DesiredCapabilities
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.by import By
from percy import percy_snapshot


caps={
      'os_version': '10',
      'os': 'Windows',
      'browser': 'chrome',
      'browser_version': 'latest',
      'name': 'Test', 
      'build': 'Test',
      } 

driver = webdriver.Remote(
    command_executor='https://<username>:<access_key>@hub-cloud.browserstack.com/wd/hub',
    desired_capabilities=caps)
driver.set_window_size(1920, 1080)
driver.get("https://www.check24.de/")
WebDriverWait(driver, 20).until(
        EC.element_to_be_clickable((By.CSS_SELECTOR, "div.c24-cookie-consent-notice-buttons > a:nth-child(2)"))).click()

scroll_height = driver.execute_script("return document.body.scrollHeight")
current = 1080

while True:
    driver.execute_script(f"window.scrollTo(0, {current});")
    time.sleep(5)
    current += 1080
    if current >= scroll_height:
        break

percy_snapshot(driver, "Home Page")

driver.quit()

.percy.yml

version: 2
snapshot:
  widths:
    - 1920
  minHeight: 1024
  percyCSS: ""
  enable-javascript: false
discovery:
  allowedHostnames: [ ]
  disallowedHostnames: []
  networkIdleTimeout: 100

npx percy exec -- python script.py

[philipp-winterle]

I understand that an own sdk would be a solution, but working with the cli was the favored way and is a bit sad I don't get it to work properly. Maybe I have to use the sdk then :/