C# Selenium CSS-selector attribute not working

Question

I'm trying to run Selenium test, where it waits until a certain attribute has a value to continue and when checking in the browser (Code inspection Ctrl+shift+I, ctrl+F), it locates the element using the css locator, but I in when running the test, I always get a timeout - and the element gets the desired value before that time

Checked that the css locator is valid in "inspect code" and search
Tried easier locators - it locates the id, but can't locate the attribute and its value
Googling like crazy to find the solution

My code (CMExtensionMethods.IsElementVisible == ExpectedConditions, does the same thing):

public static WebDriverWait waitForElement = new WebDriverWait(driver, TimeSpan.FromSeconds(5));
waitForElement.Until(CMExtensionMethods.IsElementVisible(By.CssSelector("#page_progress[style~='display:']")));


public static Func<IWebDriver, IWebElement> IsElementVisible(By identifier) {
           return (driver) =>
           {
               try {
                   return IfElementVisible(driver.FindElement(identifier));
               }
               catch(NoSuchElementException) {
                   return null;
               }
           };
       }
       // Part of the method above
       private static IWebElement IfElementVisible(IWebElement element) {
           return element.Displayed ? element : null;
       }

HTML code on the page(page_progress style changes depending on the website state - the style is either like this or empty):

    <div id="page_progress" class="loading-progress" style="display: none;"> 
    </div>
    <div id="page_saveindicator" class="unsaved-changes" style="display: 
     none;"></div>

Expectation: The code to continue right after the style gets a value

Result: Nothing is located and I get a timeout error after 5 sec (as set), despite the element having the attribute and the value it's supposed to

Might be worth mentioning - the method IsElementVisible works - tested on IDs, and CSSselectors using Class and Id (alone)

JeffC · Accepted Answer · 2019-04-04 13:36:34Z

1

You don't need to (and shouldn't) include style=display:... in your locator to determine visibility. Selenium does that for you when you use .Displayed or use ExpectedConditions and wait for visible. Just locate the element normally, e.g. both of your elements have an ID so use By.Id("page_progress"), like

wait.Until(ExpectedConditions.ElementIsVisible(By.Id("page_progress"));

and Selenium will take care of the rest.

answered Apr 4, 2019 at 13:36

JeffC

26.4k5 gold badges35 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

RegCent Over a year ago

Haven't thought of that, I'll have to give it a try as soon as I get back to my code and I'll post the result

RegCent Over a year ago

This has solved it for me...I somehow expected that "Visible" means in the page, even if not displayed, thank you

Greg Burghardt · Accepted Answer · 2019-04-04 12:08:38Z

0

The wrong comparison operator is being used in the CSS selector.

The ~= operator must exactly match the value of the attribute.

Either add the block part of the attribute value, or change the comparison operator to ^=.

By.CssSelector("#page_progress[style^='display:']")

More info: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

answered Apr 4, 2019 at 12:08

Greg Burghardt

19.2k10 gold badges58 silver badges105 bronze badges

1 Comment

RegCent Over a year ago

According to W3School, the ~= is not for the exact value and nothing else, but for everything that contains the value. And as I mentioned, it does work in the browser, so there shouldn't be a difference in Selenium, right? w3schools.com/cssref/css_selectors.asp

Collectives™ on Stack Overflow

C# Selenium CSS-selector attribute not working

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related