How to wait for a css attribute to change?

Question

How can I tell Selenium webdriver to wait on a specific element to have a specific attribute set in css?

I want to wait for:

element.getCssValue("display").equalsIgnoreCase("block")

Usually one waits for elements to be present like this:

webdriver.wait().until(ExpectedConditions.presenceOfElementLocated(By.id("some_input")));

How can I wait for the specific css value of display attribute?

score 15 · Accepted Answer · answered Feb 11 '14 at 23:19

15

I think this would work for you.

webdriver.wait().until(ExpectedConditions.presenceOfElementLocated(By.xpath("//*[@id='some_input'][contains(@style, 'display: block')]")));

answered Feb 11 '14 at 23:19

Richard

8,961
3
38
47

I tried but it didn't work `//span[contains(text(),'Create Professor')][contains(@style,'color: #222222')]` . It is giving element not found exception. Where HTML was `Click here to Create Professor...`. Create Profressor turns from disabled (grey text) to black bold text – paul Apr 16 '18 at 09:58
I'm pretty sure this would *not* work because JS changes to the style do not change the value of @style. OP needs just a plain old wait loop on `element.getCssValue("display")`. – Keith Tyler Sep 28 '18 at 00:15

score 1 · Answer 2 · edited Apr 28 '15 at 17:36

1

Small modification of the above answer helpped for me. I had to use two (s before I start By.XPATH, not 1:

WebDriverWait(browser,1000).until(EC.presence_of_element_located((By.XPATH,xpathstring)))

edited Apr 28 '15 at 17:36

Vince Bowdren

8,326
3
31
56

answered Apr 18 '15 at 16:58

user1519904

7
3

this answer is for Python, as a FYI – iceui2 Mar 06 '16 at 09:13

score 1 · Answer 3 · answered Jan 12 '17 at 12:42

In C# with extension method:

public static WebDriverWait wait = new WebDriverWait(SeleniumInfo.Driver, TimeSpan.FromSeconds(20));
    public static void WaitUntilAttributeValueEquals(this IWebElement webElement, String attributeName, String attributeValue)
        {            
                wait.Until<IWebElement>((d) =>
                {
                    if (webElement.GetAttribute(attributeName) == attributeValue)
                    {
                        return webElement;
                    }
                    return null;
                });
        }

Usage:

IWebElement x = SeleniumInfo.Driver.FindElement(By.Xpath("//..."));
x.WaitUntilAttributeValueEquals("disabled", null); //Verifies that the attribute "disabled" does not exist
x.WaitUntilAttributeValueEquals("style", "display: none;");

How to wait for a css attribute to change?

3 Answers3

Linked