++

ebben a dokumentumban szerepel

Percy integrálása a Capybara funkció tesztekkel bármilyen Ruby web keretrendszerben, beleértve a Rails-t, a Sinatra-t stb.

Ha már írt funkció tesztek (vagy “UI tesztek”, “átvételi tesztek”, stb.), tudod, milyen nehéz lehet, hogy őket jobb, és hogy az alkalmazás a megfelelő UI állapotban. Percy Capybara lehetővé teszi, hogy minden időt töltött épület a funkció tesztek és bővíteni őket screenshotok és vizuális regressziós tesztek, hogy fedezze az összes vizuális változások az alkalmazásban, még mögött összetett UI Államok.

az alábbi példák feltételezik, hogy RSpec-et használ, de könnyen adaptálhatók más tesztelési keretrendszerekhez.

++

Percy Capybara v4

Ez a dokumentáció Percy Capybara 4.0.0 és újabb verziójára vonatkozik. A Percy Capybara korábbi verziói eltérő, inkompatibilis API-val rendelkeztek.

Lásd az upgrade to v4 útmutatót vagy a régi dokumentumokat.

Beállítás

adja hozzá ezt a sort az alkalmazás Gemfile-jéhez:

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

majd futtassa:

$ bundle install

vagy telepítse saját maga a gem install percy-capybara.

telepítenie kell a Percy ügynököt is. Ez a folyamat a tesztek mellett fut, pillanatképek feltöltése Percybe az Ön nevében. A telepítéshez npm-et kell használnia.

++

Ha a projekt még nem rendelkezik package.json fájllal a gyökérkönyvtárban, futtassa a npm init parancsot, és kövesse az utasításokat. package.json olyan, mint egy Gemfile csomópont csomagok.

a @percy/agent helyi telepítéshez a projekthez:

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

Ez létrehoz egy ./node_modules/ könyvtárat, amely tartalmazza az ügynököt és annak függőségeit. Az ügynök futtatható bináris fájlja ./node_modules/.bin/percy.

Ezután importálja a Percy Capybara könyvtárat abba a fájlba(fájlokba), ahonnan pillanatképeket szeretne készíteni:

require 'percy'

most már használhatja a Percy.snapshot(...) pillanatkép létrehozásához a tesztből:

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

a page a Percy.snapshot objektum a Capybara::Session objektum, amely a vizsgált weboldalt képviseli. A Capybara tesztekben rendelkezésre kell állnia.

végül csomagolja be a tesztfutó parancsot egy percy exec parancsba. Ez elindít egy helyi Percy ügynököt, hogy pillanatképeket kapjon a tesztjeiről, és feltöltse őket a Percy irányítópultjára.

a Percy sikeres futtatásához be kell állítani a PERCY_TOKEN környezeti változót:

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

a percy-t a teljes elérési útjával hívhatja meg (általában ./node_modules/.bin/percy), vagy hívja a npx percy (NPX egy csomópont segédprogram, amely lehetővé teszi, hogy végre csomag bináris). Ha az npm 5.2 előtti verzióját használja, amely nem támogatja az npx-et, használhatja a $(npm bin)/percy helyett.

ha például Rspec-et használ a tesztek futtatásához, akkor az új tesztparancs a következő lesz:

$ npx percy exec -- rspec

vegye figyelembe a -- kettős kötőjelet, a npx percy exec és a test run parancs között.

ezt a npx percy exec -- <test runner> parancsot kell hozzáadnia a tesztek futtatásának új módjaként.

Ez az! Most, amikor a CI fut, Pillanatképek az alkalmazás ebben az állapotban kerül feltöltésre Percy vizuális tesztelés!

Configuration

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

page a Capybara::Session objektum, amely a pillanatképezni kívánt weboldalt képviseli. Kötelező.

options egy opcionális hash, amely a következőket tartalmazhatja:

• name: a pillanatfelvételt azonosító karakterlánc. Bármilyen karakterlánc lehet, amelynek értelme van az oldal és annak állapotának azonosítására. Egyedinek kell lennie, és változatlannak kell maradnia az építkezéseken. Ha nem adja meg, Percy a vizsgált oldal teljes URL-jét fogja használni. Ha több pillanatfelvételt készít ugyanazzal az URL-lel, akkor manuálisan kell megadnia a pillanatképek nevét a két pillanatkép közötti egyértelműsítés érdekében. A pillanatképnevek generálásával kapcsolatos további részletekért lásd: automatikus Pillanatképnevek.
• widths: a böngésző szélességét (pixelben) képviselő egész számok tömbje, amelyen pillanatfelvételeket szeretne készíteni.
• min_height: az eredményül kapott pillanatkép minimális magasságát meghatározó egész szám (a pillanatkép az oldal tartalmától függően magasabb lehet ennél az értéknél). Az alapértelmezett érték 1024px.
• percy_css: Percy-specifikus CSS-t tartalmazó karakterlánc, amelyet erre a pillanatképre alkalmaznak.
• request_headers: HTTP fejléceket tartalmazó objektum, amelyet a pillanatkép eszközfelfedezése során minden egyes kéréshez el kell küldeni.

példák

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

globális konfiguráció

a Percy-t úgy is beállíthatja, hogy ugyanazokat a beállításokat használja az összes pillanatfelvételen. A támogatott konfiguráció megtekintéséhez, beleértve a szélességet is, olvassa el az SDK konfigurációs dokumentumokat

elemek várakozása Capybara – val

a Capybara robusztus belső várakozási rendszerrel rendelkezik, amely hatékonyan megvárhatja bizonyos oldalelemek megjelenését a folytatás előtt. Soha nem kell írni egy pelyhessleep hívás Capybara.

Rspec tesztekkel

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

Ez hatékonyan megvárja a #new-project elem létezését.

Rspec nélkül

használhatja a Capybara általánoshas_no_css?has_no_content?has_no_xpath? módszereit annak biztosítására, hogy az oldal állapota helyes legyen, mielőtt folytatná. Valószínűleg kivételt szeretne emelni a végrehajtás leállításához, ha az elem lekérdezése true értéket ad vissza.

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

További információ

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

hibaelhárítás

hiányzó stílusok

Ha a screenshotok hiányoznak stílusok és a webpacker-t használja az alkalmazások elülső eszközeinek felépítéséhez, akkor konfigurálnia kell a CSS kibontásához, amikor tesztekre épít. Alapértelmezés szerint a Webpack CSS-t generál blob eszközként, amelyet nem lehet felfedezni vagy menteni, amikor eszközfelfedezést végzünk. A webpacker konfigurációs fájljában meg kell adnia extract_css: true:

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