Cómo instalar y configurar Wraith

¿Qué es Espectro?

Wraith es una herramienta de prueba de regresión visual que utiliza comparaciones de capturas de pantalla para evaluar las diferencias visuales en un sitio web a lo largo del tiempo. Actualmente está alojado en GitHub y disponible bajo un Apache Licencia 2.0 de código abierto.

¿Quién se beneficia del uso de Wraith?

Wraith se usa a menudo para garantizar que los nuevos cambios no afecten negativamente el diseño de un sitio web de producción. Puede ejecutar Wraith para comparar el resultado de cada página en un sitio web.

requisitos previos

Wraith utiliza varios programas de terceros para funcionar correctamente. En este tutorial, instalaremos Wraith en Ubuntu 18.04. Para instalarlo, primero debemos instalar las dependencias a continuación.

  • Rubí
  • imagenmagia
  • Al menos uno de los siguientes navegadores:
    • FantasmaJS
    • CasperJS
    • SlimerJS

Paso 1. Instalar Ruby

Ruby es un lenguaje de programación dinámico de código abierto. Usaremos una instalación simple durante este proceso de instalación. Si desea una instalación completa y avanzada de Ruby, puede seguir este enlace al artículo sobre cómo instalar Ruby on Rails.

                      
                        [[email protected] ~]# apt-get install ruby-full
Reading package lists... Done
Building dependency tree       
Reading state information... Done
The following additional packages will be installed:
  fonts-lato javascript-common libgmp-dev libgmpxx4ldbl libjs-jquery libruby2.5 rake ri ruby ruby-dev ruby-did-you-mean
  ruby-minitest ruby-net-telnet ruby-power-assert ruby-test-unit ruby2.5 ruby2.5-dev ruby2.5-doc rubygems-integration unzip zip
Suggested packages:
  apache2 | lighttpd | httpd gmp-doc libgmp10-doc libmpfr-dev bundler
The following NEW packages will be installed:
  fonts-lato javascript-common libgmp-dev libgmpxx4ldbl libjs-jquery libruby2.5 rake ri ruby ruby-dev ruby-did-you-mean
  ruby-full ruby-minitest ruby-net-telnet ruby-power-assert ruby-test-unit ruby2.5 ruby2.5-dev ruby2.5-doc rubygems-integration
  unzip zip
0 upgraded, 22 newly installed, 0 to remove and 76 not upgraded.
Need to get 8701 kB of archives.
After this operation, 49.3 MB of additional disk space will be used.
Do you want to continue? [Y/n] Y
...
...
...
Setting up ruby-full (1:2.5.1) ...
Processing triggers for man-db (2.8.3-2ubuntu0.1) ...
Processing triggers for fontconfig (2.12.6-0ubuntu2) ...
Processing triggers for mime-support (3.60ubuntu1) ...
Processing triggers for libc-bin (2.27-3ubuntu1) ...
[email protected]:~#
                      
                    

Después de instalar Ruby, podemos verificar la versión usando el siguiente comando.

                      
                        [email protected]:~# ruby --version
ruby 2.5.1p57 (2018-03-29 revision 63029) [x86_64-linux-gnu]
[email protected]:~# 
                      
                    

Paso 2. Verifique si ImageMagick está instalado

ImageMagick es un conjunto de programas para leer y editar archivos en formato gráfico. Es posible que venga preinstalado con su versión de Ubuntu, pero aun así lo verificaremos para asegurarnos de que esté instalado. El resultado debe ser similar al siguiente si ImageMagick no está instalado.

                      
                        [email protected]:~# convert --version
Command 'convert' not found, but can be installed with:

apt install imagemagick-6.q16                
apt install graphicsmagick-imagemagick-compat
apt install imagemagick-6.q16hdri            
[email protected]:~#
                      
                    

Prosigamos e instalemos los requisitos previos para ImageMagick y luego ImageMagick.

                      
                        [email protected]:~# apt-get install php php-common gcc
Reading package lists... Done
Building dependency tree       
Reading state information... Done
gcc is already the newest version (4:7.4.0-1ubuntu2.3).
gcc set to manually installed.
The following additional packages will be installed:
  apache2 apache2-bin apache2-data apache2-utils libapache2-mod-php7.2 libapr1 libaprutil1 libaprutil1-dbd-sqlite3
  libaprutil1-ldap liblua5.2-0 libsodium23 php7.2 php7.2-cli php7.2-common php7.2-json php7.2-opcache php7.2-readline
Suggested packages:
  www-browser apache2-doc apache2-suexec-pristine | apache2-suexec-custom php-pear
The following NEW packages will be installed:
  apache2 apache2-bin apache2-data apache2-utils libapache2-mod-php7.2 libapr1 libaprutil1 libaprutil1-dbd-sqlite3
  libaprutil1-ldap liblua5.2-0 libsodium23 php php-common php7.2 php7.2-cli php7.2-common php7.2-json php7.2-opcache
  php7.2-readline
0 upgraded, 19 newly installed, 0 to remove and 76 not upgraded.
Need to get 5724 kB of archives.
After this operation, 24.5 MB of additional disk space will be used.
Do you want to continue? [Y/n] Y
...
...
...
Setting up php7.2-cli (7.2.24-0ubuntu0.18.04.3) ...
update-alternatives: using /usr/bin/php7.2 to provide /usr/bin/php (php) in auto mode
update-alternatives: using /usr/bin/phar7.2 to provide /usr/bin/phar (phar) in auto mode
update-alternatives: using /usr/bin/phar.phar7.2 to provide /usr/bin/phar.phar (phar.phar) in auto mode

Creating config file /etc/php/7.2/cli/php.ini with new version
Setting up libapache2-mod-php7.2 (7.2.24-0ubuntu0.18.04.3) ...

Creating config file /etc/php/7.2/apache2/php.ini with new version
Module mpm_event disabled.
Enabling module mpm_prefork.
apache2_switch_mpm Switch to prefork
apache2_invoke: Enable module php7.2
Setting up php7.2 (7.2.24-0ubuntu0.18.04.3) ...
Setting up php (1:7.2+60ubuntu1) ...
Processing triggers for systemd (237-3ubuntu10.33) ...
Processing triggers for man-db (2.8.3-2ubuntu0.1) ...
Processing triggers for ufw (0.36-0ubuntu0.18.04.1) ...
Processing triggers for ureadahead (0.100.0-21) ...
Processing triggers for libc-bin (2.27-3ubuntu1) ...
[email protected]:~# 
                      
                    

El comando para instalar ImageMagick es el siguiente.

                      
                        [email protected]:~# apt-get install php-imagick imagemagick-6.q16
Reading package lists... Done
Building dependency tree       
Reading state information... Done
The following additional packages will be installed:
  fonts-droid-fallback fonts-noto-mono ghostscript gsfonts imagemagick-6-common libcupsfilters1 libcupsimage2 libfftw3-double3
  libgs9 libgs9-common libijs-0.35 libjbig2dec0 liblqr-1-0 libltdl7 libmagickcore-6.q16-3 libmagickwand-6.q16-3 libpaper-utils
  libpaper1 ttf-dejavu-core
Suggested packages:
  fonts-noto ghostscript-x libfftw3-bin libfftw3-dev libmagickcore-6.q16-3-extra
The following NEW packages will be installed:
  fonts-droid-fallback fonts-noto-mono ghostscript gsfonts imagemagick-6-common libcupsfilters1 libcupsimage2 libfftw3-double3
  libgs9 libgs9-common libijs-0.35 libjbig2dec0 liblqr-1-0 libltdl7 libmagickcore-6.q16-3 libmagickwand-6.q16-3 libpaper-utils
  libpaper1 php-imagick ttf-dejavu-core
0 upgraded, 20 newly installed, 0 to remove and 76 not upgraded.
Need to get 15.5 MB of archives.
After this operation, 49.0 MB of additional disk space will be used.
Do you want to continue? [Y/n] Y
...
...
...
Setting up libgs9-common (9.26~dfsg+0-0ubuntu0.18.04.12) ...
Setting up libpaper1:amd64 (1.1.24+nmu5ubuntu1) ...

Creating config file /etc/papersize with new version
Setting up imagemagick-6-common (8:6.9.7.4+dfsg-16ubuntu6.8) ...
Setting up fonts-droid-fallback (1:6.0.1r16-1.1) ...
Setting up libpaper-utils (1.1.24+nmu5ubuntu1) ...
Setting up gsfonts (1:8.11+urwcyr1.0.7~pre44-4.4) ...
Setting up ttf-dejavu-core (2.37-1) ...
Setting up libfftw3-double3:amd64 (3.3.7-1) ...
Setting up fonts-noto-mono (20171026-2) ...
Setting up libcupsfilters1:amd64 (1.20.2-0ubuntu3.1) ...
Setting up libcupsimage2:amd64 (2.2.7-1ubuntu2.7) ...
Setting up liblqr-1-0:amd64 (0.4.2-2.1) ...
Setting up libjbig2dec0:amd64 (0.13-6) ...
Setting up libltdl7:amd64 (2.4.6-2) ...
Setting up libijs-0.35:amd64 (0.35-13) ...
Setting up libgs9:amd64 (9.26~dfsg+0-0ubuntu0.18.04.12) ...
Setting up libmagickcore-6.q16-3:amd64 (8:6.9.7.4+dfsg-16ubuntu6.8) ...
Setting up ghostscript (9.26~dfsg+0-0ubuntu0.18.04.12) ...
Setting up libmagickwand-6.q16-3:amd64 (8:6.9.7.4+dfsg-16ubuntu6.8) ...
Setting up php-imagick (3.4.3~rc2-2ubuntu4) ...
Processing triggers for man-db (2.8.3-2ubuntu0.1) ...
Processing triggers for fontconfig (2.12.6-0ubuntu2) ...
Processing triggers for libc-bin (2.27-3ubuntu1) ...
[email protected]:~# 
                      
                    

Una vez más, podemos verificar si ImageMagick está instalado ejecutando el siguiente comando.

                      
                        [email protected]:~# convert --version
Version: ImageMagick 6.9.7-4 Q16 x86_64 20170114 https://www.imagemagick.org
Copyright: © 1999-2017 ImageMagick Studio LLC
License: https://www.imagemagick.org/script/license.php
Features: Cipher DPC Modules OpenMP 
Delegates (built-in): bzlib djvu fftw fontconfig freetype jbig jng jpeg lcms lqr ltdl lzma openexr pangocairo png tiff wmf x xml zlib
[email protected]:~#
                      
                    

Paso 3. Instale uno de los siguientes navegadores

A continuación, debemos instalar uno de los tres tipos de navegador necesarios.

  • FantasmaJS
  • CasperJS
  • SlimerJS
  • Chrome (Actualmente usando Selenium WebDriver + Chromedriver para Chrome; Puede apuntar a selectores específicos)

A los efectos de este tutorial, instalaremos PhantomJS. PhantomJS es un navegador muy conocido que se utiliza para interacciones automáticas de páginas. Es una herramienta efectiva para pruebas de sitios web fuera de línea, captura de pantalla, automatización de páginas y monitoreo de redes. También brinda soporte para varios estándares web, incluido el procesamiento DOM, CSS, JSON, Canvas y el selector SVG.

A continuación, actualizaremos nuevamente nuestra lista de paquetes.

                      
                        [email protected]:~# apt-get update
                      
                    

Luego, necesitamos instalar algunas bibliotecas adicionales necesarias para PhantomJS.

                      
                        [email protected]:~# apt-get install build-essential chrpath libssl-dev libxft-dev libfreetype6 libfreetype6-dev libfontconfig1 libfontconfig1-dev -y
...
...
...
Setting up chrpath (0.16-2) ...
Setting up libpthread-stubs0-dev:amd64 (0.3-4) ...
Setting up libpng-tools (1.6.34-1ubuntu0.18.04.2) ...
Setting up libssl-dev:amd64 (1.1.1-1ubuntu2.1~18.04.5) ...
Setting up xorg-sgml-doctools (1:1.11-1) ...
Setting up x11proto-dev (2018.4-4) ...
Setting up pkg-config (0.29.1-0ubuntu2) ...
Setting up xtrans-dev (1.3.5-1) ...
Setting up libxdmcp-dev:amd64 (1:1.1.2-3) ...
Setting up libx11-doc (2:1.6.4-3ubuntu0.2) ...
Setting up zlib1g-dev:amd64 (1:1.2.11.dfsg-0ubuntu2) ...
Setting up x11proto-core-dev (2018.4-4) ...
Setting up libxau-dev:amd64 (1:1.0.8-1) ...
Setting up libxcb1-dev:amd64 (1.13-2~ubuntu18.04) ...
Setting up libx11-dev:amd64 (2:1.6.4-3ubuntu0.2) ...
Setting up libpng-dev:amd64 (1.6.34-1ubuntu0.18.04.2) ...
Setting up libxrender-dev:amd64 (1:0.9.10-1) ...
Setting up libfreetype6-dev:amd64 (2.8.1-2ubuntu2) ...
Setting up libfontconfig1-dev:amd64 (2.12.6-0ubuntu2) ...
Setting up libxft-dev (2.3.2-1) ...
Processing triggers for man-db (2.8.3-2ubuntu0.1) ...
[email protected]:~# 
                      
                    

A continuación, exportemos el archivo.

                      
                        [email protected]:~# export PHANTOM_JS="phantomjs-2.1.1-linux-x86_64"
[email protected]:~#
                      
                    

Ahora, podemos descargar el archivo de instalación de PhantomJS tar.bz2.

                      
                        [email protected]:~# wget https://github.com/Medium/phantomjs/releases/download/v2.1.1/$PHANTOM_JS.tar.bz2
--2020-03-05 14:39:03--  https://github.com/Medium/phantomjs/releases/download/v2.1.1/phantomjs-2.1.1-linux-x86_64.tar.bz2
Resolving github.com (github.com)... 140.82.114.3
Connecting to github.com (github.com)|140.82.114.3|:443... connected.
HTTP request sent, awaiting response... 302 Found
Location: https://github-production-release-asset-2e65be.s3.amazonaws.com/5755891/d55faeca-f27c-11e5-84be-6e92fb868e05 [following]
--2020-03-05 14:39:04--  https://github-production-release-asset-2e65be.s3.amazonaws.com/5755891/d55faeca-f27c-11e5-84be-6e92fb868e05
Resolving github-production-release-asset-2e65be.s3.amazonaws.com (github-production-release-asset-2e65be.s3.amazonaws.com)... 52.217.46.108
Connecting to github-production-release-asset-2e65be.s3.amazonaws.com (github-production-release-asset-2e65be.s3.amazonaws.com)|52.217.46.108|:443... connected.
HTTP request sent, awaiting response... 200 OK
Length: 23415665 (22M) [application/octet-stream]
Saving to: ‘phantomjs-2.1.1-linux-x86_64.tar.bz2’

phantomjs-2.1.1-linux-x86_64.tar 100%[=======================================================>]  22.33M  61.0MB/s    in 0.4s    

2020-03-05 14:39:04 (61.0 MB/s) - ‘phantomjs-2.1.1-linux-x86_64.tar.bz2’ saved [23415665/23415665]

[email protected]:~# 
                      
                    

A continuación, extraigamos el archivo.

                      
                        tar xvjf $PHANTOM_JS.tar.bz2
                      
                    

En el futuro, moveremos la carpeta phantomjs-2.1.1-linux-x86_64/ a /usr/local/share.

                      
                        [email protected]:~# mv $PHANTOM_JS /usr/local/share
                      
                    

Ahora, podemos vincular el binario phantomjs a bin.

                      
                        [email protected]:/usr/local/share# ln -sf /usr/local/share/$PHANTOM_JS/bin/phantomjs /usr/local/bin
[email protected]:/usr/local/share#
                      
                    

Finalmente, revisemos la instalación para ver si la versión que necesitamos está instalada.

                      
                        [email protected]:/usr/local/share# phantomjs --version
2.1.1
[email protected]:/usr/local/share#
                      
                    

Paso 4. Instalar Espectro

Procedamos con la instalación de Wraith.

                      
                        [email protected]:~# gem install wraith
[email protected]:/usr/local/share# gem install wraith
Fetching: image_size-2.0.2.gem (100%)
Successfully installed image_size-2.0.2
Fetching: mini_magick-4.10.1.gem (100%)
Successfully installed mini_magick-4.10.1
Fetching: robotex-1.0.0.gem (100%)
Successfully installed robotex-1.0.0
Fetching: mini_portile2-2.4.0.gem (100%)
Successfully installed mini_portile2-2.4.0
Fetching: nokogiri-1.10.9.gem (100%)
Building native extensions. This could take a while...
...
...
...
Parsing documentation for wraith-4.2.4
Installing ri documentation for wraith-4.2.4
Done installing documentation for image_size, mini_magick, robotex, mini_portile2, nokogiri, anemone, log4r, thor, parallel, childprocess, rubyzip, selenium-webdriver, io-like, archive-zip, chromedriver-helper, wraith after 5 seconds
16 gems installed
[email protected]:/usr/local/share#
                      
                    

Nuevamente, verifiquemos la versión de Wraith instalada.

                      
                        [email protected]:~# wraith --version
4.2.4
[email protected]:~#
                      
                    

Configurar Espectro

Primero, necesitamos crear una carpeta de proyecto.

                      
                        mkdir -p /home/user/wraith
                      
                    

Ahora, cambiemos los directorios a nuestra carpeta de proyecto.

                      
                        [email protected]:~# cd /home/user/wraith
                      
                    

A continuación, podemos usar el comando wraith para configurar las carpetas y los archivos necesarios en nuestra carpeta de proyecto.

                      
                        [email protected]:/home/user/wraith# wraith setup
      create  configs
      create  configs/capture.yaml
      create  configs/history.yaml
      create  configs/spider.yaml
      create  javascript
      create  javascript/cookies_and_headers--casper.js
      create  javascript/cookies_and_headers--phantom.js
      create  javascript/disable_javascript--casper.js
      create  javascript/disable_javascript--phantom.js
      create  javascript/interact--casper.js
      create  javascript/interact--chrome.js
      create  javascript/interact--phantom.js
      create  javascript/wait--casper.js
      create  javascript/wait--chrome.js
      create  javascript/wait--phantom.js
[email protected]:/home/user/wraith# 
[email protected]:/home/user/wraith# ll
total 16
drwxr-xr-x 4 root root 4096 Mar  5 15:32 ./
drwxr-xr-x 3 root root 4096 Mar  5 15:27 ../
drwxr-xr-x 2 root root 4096 Mar  5 15:32 configs/
drwxr-xr-x 2 root root 4096 Mar  5 15:32 javascript/
[email protected]:/home/user/wraith#
                      
                    

El comando wraith crea las carpetas de configuración, plantillas y configuraciones necesarias para nuestros archivos wraith. A continuación, haremos una copia del archivo llamado “config.yaml” ubicado dentro de la carpeta de configuraciones y le daremos un nuevo nombre de archivo llamado “my_project_name.yaml”. Luego, podemos usar vim para agregar la configuración que queremos emplear para comparar nuestros sitios.

                      
                        [email protected]:/home/user/wraith# cp configs/capture.yaml configs/my_project_name.yaml

[email protected]:/home/user/wraith# vim configs/capture.yaml
                      
                    

A continuación se muestra una vista completa del archivo.

                      
                        # (required) The engine to run Wraith with. Examples: 'phantomjs', 'casperjs', 'slimerjs'
browser: “phantomjs”

# (required) The domains to take screenshots of.
domains:
  current:  “https://www.googlesyndication.com”
  new:      “https://develop.googlesyndication.com”

# (required) The paths to capture. All paths should exist for both of the domains specified above.
paths:
  home:     /
  about:    /about
  contact:  /get-in-touch

# (required) Screen widths (and optional height) to resize the browser to before taking the screenshot.
screen_widths:
  - 320
  - 600x768
  - 768
  - 1024
  - 1280

# (required) The directory that your screenshots will be stored in
directory: 'shots'
                      
                    

Para configurar el archivo “my_project_name.yaml”, hay seis parámetros necesarios que debemos ajustar (como puede ver arriba).

  • navegador
  • dominios
    • Actual
    • nuevo
  • caminos:
    • casa: /
    • sobre: ​​/sobre
    • contacto: /ponerse en contacto
  • anchos_de_pantalla
  • directorio
  • pelusa

Este es el título del cuadro. El formato de archivo yaml es sensible al espacio, por lo que las configuraciones como las entradas de “Dominio” y “Ruta” en el archivo deben estar espaciadas como se muestra en su editor.

También hay varias otras configuraciones opcionales que podemos modificar para satisfacer nuestras necesidades específicas.

                      
                        # (optional) JavaScript file to execute before taking screenshot of every path. Default: nil
before_capture: 'javascript/disable_javascript--phantom.js'

# (optional) The maximum acceptable level of difference (in %) between two images before Wraith reports a failure. Default: 0
threshold: 5

# (optional) Specify the template (and generated thumbnail sizes) for the gallery output.
gallery:
  template: 'slideshow_template' # Examples: 'basic_template' (default), 'slideshow_template'
  thumb_width:  200
  thumb_height: 200

# (optional) Choose which results are displayed in the gallery, and in what order. Default: alphanumeric
# Options:

#   alphanumeric - all paths (with or without a difference) are shown, sorted by path

#   diffs_first - all paths (with or without a difference) are shown, sorted by difference size (largest first)

#   diffs_only - only paths with a difference are shown, sorted by difference size (largest first)

# Note: different screen widths are always grouped together.
mode: diffs_first

# (optional) Set the number of threads to use when saving images. Raising this value can improve performance, but very high
# values can lead to server connection issues. Set to around 1.5 the available CPU cores for best performance. Default: 8
threads: 8

                      
                    

Una vez que agregue su configuración específica, escriba :wq en vim para guardar el archivo.

¿Cómo se utiliza Wraith?

Wraith tiene dos modos principales para elegir:

  • “capturar”
  • “historia”

El modo de captura es útil para comparar versiones de un sitio de desarrollo y un sitio en vivo. Para utilizar esto, podemos especificar dos dominios dentro de nuestro archivo yaml, la cantidad de rutas, así como los anchos de pantalla, y luego podemos ejecutar la “captura de espectros”.

                      
                        [email protected]:~# wraith capture configs/capture.yaml
Config validated. No serious issues found.
Creating Folders
SAVING IMAGES
Loading https://www.googlesyndication.com/ at dimensions: 320×1500
Loading https://develop.googlesyndication.com/ at dimensions: 320×1500
Loading https://www.googlesyndication.com/ at dimensions: 768×1500
Loading https://develop.googlesyndication.com/ at dimensions: 600×768
Loading https://www.googlesyndication.com/ at dimensions: 600x768
Loading https://develop.googlesyndication.com/ at dimensions: 1024×1500
Loading https://www.googlesyndication.com/ at dimensions: 1024×1500
Loading https://develop.googlesyndication.com/ at dimensions: 768×1500
...
...
...
Snapping https://www.googlesyndication.com/ at: 320×1500
Snapping https://www.googlesyndication.com/ at: 768×1500
Snapping https://www.googlesyndication.com/ at: 600×768
Snapping https://www.googlesyndication.com/ at: 1024×1500

Traceback (most recent call last):
	6: from /var/lib/gems/2.5.0/gems/parallel-1.19.1/lib/parallel.rb:209:in `block (3 levels) in in_threads'
	5: from /var/lib/gems/2.5.0/gems/parallel-1.19.1/lib/parallel.rb:359:in `block in work_in_threads'
	4: from /var/lib/gems/2.5.0/gems/parallel-1.19.1/lib/parallel.rb:518:in `with_instrumentation'
	3: from /var/lib/gems/2.5.0/gems/parallel-1.19.1/lib/parallel.rb:360:in `block (2 levels) in work_in_threads'
	2: from /var/lib/gems/2.5.0/gems/parallel-1.19.1/lib/parallel.rb:509:in `call_with_index'
	1: from /var/lib/gems/2.5.0/gems/wraith-4.2.4/lib/wraith/save_images.rb:80:in `block in parallel_task'
/var/lib/gems/2.5.0/gems/wraith-4.2.4/lib/wraith/save_images.rb:89:in `rescue in block in parallel_task'
[email protected]:~# 
                      
                    

El otro formato es el modo Historial. Usando esta opción, podemos comparar el mismo dominio a lo largo del tiempo. Se utiliza para verificar si su sitio se ve igual con el tiempo o si algo ha cambiado. Útil cuando su sitio utiliza componentes de terceros.

En este modo, puede especificar un dominio, cualquier cantidad de rutas y anchos de pantalla. Debe asegurarse de configurar la propiedad history_dir y luego ejecutar la historia de creación para generar capturas de pantalla básicas. Luego podemos agregar nuevas capturas de pantalla para compararlas con las anteriores.

Independientemente del modo que utilice, hay ciertas opciones de configuración que siguen siendo aplicables a ambos modos.

Galería y Salida

Después de capturar cada captura de pantalla, Wraith verificará y luego mostrará la información necesaria en un diff.png y data.txt. El archivo data.txt mostrará la cantidad de píxeles de cada archivo que haya cambiado. La galería está disponible para ver cada imagen, después de comparar todas las imágenes.

Funcionalidad de araña

En esta modalidad, Wraith rastreará una página o sitio. Puedes elegir tu camino de dos maneras.

  1. Puede especificar las rutas manualmente o,
  2. Haga que Wraith rastree su sitio web para determinar las rutas por usted.

Para que Wraith rastree un sitio por nosotros, simplemente tenemos que eliminar la propiedad ‘paths’ en el archivo .yaml y luego especificar la propiedad ‘imports’ en el archivo .yaml.

                      imports: "spider_paths.yml"​
                    

Luego, podemos hacer que Wraith rastree el dominio.

                      wraith spider my_config.yaml
                    

Esto crea un archivo llamado spider_paths.yml dentro del mismo directorio que nuestro my_project_name.yaml. Ahora, podemos ejecutar nuestros comandos de Wraith como si hubiéramos especificado las rutas manualmente.

                      
                        [email protected]:~# wraith capture my_config.yml
                      
                    

Comandos de Espectros

Aquí hay una lista completa de los comandos Wraith disponibles.

                      
                        [email protected]:/# wraith
Commands:
  wraith capture [config_name] # Capture paths against two domains, compare them, generate gallery
  wraith compare_images [config_name] # compares images to generate diffs
  wraith copy_base_images [config_name] # copies the required base images over for comparison with latest images
  wraith crop_images [config_name] # crops images to the same height
  wraith generate_gallery [config_name] # create page for viewing images
  wraith generate_thumbnails [config_name] # create thumbnails for gallery
  wraith help [COMMAND]  Describe available commands or one specific command
  wraith history [config_name] # Setup a baseline set of shots
  wraith info # Show various info about your system
  wraith latest [config_name] # Capture new shots to compare with baseline
  wraith multi_capture [filelist] # A Batch of Wraith Jobs
  wraith reset_shots [config_name] # removes all the files in the shots folder
  wraith save_images [config_name] # captures screenshots
  wraith setup # creates config folder and default config
  wraith setup_folders [config_name] # create folders for images
  wraith spider [config_name] # crawls a site for paths and stores them to YML file
  wraith validate [config_name] # checks your configuration and validates that all required properties exist
  wraith version # Show the version of Wraith

[email protected]:/# 
                      
                    

Para ver una descripción general rápida de su sistema, podemos ejecutar el siguiente comando.

                      
                        [email protected]:/# wraith info
DEBUG: #################################################
DEBUG:   Command run:        info
DEBUG:   Wraith version:     4.2.4
DEBUG:   Ruby version:       ruby 2.5.1p57 (2018-03-29 revision 63029) [x86_64-linux-gnu]
DEBUG:   ImageMagick:        Version: ImageMagick 6.9.7-4 Q16 x86_64 20170114 https://www.imagemagick.org
DEBUG:   PhantomJS version:  2.1.1
DEBUG:   chromedriver version:  ChromeDriver 81.0.4044.20 (f006328e39a9769596eb506c8841c3004b24e747-refs/branch-heads/[email protected]{#244})
DEBUG:   CasperJS version:   CasperJS not installed
DEBUG: #################################################
[email protected]:/# 
                      
                    

Conclusión

Wraith es una excelente herramienta que nos permite no solo automatizar el proceso de comparación a través de la creación de capturas de pantalla, sino que también compara esas capturas de pantalla y crea diferencias para su posterior análisis y examen.

¿Todavía tiene preguntas sobre Wraith y cómo esta herramienta puede ser más útil en sus pruebas? Llámanos al 800.580.4985 o abre una chat ¡o tiquete con nosotros para hablar con uno de nuestro equipo de soluciones bien informado o un asesor de hospedaje experimentado hoy!

Related Posts