Share
Capturar capturas de pantalla es molesto, pero la mayoría de las veces hay que hacerlo y, por lo general, eres tú, el desarrollador, quien tiene que hacerlo. Tomar algunas capturas de pantalla no es tan malo, pero digamos, por ejemplo, que ahora está trabajando en un sitio web con Diseño web responsivo y que tiene que tomar cinco veces más capturas de pantalla en varias vistas. Esa, una segunda tarea molesta ahora ha comenzado a comer en tu hora de almuerzo.
Hoy voy a escribir un script rápido y sencillo para tomar algunas capturas de pantalla de cualquier sitio en varias vistas y guardar las imágenes en el disco. Esto es algo que vi por primera vez en mediaqueri.es y comencé a implementarlo en mi proceso de compilación. No es ideal para pruebas reales, ya que actúa más como una prueba de cordura y proporciona una buena visión general de cualquier cosa en la que pueda estar trabajando y que incluya Responsive Web.
Cuando se ejecuta una compilación, una pequeña secuencia de comandos con PhantomJS y CasperJS puede ir y tomar una captura de pantalla en varias vistas que he definido y me da una visión general rápida de cualquier página deseada. Es particularmente bueno cuando trabajas en un equipo más grande y es posible que no tengas el tiempo antes de cada compilación para revisar cada página y cada módulo para ver cómo se ve en varias resoluciones. También le dará algo para mostrar al cliente en intervalos regulares, para mostrar cómo su sitio se flexiona en varias vistas..
Nota: PhantomJS es un navegador WebKit sin cabeza y todo lo que se renderice estaría usando la representación WebKit, por lo que no es una representación real de cómo se representaría el sitio en varios dispositivos que pueden ejecutar diferentes navegadores y, a la vez, puede cambiar la cadena de agente de usuario enviada a el sitio en carga, esto no cambia el motor de renderizado.
PhantomJS tiene una excelente API de JavaScript creada teniendo en cuenta las pruebas. Para una excelente introducción a PhantomJS y su uso para pruebas, hay un tutorial aquí en nettuts y asegúrese de consultar el sitio oficial y la documentación..
CasperJS es un conjunto de herramientas que se encuentra encima de PhantomJS y facilita el proceso de escritura de scripts Phantom al proporcionar funciones, métodos y azúcar sintáctica..
Es posible que ya tenga instalado Phantom, especialmente si ya está probando el código del lado del cliente, si no, es bastante sencillo y puede obtener instrucciones más detalladas en el sitio oficial
Para usuarios de Windows, hay un ejecutable para descargar y ejecutar.
Para los usuarios de Mac, hay tanto el binario como el que puedes instalar usando Homebrew:
actualización de brew && brew install phantomjs
Para los usuarios de Linux, hay un binario de 64 bits o tiene una opción para compilar PhantomJS desde la fuente.
Una vez instalado, puede abrir un terminal y verificar que todo esté bien ejecutando:
phantomjs --version
que debe devolver:
1.8.0
Una vez que se instale Phantom, puede seguir adelante e instalar CasperJS también. Para usuarios de Mac, puedes usar Homebrew de nuevo:
instalar cerveza casperjs
Para usuarios de Windows, necesita adjuntar su CAMINO archivo con "; C: \ casperjs \ batchbin" (Modifique esta ruta según el lugar donde desee almacenar CasperJS). Dentro de papelera directorio, hay un archivo por lotes llamado casperjs.bat, esta será la secuencia de comandos que ejecuta sus secuencias de comandos de Casper sin necesidad de que Ruby o Python estén instalados para ejecutarlo. Cuando necesite ejecutar el script Casper, simplemente use casperjs.bat scriptname.js más bien que casperjs scriptname.js.
A continuación, compruebe que:casperjs --version devoluciones:1.0.0
Ambos de estos números de versión están actualizados al momento de escribir este artículo.
Ahora que tenemos ambos en ejecución, hagamos un par de rápidos Hello Worlds para asegurarnos de que tanto Phantom como Casper estén funcionando como se esperaba.
Crea un nuevo directorio y dentro de él, crea dos archivos JavaScript, hellophantom.js y hellocasper.js. Ábralos en el editor de su elección y comencemos por asegurarnos de que Phantom esté funcionando correctamente..
Vamos a empezar en el hellophantom.js archiva y escribe una prueba rápida para obtener el título de una página web. No voy a cubrir la API de PhantomJS en detalle, esto solo le dará una introducción rápida y probará nuestra instalación. Si ya tiene PhantomJS en ejecución, puede omitir esta parte..
Primero debemos configurar un par de variables, una que ejemplifique el módulo de la "página web" y otra como una variable de "URL"..
Accentsconagua
var page = require ('web page'). create (), url = "http://net.tutsplus.com"; A continuación, podemos crear la función que navega a la página web, pasamos la URL como un argumento y una función de devolución de llamada. Recibimos un estado en nuestra devolución de llamada (éxito o falla) en el abierto método.
page.open (url, function (status) );
Ahora podemos llamar a la función de evaluación para obtener el título de la página. Podemos devolver el resultado, a una variable, asignándole la función:
page.open (url, function (status) var title = page.evaluate (function () return document.title;););
Por último, solo vamos a cerrar la sesión para poder ver el resultado en la terminal y luego salir del proceso Phantom.
console.log ('¡Hola, mundo! El título de la página en' + url + 'es' + título); phantom.exit (); Nuestro guión terminado se verá así.
var page = require ('web page'). create (), url = "http://net.tutsplus.com"; page.open (url, function (status) var title = page.evaluate (function () return document.title;); console.log ('Hola, mundo! El título de la página en' + url + 'es' + título); phantom.exit ();); discos compactos en el directorio donde se encuentra este script y puede ejecutarlo usando el siguiente comando:
phantomjs hellophantom.js
Después de unos segundos, obtendrá el siguiente resultado en su terminal:
¡Hola Mundo! El título de la página en http://net.tutsplus.com es tutoriales de desarrollo web, desde principiantes hasta avanzados | Nettuts+
Eso es genial, pero antes de continuar, podemos hacer que este código sea un poco más flexible con un nuevo factor. Hay algunos módulos que están disponibles para que usemos y uno de ellos es el módulo del sistema. Algunas de las propiedades del módulo del sistema le dan acceso a cosas como la Id. De proceso en la que se está ejecutando PhantomJS o el sistema operativo que se está utilizando, pero la que nos interesa es la args propiedad.
los args La propiedad devuelve una matriz de los argumentos de la línea de comando. El primer elemento de la matriz es siempre el nombre del script, pero podemos pasar cualquier número de argumentos desde la línea de comandos y usarlos en nuestro script. Así podemos pasar la URL que queremos abrir, con phantom, en la línea de comandos, para que podamos reutilizar el script en cualquier momento sin necesidad de editarlo cada vez..
Solo necesitamos primero el módulo del sistema y luego cambiar el url Variable para ser el argumento por el que pasamos:
system = require ('system'), url = system.args [1]; Y ahora podemos ejecutar el script con el siguiente comando:
phantomjs hellophantom.js http://net.tutsplus.com
Ahora que sabemos que Phantom está funcionando, podemos pasar a probar Casper. Replicaremos el mismo script de prueba, solo que esta vez usaremos la API de Casper..
Primero necesitamos instanciar una instancia de casper:
var casper = require ("casper"). create (); y luego tome la URL de uno de los argumentos pasados desde el terminal. Casper tiene su propio analizador de línea de comandos que se encuentra sobre el que viene con Phantom y podemos acceder a cualquier argumento que pase desde la línea de comandos como lo hicimos anteriormente. La única diferencia es que nuestro primer argumento será el primero por el que pasemos y no el nombre del script (como lo fue con Phantom)
var url = casper.cli.args [0];
La API de CLI de Casper también puede tomar opciones con nombre así como argumentos posicionales, podemos usar esto si quisiéramos configurar algunas opciones o ser más detallados con nuestro script, por ejemplo:
argumento de casperjs hellocasper.js un argumento dos --option1 = this --option2 = that
y podemos obtener estas opciones con nombre usando cli.get ('optionName'), así que podríamos hacer algo como lo siguiente, para pasar tanto los argumentos como las opciones (si tuviéramos algunas opciones de configuración que debían configurarse):
var argumentOne = casper.cli.args [0]; var argumentTwo = casper.cli.args [1]; var thisOption = casper.cli.get ('opción'); var thatOption = casper.cli.get ('option2'); Por ahora, solo voy a utilizar el argumento posicional para obtener la URL. A continuación vamos a correr el comienzo() Método para realizar cualquier tipo de navegación. El método de inicio toma una cadena de URL y una función de devolución de llamada.
casper.start (url, function () this.echo ('Hello, World! El título de la página en' + url + 'es');); Si no desea tener todas sus funciones, puede utilizar el entonces() método. Cada entonces() La llamada al método se agrega como un paso en la pila y se ejecuta de forma lineal, por lo que en lugar de lo anterior, podría tener:
casper.start (url); casper.then (function () this.echo ('Hello, World! El título de la página en' + url + 'es');); Prefiero usar entonces(), Como me resulta más fácil de leer, pero cualquiera de las dos es aceptable y, en realidad, todo es cuestión de gustos..
Para obtener el título de la página ya existe un getTitle () método disponible para nosotros, por lo que podemos utilizarlo en nuestro eco.
casper.start (url); casper.then (function () this.echo ('Hello, World! El título de la página en' + url + 'es' + this.getTitle ());); Finalmente, seguimos nuestros pasos con la correr() Método, que es un método obligatorio, necesario para que se ejecute el script de Casper. Este método también puede tener un opcional. onComplete devolución de llamada para ejecutar una vez que todos los pasos se han completado. Si utilizó la devolución de llamada, debe asegurarse de salir del proceso de Casper utilizando el salida() método. Aquí hay un ejemplo de ambos:
// Esto no necesita usar el método de salida. casper.run (); // O // esto necesita el método de salida casper.run (function () this.echo ('Todo en la pila ha terminado'); this.exit ();) Alternativamente, podría simplemente encadenar el método de salida después del eco:
casper.run (function () this.echo ('Todo en la pila ha terminado'). exit ();) De nuevo, solo una cuestión de gusto..
Ahora nuestro script HelloCasper.js completo debería tener este aspecto:
var casper = require ("casper"). create (); var url = casper.cli.args [0]; casper.start (url, function () this.echo ('Hello, World! El título de la página en' + url + 'es' + this.getTitle ());); casper.run (function () this.echo ('Todo en la pila ha terminado.'). exit ();); Ahora podemos ejecutar el script Casper con el siguiente comando:
casperjs hellocasper.js http://net.tutsplus.com
No hace nada diferente a lo que ya estábamos haciendo con Phantom, Casper solo nos brinda una buena API (con algunos extras adicionales) para sentarnos sobre Phantom y hace que el código que escribimos sea un poco más detallado y legible, esto es particularmente útil cuando escribes scripts que tienen que navegar por un sitio.
Vamos a sumergirnos en guardar algunas instantáneas de nuestra pantalla..
Voy a comenzar con un archivo llamado casperscreens.js y crear una instancia de Casper. Luego, configure una matriz que contendrá los anchos de visualización deseados en los que queremos capturar capturas de pantalla. Cada elemento de la matriz constará de otra matriz que tendrá el ancho y el alto que queremos configurar.
viewportSizes = [[320,480], [320,568], [600,1024], [1024,768], [1280,800], [1440,900]]
También voy a establecer una var para obtener la URL desde la línea de comandos y luego quiero ejecutar una expresión regular en la URL para crear un directorio para guardar las capturas de pantalla. Solo voy a eliminar la http: // Parte y reemplazar los períodos con guiones. Entonces vamos a correr casper.start ().
saveDir = url.replace (/ [^ a-zA-Z0-9] / gi, '-'). replace (/ ^ https? - + /, "); casper.start ();
Ahora vamos a utilizar un bucle y para cada tamaño de vista, tome una captura de pantalla de la URL especificada. Vamos a configurar la ventana gráfica a los tamaños definidos en el elemento de matriz en el que estamos: abra la URL, espere 5000 milisegundos para asegurarse de que la página se haya cargado y luego capture dos tipos de capturas de pantalla.
El primero es para la altura y el ancho reales definidos, para esto utilizamos el capturar() método que toma dos argumentos: una cadena para el archivo de salida y un argumento de objeto para establecer qué parte de la página se debe recortar. El segundo es para una captura de pantalla completa de la página con solo el ancho definido y lo hacemos usando el captureSelector () método que captura el área dentro del selector definido, en nuestro caso solo estamos usando cuerpo y este método toma dos argumentos, el primero es el nombre del archivo y el segundo el selector.
Si bien la captura de pantalla definida real es útil, he encontrado que también es útil tener una captura de pantalla sin cromos en toda la página, para que pueda ver cómo fluye toda la página..
casper.each (viewportSizes, función (self, viewportSize, i) // establezca dos vars para la altura y el ancho de la ventana gráfica a medida que recorramos cada elemento en la matriz de la ventana gráfica ancho.ve ancho = viewportSize [0], height = viewportSize [1] ; // da un tiempo para que la página cargue casper.wait (5000, function () // configura la ventana gráfica a la altura y el ancho deseados this.viewport (ancho, alto); casper.thenOpen (url, function () this.echo ('Opening at' + width); // Configure dos vars, uno para el guardado de página completa, uno para el viewport real save var FPfilename = saveDir + '/ fullpage-' + width + ".png"; var ACfilename = saveDir + '/' + width + '-' + height + ".png"; // El selector de captura captura todo el cuerpo this.captureSelector (FPfilename, 'body'); // capture se ajusta a una selección definida de página this.capture (nombre de archivo AC, arriba: 0, izquierda: 0, ancho: ancho, altura: altura); este.echo ('instantánea tomada');););); Finalmente llamamos al correr() Método y en la función de devolución de llamada solo voy a hacer un eco de que la captura ha terminado.
casper.run (function () this.echo ('Capturas finalizadas para' + url) .exit ();); El script completo ahora debería verse así:
var casper = require ("casper"). create (), viewportSizes = [[320,480], [320,568], [600,1024], [1024,768], [1280,800], [1440,900]], url = casper.cli.args [0], saveDir = url.replace (/ [^ a-zA-Z0-9] / gi, '-'). replace (/ ^ https? - + /, "); casper .start (); casper.each (viewportSizes, función (self, viewportSize, i) // establezca dos vars para la altura y el ancho de la ventana gráfica a medida que recorramos cada elemento en la matriz de ventanas gráficas ancho = viewportSize [0], altura = viewportSize [1]; // da un tiempo para que la página cargue casper.wait (5000, function () // configura la ventana gráfica a la altura y anchura deseadas this.viewport (ancho, altura); casper.thenOpen ( url, function () this.echo ('Opening at' + width); // Configure dos vars, uno para el guardado de página completa, uno para el viewport real save var FPfilename = saveDir + '/ fullpage-' + width + ".png"; var AC nombre de archivo = saveDir + '/' + width + '-' + height + ".png"; // El selector de captura captura todo el cuerpo this.captureSelector (FPfilename, 'body'); // captura de snaps una selección definida o f la página this.capture (nombre de archivo AC, arriba: 0, izquierda: 0, ancho: ancho, altura: altura); this.echo ('instantánea tomada'); ); ); ); casper.run (function () this.echo ('Capturas finalizadas para' + url) .exit ();); Y ahora podemos ejecutar este script usando el siguiente comando:
casperjs casperscreens.js http://todomvc.com
He elegido capturar algunas pantallas de todomvc.com simplemente porque es un sitio receptivo que puede mostrar el tipo de resultados que estamos buscando.
Ahora, si navega hasta el directorio desde donde se ejecutó el script, verá que se ha creado un nuevo directorio y en su interior están todos sus PNG..
Así que hemos logrado escribir una cantidad bastante pequeña de JavaScript que nos ahorrará muchos problemas, la próxima vez que el jefe o el cliente quieran un montón de capturas de pantalla, al mismo tiempo que proporcionamos un script adicional que podemos agregar a nuestra caja de herramientas al realizar algunas pruebas. . Claro, esto solo nos muestra una representación de WebKit, pero para muchos, eso es lo suficientemente bueno.
Ahora intente integrar esto en su proceso de compilación, ejecútelo junto con sus otras pruebas y use la funcionalidad de captura de pantalla no solo para probar la capacidad de respuesta de su sitio, sino también cómo se ve el viaje de los usuarios en pantallas de diferentes tamaños. Además, echa un vistazo al complemento Grunt grunt-casper si Grunt es parte de tu proceso de construcción.
Si es un fan de CoffeeScript, incluso puede intentar volver a escribir este script con la sintaxis de CoffeeScript, solo asegúrese de que su archivo termine con .café extensión:
casperjs casperscreen.coffee http://example.com
Y ni siquiera tiene que preocuparse por la precompilación de sus scripts CoffeeScript, Casper.
Tanto CasperJS como PhantomJS ofrecen mucho más, así que visite sus respectivos sitios y vea cómo pueden ayudarlo con sus pruebas..
