title: Form Not Found When Attempting to Fill Using CasperJS
body: <p>I'm learning CasperJS and want to try a simple, somewhat useful task.  I'd like to make a pdf copy of my gas bill, but I can't even log into the website.</p>
  
  <p>I'm a customer of CT Natural Gas.  The URL is:</p>
  
  <p><a href="https://www.cngcorp.com/wps/portal/cng/home/mycng/customerWebAccess/" rel="nofollow">https://www.cngcorp.com/wps/portal/cng/home/mycng/customerWebAccess/</a></p>
  
  <p>Logging in should be simple.  It should just be my account number and last name.  </p>
  
  <p>My code is:</p>
  
  <pre><code>var start_url = "https://www.cngcorp.com/wps/portal/cng/home/mycng/customerWebAccess/"
  var casper = require('casper').create()
  
  casper.start(start_url, function() {
  
      this.fill('formid', {
          'input1id': '000000000000',
          'input2id': 'LastName'
      }, true);
      this.capture('cng.png');
  
  })
  casper.run()
  </code></pre>
  
  <p>My "real" code uses the full ID shown in the site's HTML, not "formid" or "input1ID".  I did not include the full ID in the sample code above because I was unsure what those ID's really were.  They look something like: viewns_7_LOIGMC7IA21234QWERASDF1234_:custWebLogin.  So much for a "simple" ID.  Maybe this is something generated from a WebSphere product?</p>
  
  <p>Anyway, the form is not found.  I get:</p>
  
  <pre><code>CasperError: Errors encountered while filling form: form not found
  </code></pre>
  
  <p>I've also hacked it a bit and put this in my <code>start</code> to see what the form "looks like":</p>
  
  <pre><code>listItems = this.evaluate(function () {
      var nodes = document.querySelectorAll('form');
      return [].map.call(nodes, function(node) {
          return node.id;
      })
  })
  
  this.echo(listItems);
  </code></pre>
  
  <p>That returns:</p>
  
  <pre><code>,viewns_7_LOIGMC7IA21234QWERASDF1234_:custWebLogin
  </code></pre>
  
  <p>I think the form id is messing this up.  Can anyone offer any suggestions?</p>