Lira

omfattet af dette dokument

integrering af Percy med Capybara-funktionstest i enhver Rubin-ramme, herunder Rails, Sinatra osv.

Hvis du har skrevet funktionstest (eller “UI-test”, “accepttest” osv.), du ved, hvor svært det kan være at få dem rigtige og få din app i den rigtige UI-tilstand. Percy Capybara giver dig mulighed for at tage al den tid, du har brugt på at opbygge dine funktionstest, og udvide dem med skærmbilleder og visuelle regressionstest for at dække alle de visuelle ændringer i din app, selv bag komplekse UI-tilstande.

eksemplerne nedenfor antager, at du bruger RSpec, men de kan let tilpasses til andre testrammer.

liter

Percy Capybara v4

denne dokumentation er for Percy Capybara version 4.0.0 og derover. Tidligere versioner af Percy Capybara havde en anden og inkompatibel API.

se vejledningen opgradering til v4 eller de gamle dokumenter.

opsætning

Tilføj denne linje til din applikations Gemfile:

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

og kør derefter:

$ bundle install

eller installer det selv med gem install percy-capybara.

Du skal også installere Percy agent. Dette er en proces, der kører sammen med dine tests, uploade snapshots til Percy på dine vegne. Du skal bruge npm til at installere det.

liter

Hvis dit projekt ikke allerede har en package.json fil i rodmappen, Kør npm init og følg vejledningen. package.json er som en Gemfile til Node pakker.

for at installere@percy/agent lokalt til dit projekt:

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

dette vil oprette en./node_modules/ mappe, der indeholder agenten og dens afhængigheder. Agentens eksekverbare binære vil være placeret i ./node_modules/.bin/percy.

Importer derefter Percy Capybara-biblioteket til de filer, hvorfra du vil tage snapshots:

require 'percy'

nu Kan du brugePercy.snapshot(...) for at generere et øjebliksbillede fra din 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 objekt du passerer ind iPercy.snapshot erCapybara::Session objekt, der repræsenterer hjemmesiden under test. Det skal være tilgængeligt i dine Capybara-tests.

endelig pak din test runner kommando i enpercy exec kommando. Dette vil starte en lokal Percy agent til at modtage snapshots fra dine tests og uploade dem til din Percy dashboard.

før du kan køre Percy, skal PERCY_TOKEN miljøvariablen indstilles:

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

Du kan påberåbe percy ved hjælp af sin fulde sti (typisk ./node_modules/.bin/percy) eller ved at kalde npx percy (node værktøj, der lader dig udføre pakke binære filer). Hvis du bruger en npm-version før 5.2, der ikke understøtter NPK, kan du bruge $(npm bin)/percy i stedet.

Hvis du f.eks. bruger RSpec til at køre dine tests, bliver din nye testkommando:

$ npx percy exec -- rspec

Bemærk dobbelt bindestreg,--, mellemnpx percy exec og din testkørsel kommando.

du vil tilføje dennenpx percy exec -- <test runner> kommando som den nye måde for dit CI-system til at køre dine tests.

det er det! Nu, når din CI kører, vil snapshots af app i denne tilstand blive uploadet til Percy til visuel test!

konfiguration

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

pageer Capybara::Session objekt, der repræsenterer den hjemmeside, du vil snapshot. Nødvendig.

options er en valgfri hash, der kan omfatte:

• name: en streng, der identificerer dette øjebliksbillede. Det kan være enhver streng, der giver mening for dig at identificere siden og dens tilstand. Det skal være unikt og forblive det samme på tværs af bygninger. Hvis du ikke angiver det, bruger Percy den fulde URL til den side, der testes. Hvis du tager flere snapshots med den samme URL, skal du manuelt angive snapshot-navne for at disambiguere mellem de to snapshots. Du kan finde flere oplysninger om generering af snapshot-navne i autogenererede snapshot-navne.
• widths: en række heltal, der repræsenterer bro.serbredderne (i billedpunkter), hvor du vil tage snapshots.
• min_height: et heltal, der angiver minimumshøjden for det resulterende øjebliksbillede (snapshotet kan blive højere end denne værdi afhængigt af indholdet på siden). Standardværdien er 1024 stk.
• percy_css: en streng, der indeholder Percy-specifik CSS, der vil blive anvendt på dette øjebliksbillede.
• request_headers: et objekt, der indeholder HTTP-overskrifter, der skal sendes for hver anmodning foretaget under aktivopdagelse for dette øjebliksbillede.

eksempler

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

Global konfiguration

Du kan også konfigurere Percy til at bruge de samme indstillinger over alle snapshots. For at se understøttet konfiguration, inklusive Bredder, skal du læse vores SDK-konfigurationsdokumenter

venter på elementer med Capybara

Capybara har et robust internt ventesystem, der kan bruges til effektivt at vente på, at visse sideelementer vises, før du fortsætter. Du behøver aldrig at skrive et flakysleep opkald med Capybara.

med RSpec-test

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

dette vil effektivt vente på #new-project elementet at eksistere.

uden RSpec

Du kan bruge capybaras generiskehas_no_css?has_no_content?has_no_xpath? metoder til at sikre, at sidetilstanden er korrekt, før du fortsætter. Du vil sandsynligvis gerne rejse en undtagelse for at stoppe udførelsen, hvis forespørgslen for elementet Returnerer SAND.

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

mere info

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

fejlfinding

manglende stilarter h3 hvis dine skærmbilleder mangler stilarter, og du bruger til at opbygge dine apps frontend-aktiver, skal du konfigurere det til at udtrække CSS, når du bygger til test. Som standard genererer CSS som etblob aktiv, som ikke kan opdages eller gemmes, når vi laver aktivopdagelse. I din konfigurationsfil skal du angive extract_css: true:

.yml

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