Covered
Se trata en este documento
Integrando Percy con pruebas de características de Capybara en cualquier framework web de Ruby, incluidos Rails, Sinatra, etc.
Si usted ha escrito característica de pruebas (o «pruebas de IU», «pruebas de aceptación», etc.), sabes lo difícil que puede ser hacerlo bien y conseguir que tu aplicación esté en el estado de interfaz de usuario correcto. Percy Capybara te permite tomarte todo el tiempo que has dedicado a crear tus pruebas de funciones y ampliarlas con capturas de pantalla y pruebas de regresión visual para cubrir todos los cambios visuales en tu aplicación, incluso detrás de estados de interfaz de usuario complejos.
Los ejemplos a continuación asumen que está utilizando RSpec, pero se pueden adaptar fácilmente para otros marcos de prueba.
Perc
Percy Capybara v4
Esta documentación es para Percy Capybara versión 4.0.0 y superior. Las versiones anteriores de Percy Capybara tenían una API diferente e incompatible.
Consulte la guía de actualización a v4 o los documentos antiguos.
Configuración
Añadir esta línea a su Gemfile:
gem 'percy-capybara', '~> 4.0.0'
Y, a continuación, ejecute:
$ bundle install
O instalar usted mismo con la etiqueta gem install percy-capybara
.
También necesitará instalar el agente Percy. Este es un proceso que se ejecuta junto con sus pruebas, cargando instantáneas a Percy en su nombre. Necesitará usar npm para instalarlo.
If
Si su proyecto aún no tiene un archivo
package.json
en el directorio raíz, ejecutenpm init
y siga las instrucciones.package.json
es como un Gemfile para paquetes de nodos.
instalar @percy/agent
localmente para su proyecto:
$ npm install --save-dev @percy/agent
de Este modo se creará un ./node_modules/
directorio que contiene el agente y sus dependencias. El binario ejecutable del agente se ubicará en ./node_modules/.bin/percy
.
A continuación, importe la biblioteca Percy Capybara en los archivos desde los que desea tomar instantáneas:
require 'percy'
Ahora puede usar Percy.snapshot(...)
para generar una instantánea de su prueba:
describe 'Test with visual testing', type: :feature, js: true do it 'loads example.com homepage' do visit 'https://example.com' Percy.snapshot(page, { name: 'example.com homepage' }) endend
El objeto page
que pasa a Percy.snapshot
es el objeto Capybara::Session
que representa la página web bajo prueba. Debería estar disponible en sus pruebas de Capibara.
Finalmente, envuelva su comando de ejecución de pruebas en un comando percy exec
. Esto iniciará un agente de Percy local para recibir instantáneas de sus pruebas y cargarlas en su panel de Percy.
Antes de poder ejecutar Percy con éxito, se debe establecer la variable de entorno PERCY_TOKEN
:
# Windows$ set PERCY_TOKEN=<your token here># Unix $ export PERCY_TOKEN=<your token here>
Puede invocar percy utilizando su ruta de acceso completa (normalmente ./node_modules/.bin/percy
), o llamando a npx percy
(npx es una utilidad de nodos que le permite ejecutar binarios de paquetes). Si está utilizando una versión de npm anterior a la 5.2 que no es compatible con npx, puede usar $(npm bin)/percy
en su lugar.
Por ejemplo, si está utilizando RSpec para ejecutar sus pruebas, su nuevo comando de prueba se convierte en:
$ npx percy exec -- rspec
Tenga en cuenta el doble guion, --
, entre npx percy exec
y su comando de ejecución de prueba.
Querrá agregar este comando npx percy exec -- <test runner>
como la nueva forma de que su sistema de CI ejecute sus pruebas.
Eso es todo! Ahora, cada vez que se ejecute su CI, se cargarán instantáneas de la aplicación en ese estado en Percy para realizar pruebas visuales.
Configuración
Percy.snapshot(page)Percy.snapshot(page, options)
page
es el Capybara::Session
objeto que representa la página web que desea instantánea. Requerir.
options
es opcional hash, que pueden incluir:
-
name
: Una cadena que identifica esta instantánea. Puede ser cualquier cadena que tenga sentido para identificar la página y su estado. Tiene que ser único y seguir siendo el mismo en todas las versiones. Si no lo proporcionas, Percy usará la URL completa de la página bajo prueba. Si está tomando varias instantáneas con la misma URL, deberá proporcionar manualmente los nombres de las instantáneas para desambiguar entre las dos instantáneas. Para obtener más información sobre cómo generar nombres de instantáneas, consulte Nombres de instantáneas generados automáticamente. -
widths
: Una matriz de enteros que representan los anchos del navegador (en píxeles) en los que desea tomar instantáneas. -
min_height
: Un entero que especifica la altura mínima resultante de la instantánea (snapshot, se podría volver a ser mayor que este valor, dependiendo del contenido de la página). El valor predeterminado es 1024px. -
percy_css
: Una cadena que contiene CSS específico de Percy que se aplicará a esta instantánea. -
request_headers
: Un objeto que contiene encabezados HTTP que se enviarán para cada solicitud realizada durante la detección de activos para esta instantánea.
Ejemplos
Percy.snapshot(page, { name: 'Responsive snapshot', widths: })Percy.snapshot(page, { min_height: 2000 })
Configuración global
También puede configurar Percy para que use las mismas opciones en todas las instantáneas. Para ver la configuración compatible, incluidos los anchos, lea nuestros documentos de configuración del SDK
Esperando elementos con Capybara
Capybara tiene un sólido sistema de espera interno que se puede usar para esperar de manera eficiente a que aparezcan ciertos elementos de página antes de continuar. Nunca debería tener que escribir una llamada flaky sleep
con Capybara.
Con pruebas RSpec
expect(page).to have_css('#new-project')expect(page).to have_content('New Project')
Esto esperará de manera eficiente a que exista el elemento #new-project
.
Sin RSpec
Puede utilizar los métodos genéricos has_no_css?
has_no_content?
has_no_xpath?
para asegurarse de que el estado de la página es correcto antes de continuar. Probablemente querrá generar una excepción para detener la ejecución si la consulta para el elemento devuelve true.
raise 'element missing!' if page.has_no_css?('#new-project')raise 'element missing!' if page.has_no_content?('New Project')
Más información
- https://github.com/teamcapybara/capybara#querying
- https://github.com/teamcapybara/capybara#asynchronous-javascript-ajax-and-friends
Solución de problemas
Estilos faltantes
Si a tus capturas de pantalla le faltan estilos y estás usando Webpacker para crear activos de front-end de tus aplicaciones, tendrás que configurarlo para extraer el CSS al compilar para pruebas. De forma predeterminada, Webpack generará CSS como un activo blob
, que no se puede descubrir ni guardar cuando estamos descubriendo activos. En su archivo de configuración de webpacker, deberá especificar extract_css: true
:
test: ... # Extract and emit a css file extract_css: true