acoperite în acest doc

integrarea Percy cu Capybara teste caracteristică în orice cadru web Ruby, inclusiv șine, Sinatra, etc.

dacă ați scris teste de caracteristici (sau „teste UI”, „teste de acceptare” etc.), știi cât de greu poate fi pentru a le obține dreptul și pentru a obține aplicația în starea corectă UI. Percy Capybara vă permite să luați tot timpul pe care l-ați petrecut construind testele de caracteristici și să le extindeți cu capturi de ecran și teste de regresie vizuală pentru a acoperi toate modificările vizuale din aplicația dvs., chiar și în spatele Statelor UI complexe.

exemplele de mai jos presupun că utilizați RSpec, dar ele pot fi ușor adaptate pentru alte cadre de testare.

Percy Capybara V4

această documentație este pentru Percy Capybara versiunea 4.0.0 și mai sus. Versiunile anterioare ale Percy Capybara aveau un API diferit și incompatibil.

consultați Ghidul de actualizare la V4 sau documentele vechi.

Setup

adăugați această linie la Gemfile aplicației dvs.:

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

și apoi executați:

$ bundle install

sau instalați-l singur cu gem install percy-capybara.

De asemenea, va trebui să instalați agentul Percy. Acesta este un proces care rulează alături de testele dvs., încărcând instantanee lui Percy în numele dvs. Va trebui să utilizați npm pentru ao instala.

dacă proiectul dvs. nu are deja un fișierpackage.jsonîn directorul rădăcină, executaținpm init și urmați instrucțiunile. package.json este ca un Gemfile pentru pachetele de noduri.

pentru a instala@percy/agent local pentru proiectul dvs.:

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

aceasta va crea un./node_modules/ director care conține agentul și dependențele sale. Binarul executabil al agentului va fi localizat în ./node_modules/.bin/percy.

apoi, importați Biblioteca Percy Capybara în fișierele din care doriți să faceți instantanee:

require 'percy'

acum Puteți utilizaPercy.snapshot(...) pentru a genera un instantaneu din testul dvs.:

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

obiectulpage pe care îl treceți înPercy.snapshot este obiectulCapybara::Session care reprezintă pagina web testată. Ar trebui să fie disponibil în testele Capybara.

în cele din urmă, înfășurați comanda test runner într-o comandăpercy exec. Acest lucru va începe un agent local Percy pentru a primi instantanee de la testele și încărcați-le la tabloul de bord Percy.

înainte de a putea rula cu succes Percy, variabila de mediuPERCY_TOKEN trebuie setată:

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

puteți invoca percy folosind calea sa completă (de obicei./node_modules/.bin/percy) sau apelândnpx percy (NPX este un utilitar nod care vă permite să execute pachete binare). Dacă utilizați o versiune npm înainte de 5.2 care nu acceptă npx, puteți utiliza $(npm bin)/percy în schimb.

de exemplu, dacă utilizați RSpec pentru a rula testele, noua comandă de testare devine:

$ npx percy exec -- rspec

notați liniuța dublă, --, între npx percy exec și comanda de testare.

veți dori să adăugați această comandănpx percy exec -- <test runner> ca nouă modalitate pentru sistemul dvs.

asta e! Acum, ori de câte ori rulează CI, instantanee ale aplicației în această stare vor fi încărcate la Percy pentru testare vizuală!

configurare

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

page esteCapybara::Session obiect reprezentând pagina web pe care doriți să instantaneu. Necesar.

options este un hash opțional care poate include:

• name: un șir care identifică acest instantaneu. Poate fi orice șir care are sens pentru dvs. să identificați pagina și starea acesteia. Trebuie să fie unic și să rămână același în toate construcțiile. Dacă nu o furnizați, Percy va folosi adresa URL completă a paginii testate. Dacă faceți mai multe instantanee cu aceeași adresă URL, va trebui să furnizați manual nume de instantanee pentru a dezambigua între cele două instantanee. Pentru mai multe detalii despre generarea numelor de instantanee, consultați nume de instantanee autogenerate.
• widths: o serie de numere întregi reprezentând lățimile browserului (în pixeli) la care doriți să faceți instantanee.
• min_height: un număr întreg care specifică înălțimea minimă a instantaneului rezultat (instantaneul ar putea deveni mai mare decât această valoare, în funcție de conținutul paginii). Implicit la 1024px.
• percy_css: un șir care conține CSS specific Percy care va fi aplicat acestui instantaneu.
• request_headers: un obiect care conține anteturi HTTP care trebuie trimis pentru fiecare solicitare făcută în timpul descoperirii activelor pentru acest instantaneu.

Exemple

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

configurare globală

De asemenea, puteți configura Percy să utilizeze aceleași opțiuni pentru toate instantaneele. Pentru a vedea configurația acceptată, inclusiv lățimile, citiți documentele noastre de configurare SDK

în așteptarea elementelor cu Capybara

Capybara are un sistem de așteptare intern robust care poate fi utilizat pentru a aștepta eficient ca anumite elemente de pagină să apară înainte de a continua. Nu trebuie să scrieți niciodată un apel sleep cu Capybara.

cu testele RSpec

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

aceasta va aștepta în mod eficient existența elementului#new-project.

fără RSpec

puteți utiliza metodele generice Capybarahas_no_css?has_no_content?has_no_xpath? pentru a vă asigura că starea paginii este corectă înainte de a continua. Probabil că veți dori să ridicați o excepție pentru a opri execuția dacă interogarea pentru element returnează true.

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

mai multe informații

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

depanare

stiluri lipsă

dacă capturile de ecran lipsesc stiluri și utilizați webpacker pentru a vă construi activele front-end ale aplicațiilor, va trebui să îl configurați pentru a extrage CSS atunci când construiți pentru teste. În mod implicit, Webpack va genera CSS ca un blob activ, care nu poate fi descoperit sau salvat atunci când facem descoperirea activelor. În fișierul de configurare webpacker va trebui să specificați extract_css: true:

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