👍
Covered in this doc
Integrating Percy with Capybara feature tests in any Ruby web framework including Rails, Sinatra, etc.
jos on kirjoittanut ominaisuustestejä (tai ”käyttöliittymätestejä”, ”hyväksymistestejä” jne.), tiedät, kuinka vaikeaa se voi olla saada ne oikein ja saada sovelluksen oikeassa UI tilassa. Percy Capybara voit ottaa kaiken ajan olet viettänyt rakentaa ominaisuuksia testejä ja laajentaa niitä kuvakaappauksia ja visuaalinen regressio testit kattaa kaikki visuaaliset muutokset sovelluksen, jopa takana monimutkaisia UI valtiot.
alla olevat esimerkit olettavat, että käytät RSC: tä, mutta ne voidaan helposti sovittaa muihin testikehyksiin.
🚧
Percy Capybara v4
tämä dokumentaatio koskee Percy Capybaran versiota 4.0.0 ja sitä uudempaa. Percy Capybaran aiemmissa versioissa oli erilainen ja yhteensopimaton API.
Katso päivitys v4-ohjeeseen tai vanhat dokumentit.
Setup
Lisää tämä rivi sovelluksesi Gemfileehen:
gem 'percy-capybara', '~> 4.0.0'ja suorita sitten:
$ bundle installtai asenna se itse gem install percy-capybara.
sinun tulee myös asentaa Percy-agentti. Tämä on prosessi, joka kulkee testiesi rinnalla, lataamalla kuvia Percylle puolestasi. Sinun täytyy käyttää npm asentaa se.
📘
Jos projektillasi ei ole jo
package.jsontiedostoa juurihakemistossa, suoritanpm initja seuraa ohjeita.package.jsonon kuin Solmupakettien Gemfile.
asentaa @percy/agent paikallisesti projektille:
$ npm install --save-dev @percy/agentnäin luodaan ./node_modules/ hakemisto, joka sisältää agentin ja sen riippuvuudet. Agentin suoritettavan binäärin sijainti on ./node_modules/.bin/percy.
tuo seuraavaksi Percy Capybara-kirjasto tiedostoon(tiedostoihin), josta haluat ottaa tilannekuvia:
require 'percy'nyt voit käyttää Percy.snapshot(...) luodaksesi tilannekuvan testistäsi:
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 objekti, jonka siirrät Percy.snapshot on Capybara::Session objekti, joka edustaa testattavaa verkkosivua. Sen pitäisi löytyä Capybara-testeistä.
kääri koekäyttökomentosi lopuksi percy exec komento. Tämä käynnistää paikallisen Percy-agentin vastaanottamaan tilannekuvia testeistäsi ja lataamaan ne Percy-kojelautaasi.
ennen kuin Percyn voi suorittaa onnistuneesti, on asetettava PERCY_TOKEN ympäristömuuttuja:
# Windows$ set PERCY_TOKEN=<your token here># Unix $ export PERCY_TOKEN=<your token here>voit vedota percyyn käyttämällä sen koko polkua (tyypillisesti ./node_modules/.bin/percy), tai soittamalla (NPX on solmuapuohjelma, jonka avulla voit suorittaa pakettikinarioita). Jos käytät ennen 5.2: ta npm-versiota, joka ei tue npx: ää, voit käyttää $(npm bin)/percy sen sijaan.
esimerkiksi, jos käytät RSC: tä testien suorittamiseen, tulee uudeksi testikomennoksi:
$ npx percy exec -- rspechuomaa double dash, --, välillä npx percy exec ja koeajokomento.
haluat lisätä tämän npx percy exec -- <test runner> komennon uudeksi tavaksi SISÄKORVAISTUTUSJÄRJESTELMÄLLESI suorittaa testejä.
That ’ s it! Nyt, aina kun TIEDONANTAJASI toimii, tilannekuvia sovelluksesta tuossa tilassa Ladataan Percylle visuaalista testausta varten!
Configuration
Percy.snapshot(page)Percy.snapshot(page, options)page on Capybara::Session objekti, joka edustaa sitä web-sivua, jonka haluat tilannekuvata. Tarvittava.
options on valinnainen hash, joka voi sisältää:
-
name: merkkijono, joka tunnistaa tämän tilannekuvan. Se voi olla mikä tahansa merkkijono, joka on järkevää voit tunnistaa sivun ja sen tilan. Sen täytyy olla ainutlaatuinen ja pysyä samana koko rakentaa. Jos et anna sitä, Percy käyttää testattavan sivun koko URL-osoitetta. Jos otat useita tilannekuvia samalla URL-osoitteella, sinun täytyy manuaalisesti antaa tilannekuvan nimiä, jotta voit disambiguate kahden tilannekuvan välillä. Lisätietoja tilannekuvan nimistä on ohjeaiheessa automaattiset tilannekuvan nimet. -
widths: joukko kokonaislukuja, jotka edustavat selaimen leveyksiä (pikseleinä), joilla haluat ottaa tilannekuvia. -
min_height: kokonaisluku, joka määrittää syntyvän tilannekuvan vähimmäiskorkeuden (tilannekuva saattaa muuttua tätä arvoa suuremmaksi, riippuen sivun sisällöstä). Oletusarvo on 1024px. -
percy_css: merkkijono, joka sisältää Percy-spesifisen CSS: n, jota sovelletaan tähän tilannekuvaan. -
request_headers: objekti, joka sisältää HTTP-otsikoita, jotka lähetetään jokaisesta tämän tilannekuvan yhteydessä tehdystä pyynnöstä.
Examples
Percy.snapshot(page, { name: 'Responsive snapshot', widths: })Percy.snapshot(page, { min_height: 2000 })Yleiskokoonpano
Voit myös määrittää Percyn käyttämään samoja vaihtoehtoja kaikissa tilannekuvissa. Jos haluat nähdä Tuetut kokoonpanot, mukaan lukien leveydet, Lue SDK-konfiguraatioasiakirjat
odottaen elementtejä Capybaralla
Capybaralla on vankka sisäinen odotusjärjestelmä, jonka avulla voidaan tehokkaasti odottaa tiettyjen sivuelementtien ilmestymistä ennen jatkamista. Sinun ei pitäisi koskaan joutua kirjoittamaan flaky sleep soita Kapybaralla.
RSpec-testeillä
expect(page).to have_css('#new-project')expect(page).to have_content('New Project')tämä jää tehokkaasti odottamaan #new-project alkuaineen olemassaoloa.
ilman RSC
voit käyttää Kapybaran yleisiä has_no_css?has_no_content?has_no_xpath? menetelmiä, joilla varmistetaan, että sivun tila on oikea ennen kuin jatkat eteenpäin. Haluat luultavasti nostaa poikkeuksen keskeyttääksesi suorituksen, jos elementin kysely palauttaa true.
raise 'element missing!' if page.has_no_css?('#new-project')raise 'element missing!' if page.has_no_content?('New Project')lisätietoja
- https://github.com/teamcapybara/capybara#queryinghttps://github.com/teamcapybara/capybara#asynchronous-javascript-ajax-and-friends
vianmääritys
puuttuvat tyylit
p> Jos kuvakaappauksia puuttuu tyylejä ja käytät webpacker rakentaa sovelluksia etupään varat, sinun täytyy määrittää se purkaa CSS rakennettaessa testejä. Oletuksena Webpack luo css: nblobasset, jota ei voi löytää tai tallentaa, kun teemme asset discovery. Webpacker-asetustiedostossa tulee määrittääextract_css: true:
test: ... # Extract and emit a css file extract_css: true