Portuguese

omfattas av denna doc

integrera Percy med Capybara funktionstester i någon Ruby webbramverk inklusive Rails, Sinatra, etc.

om du har skrivit funktionstester (eller ”UI-tester”, ”acceptanstester” etc.), du vet hur svårt det kan vara att få dem rätt och att få din app i rätt UI-tillstånd. Percy Capybara låter dig ta all tid du har spenderat på att bygga dina funktionstester och utöka dem med skärmdumpar och visuella regressionstester för att täcka alla visuella förändringar i din app, även bakom komplexa GRÄNSSNITTSTILLSTÅND.

exemplen nedan antar att du använder RSpec, men de kan enkelt anpassas för andra testramar.

Ukrainian

Percy Capybara v4

denna dokumentation gäller för Percy Capybara version 4.0.0 och senare. Tidigare versioner av Percy Capybara hade ett annat och oförenligt API.

se guiden uppgradera till v4 eller de gamla dokumenten.

Setup

Lägg till den här raden i din applikations Gemfile:

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

och kör sedan:

$ bundle install

eller installera det själv med gem install percy-capybara.

Du måste också installera Percy-agenten. Detta är en process som körs tillsammans med dina tester, ladda upp ögonblicksbilder till Percy för din räkning. Du måste använda npm för att installera den.

bisexuell

om ditt projekt inte redan har en package.json – fil i rotkatalogen, kör npm init och följ anvisningarna. package.json är som en Gemfil för Nodpaket.

för att installera @percy/agent lokalt för ditt projekt:

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

detta skapar en ./node_modules/ katalog som innehåller agenten och dess beroenden. Agentens körbara binär kommer att finnas i ./node_modules/.bin/percy.

importera sedan Percy Capybara-biblioteket till de filer som du vill ta ögonblicksbilder från:

require 'percy'

Nu kan du användaPercy.snapshot(...) för att skapa en ögonblicksbild från ditt 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

objektetpage som du skickar tillPercy.snapshot är objektetCapybara::Session som representerar webbsidan som testas. Det ska vara tillgängligt i dina Capybara-tester.

slutligen, slå in ditt testlöparkommando i ettpercy exec kommando. Detta startar en lokal Percy-agent för att ta emot ögonblicksbilder från dina tester och ladda upp dem till din Percy-instrumentpanel.

innan du kan köra Percy måste miljövariabelnPERCY_TOKEN ställas in:

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

Du kan anropa percy med hela sökvägen (vanligtvis./node_modules/.bin/percy), eller genom att anropanpx percy (NPX är en nod verktyg som låter dig köra paket binärer). Om du använder en npm-version före 5.2 som inte stöder npx kan du använda $(npm bin)/percy istället.

om du till exempel använder RSpec för att köra dina tester blir ditt nya testkommando:

$ npx percy exec -- rspec

notera dubbelstrecket, --, mellan npx percy exec och ditt testkörningskommando.

du vill lägga till dettanpx percy exec -- <test runner> kommando som det nya sättet för ditt CI-system att köra dina tester.

det är det! Nu, när din CI körs, kommer ögonblicksbilder av appen i det tillståndet att laddas upp till Percy för visuell testning!

konfiguration

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

page ärCapybara::Session objekt som representerar webbsidan du vill ögonblicksbild. Skyldig.

options är en valfri hash som kan innehålla:

• name: en sträng som identifierar denna ögonblicksbild. Det kan vara vilken sträng som helst som är meningsfull för dig att identifiera sidan och dess tillstånd. Det måste vara unikt och förbli detsamma över byggnader. Om du inte anger det kommer Percy att använda hela webbadressen till sidan som testas. Om du tar flera ögonblicksbilder med samma URL måste du manuellt ange ögonblicksbildsnamn för att kunna skilja mellan de två ögonblicksbilderna. Mer information om hur du skapar snapshot-namn finns i autogenererade snapshot-namn.
• widths: en rad heltal som representerar webbläsarens bredder (i pixlar) där du vill ta ögonblicksbilder.
• min_height: ett heltal som anger minsta höjd för den resulterande ögonblicksbilden (ögonblicksbilden kan bli högre än detta värde, beroende på innehållet på sidan). Standardvärdet är 1024px.
• percy_css: en sträng som innehåller Percy specifik CSS som kommer att tillämpas på denna ögonblicksbild.
• request_headers: ett objekt som innehåller HTTP-rubriker som ska skickas för varje begäran som görs under tillgångsupptäckt för denna ögonblicksbild.

exempel

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

Global konfiguration

Du kan också konfigurera Percy för att använda samma alternativ över alla ögonblicksbilder. För att se konfiguration som stöds, inklusive bredder, läs våra SDK-konfigurationsdokument

väntar på element med Capybara

Capybara har ett robust internt väntesystem som kan användas för att effektivt vänta på att vissa sidelement ska visas innan de fortsätter. Du ska aldrig behöva skriva ett fläckigt sleep samtal med Capybara.

med RSpec-tester

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

detta väntar effektivt på att elementet #new-project ska existera.

utan RSpec

Du kan använda capybaras generiskahas_no_css?has_no_content?has_no_xpath? metoder för att se till att sidtillståndet är korrekt innan du fortsätter. Du kommer förmodligen att vilja ta upp ett undantag för att stoppa körningen om frågan för elementet returnerar true.

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

mer information

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

felsökning

saknade stilar

om dina skärmdumpar saknas stilar och du använder webpacker för att bygga dina appar front end tillgångar, måste du konfigurera den för att extrahera CSS när du bygger för tester. Som standard genererar Webpack CSS som enblob – tillgång, som inte kan upptäckas eller sparas när vi gör tillgångsupptäckt. I din webpacker-konfigurationsfil måste du ange extract_css: true:

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