[🐛 Bug]: Browser gradually changing color after it has been applied

[zerodayz]

What happened?

TLDR; When using WebDriverWait, it waits for the color style to be set in the source code, but the browser actually takes some time to progress towards the expected color gradually.

1. Apply style using execute_script:

          self.driver.execute_script("arguments[0].style = arguments[1];",
                                      self.driver.find_element(*locator), style)

2. Check the style has been applied via WebDriverWait

                   WebDriverWait(self.driver, 60).until(EC2.element_attribute_is(highlight_element,
                                                                                 "style", highlight_style))

Which is just my own EC:

def element_attribute_is(locator, attribute_, expected_value):
    """An expectation for checking if the given attribute is included in the
    specified element.

    locator, attribute
    """

    def _predicate(driver):
        try:
            element_attribute = driver.find_element(*locator).get_attribute(attribute_)
            return element_attribute == expected_value
        except StaleElementReferenceException:
            return False

    return _predicate

3. Just in case get the style and check it's really applied

   2023-03-07 15:14:31 INFO express.py:181 Taking screenshot of ('id', 'dropdownMenuButton'), which style is border: 2px solid rgb(255, 0, 0);

4. The browser even tho source code is set 255, 0, 0 it's visually still progressing towards the 255, 0, 0

Now what can I do, I was trying to avoid to use sleep however it seems that from selenium it's impossible to check whether element has certain style applied, since the source code is not exactly what is being visually displayed.

At least not immediately.

I am sure thousands of people hit this same problem and probably used sleep and went on, but is there any other way really?

The same happens with options --headless=new

How can we reproduce the issue?

The code in https://github.com/zerodayz/express/blob/main/src/express.py#L175-L183
The test I am executing is https://github.com/zerodayz/express/blob/main/test/test_dropdown.py

Relevant log output

See What Happened?

Operating System

MacOS Ventura 13.2.1

Selenium version

Selenium 4.8.2

What are the browser(s) and version(s) where you see this issue?

Chrome 110.0.5481.177

What are the browser driver(s) and version(s) where you see this issue?

ChromeDriver 110.0.5481

Are you using Selenium Grid?

No response

[github-actions[bot]]

@zerodayz, thank you for creating this issue. We will troubleshoot it as soon as we can.

---

Info for maintainers

Triage this issue by using labels.

If information is missing, add a helpful comment and then I-issue-template label.

If the issue is a question, add the I-question label.

If the issue is valid but there is no time to troubleshoot it, consider adding the help wanted label.

If the issue requires changes or fixes from an external project (e.g., ChromeDriver, GeckoDriver, MSEdgeDriver, W3C), add the applicable G-* label, and it will provide the correct link and auto-close the issue.

After troubleshooting the issue, please add the R-awaiting answer label.

Thank you!

[zerodayz]

Here is the screenshot, you can clearly see that even tho the WebDriverWait passed, and the logging printed that color is 255, 0, 0 the browser was still catching up.

[zerodayz]

I think i found the suspect, so I need to remove that before changing the color.

Let it be, so if someone encounters the same problem

[zerodayz]

Verified

The fix was to apply additional style transition: none !important; on top of the highlight:

            # remove any color transition from the element https://github.com/SeleniumHQ/selenium/issues/11740
            # and update the element style to the given style
            self.driver.execute_script("arguments[0].style = arguments[1];",
                                       self.driver.find_element(*locator),
                                       style + "transition: none !important;")

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.