title: Webdriverio - Element Not Visible
body: <p>it's my first time posting here in Stackoverflow. </p>
  
  <p>Currently I'm working with WebdriverIO using the Mocha Framework and Selenium-Standalone. I'm in my work placement currently and I've been tasked to do some automation testing.</p>
  
  <p>My problem is a particular element - the <strong>fa-trash</strong>:</p>
  
  <pre><code>  &lt;label class="gf-form-label"&gt;
          &lt;a ng-click="ctrl.toggleHideQuery()" role="menuitem"&gt;
              &lt;i class="fa fa-eye"&gt;&lt;/i&gt;
          &lt;/a&gt;
      &lt;/label&gt;
      &lt;label class="gf-form-label"&gt;
          &lt;a class="pointer" tabindex="1" ng-click="ctrl.removeQuery(ctrl.target)"&gt;
              &lt;i class="fa fa-trash"&gt;&lt;/i&gt;
          &lt;/a&gt;
      &lt;/label&gt;
  </code></pre>
  
  <p>Every time I try clicking on it, it outputs a message that the element does not exist. </p>
  
  <p>Code Snippet:</p>
  
  <pre><code>it('should Delete', function(){
      browser.pause(500);
      browser.click('.fa-trash');
      browser.pause(2000);
  });
  </code></pre>
  
  <p>I'm able to click the <strong>fa-eye</strong> fine without error, which hides the current element in the browser but if I try clicking the <strong>fa-trash</strong>, it will give me a message that it does not exist.</p>
  
  <p>Thanks for the help :)</p>