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?

Answer 1

I think this would work for you.

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

Answer 2

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)))

Answer 3

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;");