👍
Něž se v tomto dokumentu
Integrace Percy s Kapybara funkce testy v každém Ruby web rámec, včetně Rails, Sinatra, atd.
Pokud jste napsali funkci, testy (nebo „UI testy“, „přejímací testy“, atd.), víte, jak těžké to může být, aby si je správné a dostat svou aplikaci ve správném stavu uživatelského rozhraní. Percy Kapybara vám umožní vzít celou dobu, kterou jsem strávil budování své funkce testy a rozšířit je s screenshoty a vizuální regrese testy pokrývají všechny vizuální změny ve vaší aplikaci, a to i za složité UI státy.
níže uvedené příklady předpokládají, že používáte RSpec, ale mohou být snadno přizpůsobeny pro jiné testovací rámce.
🚧
Percy Capybara v4
tato dokumentace je pro Percy Capybara verze 4.0.0 a vyšší. Dřívější verze Percy Capybara měl jiný, a nekompatibilní, API.
viz Průvodce upgradem na v4 nebo staré dokumenty.
Nastavení
Přidat tento řádek do své aplikace Gemfile:
gem 'percy-capybara', '~> 4.0.0'A pak spustit:
$ bundle installNebo nainstalovat sami s gem install percy-capybara.
budete také muset nainstalovat agenta Percy. Jedná se o proces, který běží vedle vašich testů a nahrává snímky do Percy vaším jménem. K jeho instalaci budete muset použít npm.
📘
Pokud váš projekt není již
package.jsonsoubor v kořenovém adresáři, spusťtenpm inita postupujte podle pokynů.package.jsonje jako Gemfile pro uzlové balíčky.
instalovat @percy/agent lokálně na vašem projektu:
$ npm install --save-dev @percy/agenttím se vytvoří ./node_modules/ adresář obsahující agent a jeho závislosti. Spustitelný binární soubor agenta bude umístěn v ./node_modules/.bin/percy.
Next, dovoz Percy Kapybara knihovny do souboru(y), ze které chcete snímky pořizovat:
require 'percy'Nyní můžete použít Percy.snapshot(...) vytvořit snímek z vašeho testu:
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 objekt předat do Percy.snapshotCapybara::Session objekt, který představuje webovou stránku pod test. Měl by být k dispozici ve vašich testech na Kapybaru.
nakonec zabalte příkaz test runner do příkazu percy exec. Tím se spustí místní agent Percy, který bude přijímat snímky z vašich testů a nahrávat je na palubní desku Percy.
Než budete moci úspěšně spustit Percy, PERCY_TOKEN proměnné prostředí musí být nastaveno:
# Windows$ set PERCY_TOKEN=<your token here># Unix $ export PERCY_TOKEN=<your token here>můžete vyvolat percy pomocí jeho úplnou cestu (typicky ./node_modules/.bin/percy), nebo zavoláním npx percy (npx je Uzel nástroj, který vám umožní balíček spouštět binární soubory). Pokud používáte verzi npm před 5.2, která nepodporuje npx, můžete místo toho použít $(npm bin)/percy.
například, pokud používáte RSpec spustit vaše testy, váš nový test, příkaz se stává:
$ npx percy exec -- rspecPoznámka: double dash, -- mezi npx percy exec a váš test spustit příkaz.
budete chtít přidat tento příkaz npx percy exec -- <test runner> jako nový způsob, jak váš systém CI spustit testy.
to je ono! Nyní, kdykoli běží váš CI, snímky aplikace v tomto stavu budou nahrány do Percy pro vizuální testování!
Nastavení
Percy.snapshot(page)Percy.snapshot(page, options)pageCapybara::Session objekt, který představuje webovou stránku, kterou chcete snímek. Požadovaný.
options je volitelný hash, které mohou zahrnovat:
-
name: řetězec identifikující tento snímek. Může to být jakýkoli řetězec, který vám dává smysl identifikovat stránku a její stav. Musí to být jedinečné a zůstat stejné napříč stavbami. Pokud ji neposkytnete, Percy použije úplnou adresu URL testované stránky. Pokud užíváte více snímků se stejnou URL, budete muset ručně poskytují snímek jména s cílem rozlišit dva snímky. Další podrobnosti o generování jmen snímků, viz Autogenerované názvy snímků. -
widths: pole celých čísel představujících šířky prohlížeče (v pixelech), ve kterých chcete pořizovat snímky. -
min_height: celé číslo určující minimální výšku výsledného snímku (snapshot mohlo být vyšší, než tato hodnota, v závislosti na obsahu stránky). Výchozí hodnota je 1024px. -
percy_css: řetězec obsahující Percy specifické CSS, který bude použit na tento snímek. -
request_headers: objekt obsahující HTTP hlavičky odeslány pro každý požadavek při zjišťování majetku pro tento snímek.
Příklady
Percy.snapshot(page, { name: 'Responsive snapshot', widths: })Percy.snapshot(page, { min_height: 2000 })Globální nastavení
můžete také nastavit Percy použít stejné možnosti přes všechny snímky. K části podporované konfigurace, včetně šířky, přečtěte si náš SDK konfigurace docs
Čekání na prvky s Kapybara
Kapybara má robustní vnitřní čekat systému, které mohou být použity efektivně čekat na určité prvky stránky se objeví před pokračováním. Nikdy byste neměli potřebovat psát vločkovité sleep volání s Capybarou.
S RSpec zkoušky
expect(page).to have_css('#new-project')expect(page).to have_content('New Project')Tento bude efektivně čekat na #new-project element existovat.
Bez RSpec
můžete použít Kapybara je generic has_no_css?has_no_content?has_no_xpath? metody se ujistěte, že na stránce státu je správné, než budete pokračovat dále. Pravděpodobně budete chtít zvýšit výjimku pro zastavení provádění, pokud dotaz pro prvek vrátí true.
raise 'element missing!' if page.has_no_css?('#new-project')raise 'element missing!' if page.has_no_content?('New Project')Další informace
- https://github.com/teamcapybara/capybara#querying
- https://github.com/teamcapybara/capybara#asynchronous-javascript-ajax-and-friends
Odstraňování problémů
Chybí styly
Pokud vaše screenshoty jsou chybějící styly a používáte Webpacker stavět své aplikace front-end aktiva, budete muset nakonfigurovat tak, aby extrahovat CSS při stavbě na testy. Ve výchozím nastavení Webpack vygeneruje CSS jako blob aktivum, které nelze objevit ani uložit, když provádíme zjišťování aktiv. V konfiguračním souboru webpacker budete muset zadat extract_css: true:
test: ... # Extract and emit a css file extract_css: true