👍

Covered in this doc

Integrating Percy with Capybara feature tests in any Ruby web framework including Rails, Sinatra, etc.

Se você já escreveu recurso de testes (ou “testes de INTERFACE do usuário”, “testes de aceitação”, etc.), você sabe como pode ser difícil para obtê-los direito e para obter o seu aplicativo no estado UI correto. Percy Capybara permite-lhe levar todo o tempo que gastou a construir os seus testes de recursos e expandi-los com imagens e testes de regressão visual para cobrir todas as mudanças visuais no seu aplicativo, mesmo atrás de Estados UI complexos.

os exemplos abaixo assumem que você está usando RSpec, mas eles podem ser facilmente adaptados para outros frameworks de teste.

🚧

Percy Capybara v4

Esta documentação é para Percy Capybara versão 4.0.0 e acima. Versões anteriores de Percy Capybara tinham uma API diferente e incompatível.

ver a actualização para o guia v4 ou os documentos antigos.

Configuração

Adicionar esta linha ao seu aplicativo Gemfile:

gem 'percy-capybara', '~> 4.0.0'

E, em seguida, execute:

$ bundle install

Ou instalá-lo a si mesmo com gem install percy-capybara.

Você também precisará instalar o agente Percy. Este é um processo executado ao lado de seus testes, upload snapshots para Percy em seu nome. Terá de usar o npm para o instalar.

📘

Se o seu projeto já não tem um package.json arquivo no diretório raiz, execute npm init e siga as instruções. package.json é como um Gemfile para pacotes de nós.

instalar @percy/agent localmente para o seu projeto:

$ npm install --save-dev @percy/agent

Isto irá criar uma ./node_modules/ diretório que contém o agente e suas dependências. O executável do agente será localizado em ./node_modules/.bin/percy.

em seguida, importar o Percy Capivara biblioteca em arquivo(s) a partir do qual você deseja tirar fotos:

require 'percy'

Agora você pode usar Percy.snapshot(...) para gerar um instantâneo do seu teste:

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

page objeto que você passar para o Percy.snapshot é o Capybara::Session objeto que representa a página da web em teste. Deve estar disponível nos seus testes de Capibara.finalmente, embrulhe o seu comando de execução de testes num comando percy exec. Isto vai iniciar um agente Percy local para receber fotos dos seus testes e enviá-las para o seu painel Percy.

Antes de você com êxito pode executar Percy, o PERCY_TOKEN variável de ambiente deve ser definido:

# Windows$ set PERCY_TOKEN=<your token here># Unix $ export PERCY_TOKEN=<your token here>

Você pode chamar percy usando o caminho completo (tipicamente ./node_modules/.bin/percy), ou chamando npx percy (npx é um Nó de um utilitário que permite que você executar o pacote de binários). Se estiver a usar uma versão npm antes de 5. 2 que não suporte o npx, poderá usar $(npm bin)/percy em vez disso.

Por exemplo, se você estiver usando RSpec para executar os testes, o novo comando de teste torna-se:

$ npx percy exec -- rspec

Nota o traço duplo, -- entre npx percy exec e o teste de executar o comando.

irá querer adicionar este comando como a nova forma para o seu sistema de CI executar os seus testes.é isso! Agora, sempre que o teu Informador correr, fotos da aplicação nesse estado serão enviadas para o Percy para testes visuais!

Configuração

Percy.snapshot(page)Percy.snapshot(page, options)

page é o Capybara::Session objeto que representa a página da web que você deseja instantâneo. Necessario.

options é um hash opcional que pode incluir:

• name: uma cadeia que identifica este instantâneo. Pode ser qualquer cadeia que faça sentido para você identificar a página e seu estado. Tem de ser único e permanecer o mesmo em todas as construções. Se você não fornecer, Percy vai usar o URL completo da página sob teste. Se você está tomando várias fotos com o mesmo URL, você terá que fornecer manualmente os nomes das fotos, a fim de desambiguar entre as duas fotos. Para mais detalhes sobre a geração de nomes de instantâneos, veja os nomes de instantâneos Autogenerados.
• widths: um conjunto de inteiros que representam as larguras do navegador (em pixels) em que deseja tirar fotografias.
• min_height: um inteiro especificando a altura mínima do instantâneo resultante (o instantâneo pode tornar-se superior a este valor, dependendo do conteúdo da página). O valor por omissão é 1024px.
• percy_css: uma cadeia contendo Percy específico CSS que será aplicada a esta fotografia.
• request_headers: um objecto que contém cabeçalhos HTTP a enviar para cada pedido feito durante a descoberta de activos para esta fotografia.

exemplos

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

configuração Global

Pode também configurar Percy para usar as mesmas opções em todas as imagens. Para ver a configuração suportada, incluindo as larguras, leia os documentos de configuração do SDK

à espera de elementos com Capybara

Capybara tem um sistema de espera interno robusto que pode ser usado para esperar eficientemente que certos elementos da página apareçam antes de continuar. Você nunca deve precisar escrever uma chamada com Capybara .

com os testes rspec

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

Isto irá eficientemente esperar pela existência do elemento#new-project.

Sem RSpec

Você pode usar Capivara genérico has_no_css?has_no_content?has_no_xpath? métodos para certificar-se de que a página estado está correto antes de continuar. Você provavelmente vai querer criar uma exceção para parar a execução se a pesquisa para o elemento retorna verdadeiro.

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

Mais informações

• https://github.com/teamcapybara/capybara#querying
• https://github.com/teamcapybara/capybara#asynchronous-javascript-ajax-and-friends

Resolução de problemas

Falta de estilos

Se suas imagens estão em falta estilos, e você estiver usando Webpacker para construir seus aplicativos de front-end ativos, você precisará configurá-lo para extrair o CSS ao edifício para testes. Por padrão, o Webpack irá gerar CSS como umblob ativo, que não pode ser descoberto ou salvo quando estamos fazendo a descoberta de ativos. No seu ficheiro de configuração do webpacker, terá de indicar extract_css: true: