DOM manipulación con PhantomJS

Question

Estoy usando PhantomJS para crear capturas de pantalla de URLs arbitrarias. Antes de tomar la captura de pantalla, quiero manipular la página DOM para eliminar todos los menús desplegables, ya que PhantomJS los muestra incorrectamente en la esquina superior izquierda de la página (un Phantom conocido issue.)

Tengo un script DOM simple para hacer esto con:

var selects = document.getElementsByTagName('select'); 

    for (var i=0; i < selects.length; i++) { 
     document.getElementsByTagName('select')[i].style.visibility="hidden"; 
    } 

Esto ha sido probado y funciona bien como Javascript autónomo. Sin embargo, no funciona en el código PhantomJS que estoy utilizando para recoger las imágenes (última parte se muestra):

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 < selects.length; i++) { 
       document.getElementsByTagName('select')[i].style.visibility="hidden"; 
      } 

      page.render(output); 

      phantom.exit(); 

     }, 200); 
    } 
}); 

Algunas páginas todavía están prestando con un cuadro de selección en el lugar equivocado. Agradecería ayuda, ya sea resolviendo el error de renderización original de PhantomJS u ocultando los menús desplegables en el DOM. Gracias.

Answer 1

Ejecútelo en el contexto correcto, es decir, dentro de la página con page.evaluate. Hay muchos examples included with PhantomJS que demuestran esto, p. useragent.js.

Answer 2

¿Este código no funciona? Utilicé su variable seleccionada en caché en el ciclo for en lugar de volver a seleccionar los elementos del DOM para mejorar el rendimiento.

var selects = document.getElementsByTagName('select'); 
for (var i=0; i < selects.length; i++) { 
    selects[i].style.visibility="hidden"; 
}