title: How to use Selenium (or Seleno) to detect if a DOM element is displayed by Angular
body: <p>When my button is clicked, the <code>ng-hide</code> directive will turn a hidden div to be visible on page. I am using <code>Seleno</code> to write UI test for an Angular application.</p>
  
  <p>I have checked the <code>display</code> css value on that element:</p>
  
  <pre><code>var cssValue = SelectById(elementId).GetCssValue("display");
  </code></pre>
  
  <p>This <code>cssValue</code> always returns a <code>none</code>.</p>
  
  <p>Also checked is the <code>class</code> attribute. </p>
  
  <pre><code>var cls = SelectById(elementId).GetAttribute("class");
  </code></pre>
  
  <p>I am expecting <code>ng-hide</code> should be removed from the classes of this element.</p>
  
  <pre><code>return !SelectById(elementId).GetAttribute("class").Contains("ng-hide");
  </code></pre>
  
  <p>But every time the <code>class</code> still contains <code>ng-hide</code>!</p>
  
  <hr>
  
  <p>In case someone may ask, here is my <code>SelectById</code>. Just to return a Web Element on the Selenium Page Object.</p>
  
  <pre><code>    protected IWebElement SelectById(string id)
      {
          return Find.Element(By.Id(id));
      }
  </code></pre>
  
  <hr>
  
  <p>As mentioned in the answer section, I probably did not wait out the class update by Angular in a correct way. What I did is just let the <code>Thread</code> <code>Sleep</code> a while.</p>
  
  <pre><code>    public static void Pause(int durationInMilisecond = 2000)
      {
          if (SelenoSettings.EnablePausing) 
              Thread.Sleep(durationInMilisecond);
      }
  </code></pre>
  
  <hr>
  
  <p>Anyone can give me some advice? Thanks.</p>