o scufundare profundă în testarea CSS: Ghidul complet al dezvoltatorului

când vine vorba de testarea front-end, testarea CSS este adesea trecută cu vederea. Există, fără îndoială, provocări semnificative în testarea CSS, dar asta nu înseamnă că ar trebui respinsă ca un instrument neimportant într-o strategie generală de testare. În această postare, vă vom oferi un ghid pentru această formă de testare, astfel încât să înțelegeți motivațiile din spatele utilizării acesteia și să cunoașteți pașii practici pentru a începe.

vom deschide postarea cu întrebările fundamentale:

• ce este testarea CSS?
• de ce ar trebui să-ți pese de asta??
• cum testezi CSS?

de îndată ce vom obține elementele de bază din drum, Vă vom plimba printr-o listă a unora dintre principalele instrumente de testare CSS. Veți înțelege mai multe despre diferitele instrumente și categorii de instrumente din acest spațiu.

înainte de a încheia, vom împărtăși câteva gânduri finale, inclusiv modul în care Testim Automate poate eluda unele dintre obstacolele impuse de CSS atunci când efectuează teste automate end-to-end.

să trecem la asta.

bazele testării CSS

să începem prin a răspunde la întrebările fundamentale.

ce este testarea CSS?

testarea CSS, după cum sugerează și numele, este procesul de testare a foilor de stil. Mai precis, ne referim la testarea automată CSS. La urma urmei, acesta este 2021, iar automatizarea testelor este esențială. Acest lucru este valabil în toate nivelurile, straturile și formele de testare. Testarea CSS nu este o excepție.

de ce ar trebui să vă pese de testarea CSS?

CSS este membru al Web trifecta (HTML, CSS și JavaScript). Ca atare, este vital pentru calitatea unei aplicații web. Problemele din CSS vor face ca aplicația web/site-ul web să nu fie redat corect.

UI este o zonă deosebit de sensibilă a unei aplicații atunci când vine vorba de experiența utilizatorului. La urma urmei, interfața este ceea ce utilizatorul vede și atinge—destul de literal, în cazul mobilului.

deci, testarea CSS ar trebui să fie o componentă crucială a testării UI dacă organizația dvs. este serioasă în ceea ce privește furnizarea utilizatorilor săi cu o experiență de utilizator încântătoare.

cum testezi CSS?

puteți testa CSS într-o varietate de moduri. Asta pentru că testarea CSS nu este un singur lucru; în schimb, vine în diferite tipuri. Cele patru tipuri principale sunt:

• regresie
• sintaxă
• proiect
• referință

să acopere acum fiecare dintre aceste tipuri.

regresie

regresie CSS testarea este aceeași testare de regresie vechi aplicat CSS. Testarea regresiei este mai puțin un tip de testare—cum ar fi testarea unității sau testarea end-to-end—și mai mult o strategie. Acesta constă în configurarea unei suite de testare pentru a prinde regresii sau erori după modificări ale bazei de cod.

deci, CSS regresie testarea verifică dacă nu rupe stilul de pagină după schimbarea paginii.

sintaxă

această categorie se referă la tehnici de testare și instrumente care verifică sintaxa CSS este în regulă. Pe scurt, este ca un linter pentru CSS.

proiect

categoria “proiect” înseamnă verificarea dacă CSS respectă standardele proiectului și organizației.

referință

în cele din urmă, testarea CSS de referință verifică dacă pagina implementată și randată arată așa cum trebuia să arate. S-au făcut multe progrese în acest domeniu și lucrurile sunt mult mai bune decât erau în epoca întunecată a dominanței Internet Explorer.

cu toate acestea, asta nu înseamnă că nu mai există provocări. În ciuda faptului că multe dintre browserele majore de astăzi împărtășesc o bază comună—browserul open-source Chromium—este posibil să vă luptați atunci când vă asigurați că pagina dvs. arată și se comportă la fel în cel puțin cele mai utilizate browsere.

CSS instrumente de testare: aici sunt unele dintre cele principale

vă vom plimba prin unele dintre instrumentele disponibile pe care ați putea dori să verificați.

așa cum am mai spus, testarea CSS este o zonă adesea trecută cu vederea în testare. Una dintre implicațiile acestui lucru este numărul redus de instrumente disponibile în comparație cu alte tipuri de testare.

scame CSS

scame CSS este exact ceea ce sugerează numele său: un linter pentru codul CSS. Îl puteți accesa pe site-ul său web sau îl puteți instala ca pachet npm.

CSS Lint oferă verificarea sintaxei, pe lângă utilizarea regulilor pentru a verifica dacă codul nu conține probleme. De asemenea, puteți scrie propriul set de reguli.

BackstopJS

BackstopJS este un instrument de regresie vizuală pentru aplicații web. Face asta comparând capturile de ecran DOM preluate în timp. Îl puteți instala cu ușurință cu npm:

BackstopJS face teste cu Chrome fără cap și poate simula interacțiunile utilizatorilor folosind scripturi Puppeteer. Puteți să-l adăugați la CI, și vine cu redare Docker integrat.

Quijote

Quijote este testarea unității și Integrării pentru CSS. Folosind această bibliotecă, puteți verifica modul în care elementele HTML sunt redate de browser și puteți verifica modul în care elementele se raportează între ele. Quijote funcționează în browserele desktop și mobile moderne, dar puteți utiliza și un instrument precum Karma pentru a rula teste Quijote pe mai multe browsere.

puteți instala acest instrument prin npm:

CSSCritic

CSS Critic este un instrument pentru testarea automată de regresie a CSS.

funcționează comparând starea curentă a aspectului dvs. cu o imagine de referință pe care o furnizați. Ori de câte ori aspectul se schimbă, testele eșuează.

puteți obține CSS Critic folosind npm:

o limitare importantă este că Cscritic funcționează numai în Firefox și Chrome.

concluzie

testarea CSS este o formă de testare adesea trecută cu vederea. Ceea ce, din păcate, are un sens, deoarece CSS a fost întotdeauna un fel de rață urâtă a trifectei web.

cu toate acestea, deoarece erorile CSS afectează cu siguranță interfața unei aplicații web—care la rândul său afectează negativ experiența utilizatorului—testarea foilor de stil este de o importanță capitală dacă doriți să oferiți un UX excelent vizitatorilor dvs.

în această postare, am văzut fundamentele testării CSS: ce este, de ce contează și cum o faci. De asemenea, v-am prezentat câteva dintre principalele instrumente, acoperind diferite categorii: linters, testarea unității, testarea regresiei și testarea regresiei vizuale. Acum știți mai multe despre conceptul de testare CSS și instrumentele la dispoziția dumneavoastră.

înainte de a încheia, iată un gând final: CSS este important și nu numai în contextul testării CSS. De asemenea, contează pentru alte tipuri de testare.

de exemplu, instrumentele de testare end-to-end folosesc adesea nume de clase CSS ca identificatori. Din păcate, aceasta poate fi o abordare fragilă. Este obișnuit ca dezvoltatorii să utilizeze tehnici care ajung să adauge identificatori aleatori la clasele lor CSS. Modulele CSS sunt un exemplu de astfel de abordare.

utilizarea unor astfel de tehnici duce adesea la teste fragile. Multe instrumente se bazează pe nume de clase pentru a găsi elemente în DOM. Când numele clasei se schimbă, testele eșuează, rezultând o întreținere grea a testelor.

există totuși abordări mai bune. De exemplu, Testim a adăugat recent o caracteristică numită filtrare și mapare Locator. Permite Testim să filtreze partea dinamică a numelor de clase atunci când determină localizatoarele pentru fiecare element. Acest lucru îmbunătățește precizia de localizare, ceea ce face pentru cazuri de testare mai robuste. Dă Testim un try și filtrare locator. Testarea fericit!