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)

Percy.snapshot(page, { name: 'Responsive snapshot', widths: })Percy.snapshot(page, { min_height: 2000 })

expect(page).to have_css('#new-project')expect(page).to have_content('New Project')

raise 'element missing!' if page.has_no_css?('#new-project')raise 'element missing!' if page.has_no_content?('New Project')

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