👍

Coperto in questo documento

Integrazione di Percy con Capybara feature test in qualsiasi framework Ruby web inclusi Rails, Sinatra, ecc.

Se hai scritto funzionalità di test (o “UI test”, “prove di accettazione”, etc.), sai quanto può essere difficile farli bene e ottenere la tua app nello stato dell’interfaccia utente corretto. Percy Capybara ti consente di dedicare tutto il tempo che hai speso a costruire i tuoi test di funzionalità ed espanderli con screenshot e test di regressione visiva per coprire tutti i cambiamenti visivi nella tua app, anche dietro stati dell’interfaccia utente complessi.

Gli esempi seguenti presuppongono che si stia utilizzando RSpec, ma possono essere facilmente adattati per altri framework di test.

🚧

Percy Capybara v4

Questa documentazione è per Percy Capybara versione 4.0.0 e successive. Le versioni precedenti di Percy Capybara avevano un’API diversa e incompatibile.

Vedere la guida all’aggiornamento alla v4 o i vecchi documenti.

Imposta

Aggiungi questa riga al Gemfile dell’applicazione:

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

E poi esegui:

$ bundle install

O installalo tu stesso con gem install percy-capybara.

Sarà inoltre necessario installare l’agente Percy. Questo è un processo che viene eseguito insieme ai test, caricando istantanee a Percy per tuo conto. Sarà necessario utilizzare npm per installarlo.

Se il progetto non dispone già di un file package.jsonnella directory principale, eseguire npm init e seguire le istruzioni. package.json è come un Gemfile per i pacchetti di nodi.

Per installare@percy/agent localmente per il progetto:

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

Si creerà una directory./node_modules/ contenente l’agente e le sue dipendenze. Il binario eseguibile dell’agente si troverà in ./node_modules/.bin/percy.

Avanti, importazione Percy Capibara libreria nel file(s) da cui si desidera scattare istantanee:

require 'percy'

Ora è possibile utilizzare Percy.snapshot(...) per generare un’istantanea dal test:

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 oggetto si passa Percy.snapshot è il Capybara::Session oggetto che rappresenta la pagina web sotto test. Dovrebbe essere disponibile nei test di Capibara.

Infine, avvolgere il comando test runner in unpercy exec comando. Questo avvierà un agente Percy locale per ricevere istantanee dai test e caricarle sul cruscotto Percy.

Prima di eseguire correttamente Percy, il PERCY_TOKEN variabile di ambiente deve essere impostato:

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

È possibile richiamare percy utilizzando il suo percorso completo (in genere ./node_modules/.bin/percy), o chiamando il numero npx percy (npx è un Nodo di utilità che consente di eseguire un pacchetto di file binari). Se si utilizza una versione npm precedente alla 5.2 che non supporta npx, è possibile utilizzare $(npm bin)/percy.

Ad esempio, se stai usando RSpec per eseguire i tuoi test, il tuo nuovo comando di test diventa:

$ npx percy exec -- rspec

Nota il doppio trattino,--, tranpx percy exec e il tuo comando di test run.

Ti consigliamo di aggiungere questo comandonpx percy exec -- <test runner> come nuovo modo per il tuo sistema CI di eseguire i test.

Questo è tutto! Ora, ogni volta che viene eseguito il CI, le istantanee dell’app in quello stato verranno caricate su Percy per i test visivi!

Configurazione

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

page è l’oggetto Capybara::Session che rappresenta la pagina web che si desidera snapshot. Necessario.

options è un hash opzionale che può includere:

• name: una stringa che identifica questa istantanea. Può essere qualsiasi stringa che abbia senso per te identificare la pagina e il suo stato. Deve essere unico e rimanere lo stesso tra le build. Se non lo fornisci, Percy utilizzerà l’URL completo della pagina in prova. Se si scattano più istantanee con lo stesso URL, è necessario fornire manualmente i nomi delle istantanee per disambiguare tra le due istantanee. Per ulteriori dettagli sulla generazione di nomi di snapshot, vedere Nomi di snapshot generati automaticamente.
• widths: Un array di numeri interi che rappresentano le larghezze del browser (in pixel) a cui si desidera scattare istantanee.
• min_height: Un numero intero che specifica l’altezza minima dell’istantanea risultante (l’istantanea potrebbe diventare superiore a questo valore, a seconda del contenuto della pagina). Il valore predefinito è 1024px.
• percy_css: Una stringa contenente CSS specifici di Percy che verrà applicata a questa istantanea.
• request_headers: Un oggetto contenente intestazioni HTTP da inviare per ogni richiesta effettuata durante il rilevamento delle risorse per questa istantanea.

Esempi

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

Configurazione globale

È inoltre possibile configurare Percy per utilizzare le stesse opzioni su tutte le istantanee. Per vedere la configurazione supportata, incluse le larghezze, leggi i nostri documenti di configurazione SDK

In attesa di elementi con Capybara

Capybara ha un robusto sistema di attesa interno che può essere utilizzato per attendere in modo efficiente la comparsa di determinati elementi della pagina prima di continuare. Non dovresti mai aver bisogno di scrivere una chiamata flaky sleep con Capybara.

Con i test RSpec

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

Questo attenderà in modo efficiente l’elemento#new-project.

Senza RSpec

È possibile utilizzare i metodi generici di Capybarahas_no_css?has_no_content?has_no_xpath? per assicurarsi che lo stato della pagina sia corretto prima di continuare. Probabilmente vorrai sollevare un’eccezione per interrompere l’esecuzione se la query per l’elemento restituisce true.

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

Ulteriori informazioni

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

Risoluzione dei problemi

Mancanti stili

Se il tuo screenshot sono mancanti stili e si sta utilizzando Webpacker per costruire le tue applicazioni di front-end di attività, è necessario configurarlo per estrarre il CSS quando l’edificio per le prove. Per impostazione predefinita, Webpack genererà CSS come risorsablob, che non può essere scoperta o salvata quando si esegue la scoperta delle risorse. Nel file di configurazione di webpacker è necessario specificareextract_css: true:

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