title: DOM manipulation with PhantomJS
body: <p>I am using PhantomJS to create screenshots from arbitrary URLs. Before the screenshot is taken, I want to manipulate the page DOM to remove all drop-down menus, as PhantomJS renders them incorrectly in the top left-hand corner of the page (a known Phantom <a href="http://code.google.com/p/phantomjs/issues/detail?id=601" rel="noreferrer">issue</a>.)</p>
  
  <p>I have a simple DOM script to do this with:</p>
  
  <pre><code>    var selects = document.getElementsByTagName('select');
  
      for (var i=0; i &lt; selects.length; i++) {
          document.getElementsByTagName('select')[i].style.visibility="hidden";
      }
  </code></pre>
  
  <p>This has been tested and works fine as stand-alone Javascript. It doesn't however work inside the PhantomJS code I am using to collect the screenshots (last part shown):</p>
  
  <pre><code>  page.open(address, function (status) {
  
      if (status !== 'success') {
          console.log('Unable to load the address!');
      } else {
          window.setTimeout(function () {
  
              var selects = document.getElementsByTagName('select');
  
              for (var i=0; i &lt; selects.length; i++) {
                  document.getElementsByTagName('select')[i].style.visibility="hidden";
              }
  
              page.render(output);
  
              phantom.exit();
  
          }, 200);
      }
  });
  </code></pre>
  
  <p>Some pages are still rendering with a select box in the wrong place. I'd appreciate help either solving the original PhantomJS rendering bug or hiding the drop-down menus in the DOM. Thanks.</p>