title: How do I check if a specific element is visible and do task only then in CasperJS?
body: <p>I want to check when an element becomes visible to the human eye. I have used  methods like <code>this.exists()</code> but this doesn't help as it still doesn't show.</p>
  
  <p>I have finally found a way to output data that tells me whether it is visible or not using <code>getElementsInfo()</code>.</p>
  
  <p>Here is what I have and the output:</p>
  
  <pre><code>var fs = require('fs');
  
  var casper = require('casper').create({
    viewportSize: {width: 950, height: 950}
  });
  
  casper.start('https://example.com/check.html', function() {
      //this.captureSelector('1p.png', 'body');
      this.echo(this.getTitle());
  });
  casper.then(function(){
      var one = casper.cli.get(0);
      var two  = casper.cli.get(1);
      this.sendKeys('input[id="txt"]',one);
  
      casper.waitForSelector('#txtsend', function() {
          this.click('#txtsend');
      });
      casper.waitForSelector('#Step1', function() {
          require('utils').dump(this.getElementsInfo('#Step1'));
          var a = this.fetchText('#Step1');
          this.echo(a);
      });
  });
  
  casper.run();
  </code></pre>
  
  <p>This is the output I want to check whether <code>visible</code> is true or false and if true run a command and if false run another.</p>
  
  <pre class="lang-json prettyprint-override"><code>[
      {
          "attributes": {
              "id": "Step1"
          },
          "height": 42,
          "html": "This is ready to complete",
          "nodeName": "span",
          "tag": "&lt;span id=\"Step1\"&gt;This is ready to complete&lt;/span&gt;",
          "text": "This is ready to complete,
          "visible": true, // this can also be false this is what i want to fetch and monitor whether true or fals
          "width": 229,
          "x": 624,
          "y": 484
      }
  ]
  </code></pre>