Documentación de Percy

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.

CircleCICircleCI

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.jsonen el directorio raíz, ejecute npm 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:

webpacker.yml
test: ... # Extract and emit a css file extract_css: true

Deja una respuesta

Tu dirección de correo electrónico no será publicada.