title: How do I detect and wait for an overlay in Selenium WebDriver?
body: <p>There is a spinner overlay that appears on top of page and I must wait for it to finish loading. After it goes away, then I can click elements. However, when I perform a test to see if the element is clickable, it always returns true. I have to manually add a hard coded wait time for the spinner to disappear. The problem is it is very flaky and indeterminate. Sometimes it takes longer than the hard coded time and produces an error. Of course when it takes less time, then it still has to wait and is very slow and wastes time. This is the code:</p>
  
  <pre><code>echo "Finding Advanced\n";
  $driver-&gt;wait(10)-&gt;until( WebDriverExpectedCondition::elementToBeClickable( WebDriverBy::partialLinkText('Advanced') ) );
  sleep(3); // spinner
  $driver-&gt;findElement(WebDriverBy::partialLinkText("Advanced"))-&gt;click();
  </code></pre>
  
  <p>This is the error message when the spinner overlay takes longer than expected:</p>
  
  <pre><code>Finding Advanced
  PHP Fatal error:  Uncaught exception 'UnknownServerException' with message 'unknown error: Element is not clickable at point (89, 127). Other element would receive the click: &lt;div id="socialLoader" class="overlay" style="display: block; left: 0px; right: 0px; top: 0px; bottom: 0px; position: absolute;"&gt;...&lt;/div&gt;
    (Session info: chrome=42.0.2311.152)
    (Driver info: chromedriver=2.14.313457 (3d645c400edf2e2c500566c9aa096063e707c9cf),platform=Windows NT 6.3 x86_64) (WARNING: The server did not provide any stacktrace information)
  </code></pre>
  
  <hr>
  
  <p>I tried the following</p>
  
  <pre><code>$driver-&gt;findElement(WebDriverBy::cssSelector('button.xBtn.remove'))-&gt;click();
  sleep(1); // spinner
  echo "Finding Advanced\n";
  $driver-&gt;wait(10)-&gt;until( WebDriverExpectedCondition::invisibilityOfElementLocated( WebDriverBy::id('socialLoader') )); // spinner
  $driver-&gt;findElement(WebDriverBy::partialLinkText("Advanced"))-&gt;click();
  </code></pre>
  
  <p>and got this</p>
  
  <blockquote>
    <p>Finding Advanced<br>
    PHP Fatal error:  Uncaught exception 'UnknownServerException' with message 'unknown error: Element is not clickable at point (89, 127). Other element would receive the click: ...</p>
  </blockquote>
  
  <hr>
  
  <p>I tried this </p>
  
  <pre><code>// sleep(1); // spinner
  echo "Finding Status Active\n";
  $driver-&gt;wait(10)-&gt;until( WebDriverExpectedCondition::elementToBeClickable( WebDriverBy::id('socialLoader') ) );
  $driver-&gt;wait(10)-&gt;until( WebDriverExpectedCondition::invisibilityOfElementLocated( WebDriverBy::id('socialLoader') )); // spinner
  </code></pre>
  
  <p>and got this</p>
  
  <blockquote>
    <p>Finding Status Active<br>
    PHP Fatal error:  Uncaught exception 'TimeOutException' in C:\Users\finance.operations\Desktop\Teads\php-webdriver\lib\WebDriverWait.php:69</p>
  </blockquote>