👍
Dekket i denne doc
Integrere Percy Med Capybara funksjonstester i Noen Ruby web rammeverk inkludert Rails, Sinatra, etc.
hvis du har skrevet funksjonstester (eller «ui-tester», «godkjenningstester» osv.), vet du hvor vanskelig det kan være å få dem riktig og for å få appen din i riktig UI-tilstand. Percy Capybara lar deg ta hele tiden du har brukt på å bygge funksjonstestene dine og utvide dem med skjermbilder og visuelle regresjonstester for å dekke alle de visuelle endringene i appen din, selv bak komplekse UI-tilstander.eksemplene nedenfor antar at Du bruker RSpec, men de kan enkelt tilpasses for andre testrammer.
🚧
Percy Capybara v4
denne dokumentasjonen gjelder Percy Capybara versjon 4.0.0 og nyere. Tidligere versjoner av Percy Capybara hadde EN annen OG inkompatibel API.
Se Oppgradering til v4 guide eller de gamle dokumentene.
Oppsett
Legg til denne linjen i programmets Gemfile:
gem 'percy-capybara', '~> 4.0.0'og kjør deretter:
$ bundle installeller installer det selv med gem install percy-capybara.
Du må også installere Percy-agenten. Dette er en prosess som går sammen med testene dine, laster opp øyeblikksbilder Til Percy på dine vegne. Du må bruke npm for å installere den.
📘
hvis prosjektet ditt ikke allerede har en
package.jsonfil i rotkatalogen, kjørnpm initog følg instruksjonene.package.jsoner som En Gemfile For Nodepakker.
for å installere @percy/agent lokalt for prosjektet ditt:
$ npm install --save-dev @percy/agentdette vil skape en ./node_modules/ katalog som inneholder agenten og dens avhengigheter. Agentens kjørbare binære vil bli plassert i ./node_modules/.bin/percy.
importer deretter percy Capybara-biblioteket til filen(e) du vil ta øyeblikksbilder fra:
require 'percy'nå kan du brukePercy.snapshot(...) for å generere et øyeblikksbilde fra testen din:
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' }) endendpage objektet du passerer innPercy.snapshot erCapybara::Session objektet som representerer nettsiden under test. Det bør være tilgjengelig i Capybara tester.
til Slutt, pakk test runner kommandoen i enpercy exec kommando. Dette vil starte en lokal Percy agent for å motta øyeblikksbilder fra tester og laste dem opp Til percy dashbordet.
før Du kan kjøre Percy, må PERCY_TOKEN miljøvariabelen angis:
# Windows$ set PERCY_TOKEN=<your token here># Unix $ export PERCY_TOKEN=<your token here>du kan starte percy ved å bruke hele banen (typisk ./node_modules/.bin/percy), eller ved å ringe npx percy (npx er en node verktøy Som Lar deg utføre pakken binærfiler). Hvis du bruker en npm-versjon før 5.2 som ikke støtter npx, kan du bruke $(npm bin)/percy i stedet.
Hvis Du for eksempel bruker RSpec til å kjøre testene dine, blir den nye testkommandoen din:
$ npx percy exec -- rspecMerk dobbeltdashen,--, mellomnpx percy execOg testkjøringskommandoen din.
du vil legge til dennenpx percy exec -- <test runner> kommandoen som den nye måten FOR CI-systemet ditt å kjøre testene dine på.
Det er det! Nå, når CI kjører, vil øyeblikksbilder av programmet i den tilstanden bli lastet opp Til Percy for visuell testing!
Konfigurasjon
Percy.snapshot(page)Percy.snapshot(page, options)pageerCapybara::Sessionobjektet som representerer nettsiden du vil ta bilde av. Nødvendig.
options er en valgfri hash som kan inkludere:
-
name: en streng som identifiserer dette øyeblikksbildet. Det kan være en streng som gir mening for deg å identifisere siden og dens tilstand. Det må være unikt og forbli det samme på tvers av bygg. Hvis Du ikke oppgir Det, Vil Percy bruke HELE NETTADRESSEN til siden under test. Hvis du tar flere øyeblikksbilder med samme URL, må du manuelt gi øyeblikksbilde navn for å skille mellom de to øyeblikksbilder. Hvis Du vil ha mer informasjon om generering av snapshot-navn, kan Du se Autogenererte snapshot-navn. -
widths: en rekke heltall som representerer nettleserens bredder (i piksler) der du vil ta øyeblikksbilder. -
min_height: et heltall som angir minimumshøyden for det resulterende stillbildet (stillbildet kan bli høyere enn denne verdien, avhengig av innholdet på siden). Standard til 1024px. -
percy_css: en streng som inneholder Percy spesifikk CSS som vil bli brukt på dette øyeblikksbildet. -
request_headers: et objekt som inneholder HTTP-overskrifter som skal sendes for hver forespørsel som ble gjort under aktivaoppdagelse for dette øyeblikksbildet.
Eksempler
Percy.snapshot(page, { name: 'Responsive snapshot', widths: })Percy.snapshot(page, { min_height: 2000 })Global Konfigurasjon
Du kan også konfigurere Percy til å bruke de samme alternativene over alle øyeblikksbilder. For å se støttet konfigurasjon, inkludert bredder, les VÅRE SDK configuration docs
Venter på elementer Med Capybara
Capybara har et robust internt ventesystem som kan brukes til å effektivt vente på at visse sideelementer skal vises før du fortsetter. Du bør aldri skrive en flaky sleep ring Med Capybara.
Med RSpec-tester
expect(page).to have_css('#new-project')expect(page).to have_content('New Project') dette vil effektivt vente på at#new-project – elementet skal eksistere.
Uten RSpec
Du kan bruke Capybaras generiskehas_no_css?has_no_content?has_no_xpath? metoder for å sikre at sidetilstanden er riktig før du fortsetter. Du vil sannsynligvis ønske å heve et unntak for å stoppe kjøring hvis spørringen for elementet returnerer true.
raise 'element missing!' if page.has_no_css?('#new-project')raise 'element missing!' if page.has_no_content?('New Project')Mer info
- https://github.com/teamcapybara/capybara#queryinghttps://github.com/teamcapybara/capybara#asynchronous-javascript-ajax-and-friends
Feilsøking
manglende stiler
hvis skjermbildene dine mangler stiler, og du bruker webpacker til å bygge dine apps front end-eiendeler, må du konfigurere den for å trekke ut css når du bygger for tester. Som standard vil Webpack generere CSS som en blob ressurs, som ikke kan oppdages eller lagres når vi gjør aktiva oppdagelse. I din webpacker config-fil må du spesifisereextract_css: true:
test: ... # Extract and emit a css file extract_css: true