[Python] chromedriver in headless mode incorrectly sets opacity to 0 for MUI component using...

I'm seeing an issue in selenium using chromedriver in headless mode with a MUI component that uses fade in where the transition doesn't seem to trigger.

If you run the following script against the sample url, the script will timeout waiting for the component to become visible.

Run without headless and the component becomes visible. (which makes it tricky to troubleshoot).

Even when running in headless mode, if you call driver.save_screenshot or driver.get_screenshot_as_png prior to waiting for the visibility, it becomes visible!

Run against edge browser (which is chromium) the element becomes visible. (i.e. works)

1. is anyone else seeing this behavior?
2. Anyone have insight into what might be happening here? Specifically why a screenshot would allow the fade in trigger to work?

from time import sleep

from selenium import webdriver
from selenium.webdriver.chrome.service import Service as ChromeService
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.support.wait import WebDriverWait


opts = (
"--disable-extensions",
"--disable-single-click-autofill",
"--disable-autofill-keyboard-accessory-view[8]",
"--disable-full-form-autofill-ios",
"--disable-infobars",
# chromedriver crashes without these two in linux
"--no-sandbox",
"--disable-dev-shm-usage",
)
exp_prefs = {"autofill.profile_enabled": False}
options = webdriver.ChromeOptions()
for opt in opts:
options.add_argument(opt)
options.add_experimental_option("prefs", exp_prefs)

#comment this out to run without headless to witness the script finish properly.
options.add_argument("--headless")

driver = webdriver.Chrome(service=ChromeService(), options=options)
driver.set_window_position(0, 0)
driver.set_window_size(1600, 1080)

URL = "https://react-w7zntifk-wnhs8qae.stackblitz.io/"
TEST_ID = (By.ID, "test-id")
RUN_BUTTON = (By.XPATH, "//button[contains(string(), 'Run this project')]")


driver.get(URL)
wait = WebDriverWait(driver, 5)

# get past the stackblitz initialization
button = wait.until(EC.element_to_be_clickable(RUN_BUTTON))
button.click()

# once we find the element in the DOM (which has a 2 second fade in timer) wait a moment
# before printing the opacity value, which SHOULD be a float value not zero
# but isn't in this bug.

elem = wait.until(EC.presence_of_element_located(TEST_ID), "")
sleep(0.5)
print(f"{TEST_ID} is present")
print(f'opacity: {elem.value_of_css_property("opacity")}')
print(f"is_displayed: {elem.is_displayed()}")

elem2 = wait.until(
EC.visibility_of_element_located(TEST_ID), f"{TEST_ID} was not visible)"
)


react playground: https://stackblitz.com/edit/react-w7zntifk-wnhs8qae?file=Demo.tsx

example component: https://react-w7zntifk-wnhs8qae.stackblitz.io/

Continue reading...