a mély merülés CSS tesztelés: a fejlesztő teljes útmutató

amikor a front-end tesztelés, CSS tesztelés gyakran figyelmen kívül hagyják. Kétségtelenül jelentős kihívások vannak a CSS tesztelésben, de ez nem jelenti azt, hogy el kell utasítani, mint egy általános tesztelési stratégia lényegtelen eszközét. Ebben a bejegyzésben útmutatót kínálunk Önnek a tesztelés ezen formájához, hogy megértse a használatának motivációit, és ismerje a gyakorlati lépéseket az induláshoz.

megnyitjuk a bejegyzést az alapvető kérdésekkel:

• mi a CSS tesztelés?
• miért kell törődnie vele??
• Hogyan teszteljük a CSS-t?

amint megkapjuk az alapokat az útból, áttekintjük a főbb CSS tesztelő eszközök listáját. Többet fog tudni a különböző eszközökről és eszközkategóriákról ebben a térben.

mielőtt befejeznénk, megosztunk néhány végső gondolatot, beleértve azt is, hogy a Testim Automate hogyan tudja megkerülni a CSS által okozott akadályokat az automatizált végpontok közötti tesztelés során.

térjünk rá.

CSS tesztelés alapjai

kezdjük az alapvető kérdések megválaszolásával.

mi a CSS tesztelés?

a CSS tesztelés, ahogy a neve is sugallja, a stíluslapok tesztelésének folyamata. Pontosabban az automatikus CSS tesztelésre utalunk. Végül is ez 2021, és a tesztautomatizálás elengedhetetlen. Ez igaz a tesztelés minden szintjére, rétegére és formájára. A CSS tesztelés nem kivétel.

miért fontos a CSS tesztelés?

a CSS a webes trifecta (HTML, CSS és JavaScript) tagja. Mint ilyen, létfontosságú a webes alkalmazás minősége szempontjából. A CSS problémái miatt a webalkalmazás/webhely nem lesz megfelelően megjelenítve.

a felhasználói felület egy alkalmazás különösen érzékeny területe a felhasználói élmény szempontjából. Végül is az interfész az, amit a felhasználó lát és megérint—szó szerint, a mobil esetében.

tehát a CSS tesztelésnek a felhasználói felület tesztelésének kulcsfontosságú elemének kell lennie, ha szervezete komolyan gondolja, hogy kellemes felhasználói élményt nyújt a felhasználóknak.

Hogyan teszteljük a CSS-t?

a CSS-t számos módon tesztelheti. Ez azért van, mert a CSS tesztelés nem egyetlen dolog; ehelyett különböző típusokban érkezik. A négy fő típus a következő:

• regresszió
• szintaxis
• projekt
• referencia

most fedjük le ezeket a típusokat.

regresszió

a regressziós CSS tesztelés ugyanaz a régi regressziós tesztelés, amelyet a CSS-re alkalmaznak. A regressziós tesztelés kevésbé egyfajta tesztelés—mint például az egységtesztelés vagy a végpontok közötti tesztelés -, hanem inkább stratégia. Ez egy tesztcsomag felállításából áll, hogy elkapja a regressziókat vagy hibákat a kódbázis megváltoztatása után.

tehát a CSS regressziós teszt ellenőrzi, hogy az oldal megváltoztatása után nem szakítja meg az oldalstílust.

szintaxis

ez a kategória olyan tesztelési technikákra és eszközökre vonatkozik, amelyek igazolják, hogy a CSS szintaxisa rendben van. Dióhéjban, ez olyan, mint egy linter a CSS számára.

projekt

A “Projekt” kategória azt jelenti, hogy ellenőrizzük, hogy a CSS tiszteletben tartja-e a projekt és a szervezet szabványait.

referencia

végül a referencia CSS tesztelés ellenőrzi, hogy a végrehajtott és renderelt oldal úgy néz-e ki, ahogy kellett volna. Sok előrelépés történt ezen a területen, és a dolgok sokkal jobbak, mint az Internet Explorer dominanciájának sötét korszakában.

ez azonban nem jelenti azt, hogy nincsenek többé kihívások. Annak ellenére, hogy a mai főbb böngészők közös alapot osztanak meg—a Chromium nyílt forráskódú böngészőt -, valószínűleg küzdeni fog, amikor biztosítja, hogy az oldal legalább a leggyakrabban használt böngészőkben ugyanúgy nézzen ki és viselkedjen.

CSS tesztelő eszközök: Íme néhány a legfontosabbak közül

bemutatjuk az elérhető eszközöket, amelyeket érdemes megnézni.

mint korábban mondtuk, a CSS tesztelés gyakran figyelmen kívül hagyott terület a tesztelés során. Ennek egyik következménye a rendelkezésre álló eszközök számának csökkenése a többi teszttípushoz képest.

CSS Lint

a CSS Lint pontosan az, amit a neve is sugall: a CSS kód lintere. Elérheti a webhelyén, vagy telepítheti npm csomagként.

a CSS Lint szintaxis-ellenőrzést kínál, a szabályok használata mellett annak ellenőrzésére, hogy a kód nem tartalmaz-e problémákat. Azt is írni a saját szabályrendszer.

BackstopJS

BackstopJS egy vizuális regressziós eszköz webes alkalmazások. Ezt úgy teszi, hogy összehasonlítja az idővel készített Dom képernyőképeket. Könnyen telepíthető az npm segítségével:

BackstopJS teszi tesztek headless Chrome és szimulálni felhasználói interakciók segítségével Puppeteer szkriptek. Hozzáadhatja a CI-hez, és integrált Docker rendereléssel rendelkezik.

Quijote

a Quijote a CSS egység-és integrációs tesztelése. Ezzel a könyvtárral ellenőrizheti, hogy a böngésző hogyan rendereli a HTML elemeket, és ellenőrizheti, hogy az elemek hogyan kapcsolódnak egymáshoz. A Quijote modern asztali és mobil böngészőkben működik, de használhat egy olyan eszközt is, mint a Karma, hogy több böngészőben futtassa a Quijote teszteket.

ezt az eszközt az npm segítségével telepítheti:

CSSCritic

a CSS Critic egy eszköz a CSS automatikus regressziós tesztelésére.

úgy működik, hogy összehasonlítja az elrendezés aktuális állapotát egy megadott referenciaképpel. Amikor az elrendezés megváltozik, a tesztek kudarcot vallanak.

lehet kapni CSS kritikus segítségével npm:

fontos korlátozás, hogy a CSSCritic csak Firefoxban és Chrome-ban működik.

következtetés

a CSS tesztelés gyakran figyelmen kívül hagyott tesztelési forma. Melyik, sajnos, van némi értelme, mivel a CSS mindig is a webes trifecta csúnya kiskacsája volt.

mivel azonban a CSS hibák minden bizonnyal hatással vannak egy webalkalmazás felületére—ami viszont negatívan befolyásolja a felhasználói élményt—, a stíluslapok tesztelése rendkívül fontos, ha nagyszerű UX-t szeretne eljuttatni látogatóihoz.

ebben a bejegyzésben láttuk a CSS tesztelés alapjait: Mi az, miért számít, és hogyan csinálod. Néhány fő eszközt is bemutattunk, amelyek különböző kategóriákat ölelnek fel: linterek, egységtesztelés, regressziós tesztelés és vizuális regressziós tesztelés. Most már többet tud a CSS tesztelés koncepciójáról és a rendelkezésére álló szerszámokról.

mielőtt befejeznénk, egy utolsó gondolat: a CSS fontos, és nem csak a CSS tesztelés összefüggésében. Más típusú vizsgálatok esetében is fontos.

például a végpontok közötti tesztelő eszközök gyakran használnak CSS osztályneveket azonosítóként. Sajnos ez törékeny megközelítés lehet. Gyakran előfordul, hogy a fejlesztők olyan technikákat használnak, amelyek véletlenszerű azonosítókat fűznek CSS osztályaikhoz. A CSS modulok egy példa egy ilyen megközelítésre.

az ilyen technikák alkalmazása gyakran törékeny teszteket eredményez. Sok eszköz az osztálynevekre támaszkodik, hogy elemeket találjon a DOM-ban. Amikor az osztálynevek megváltoznak, a tesztek kudarcot vallanak, ami súlyos tesztkarbantartást eredményez.

vannak jobb megközelítések, bár. Például a Testim nemrégiben hozzáadott egy Locator Filtering and Mapping nevű funkciót. Lehetővé teszi a Testim számára az osztálynevek dinamikus részének szűrését az egyes elemek lokátorainak meghatározásakor. Ez javítja a lokátor pontosságát, robusztusabb teszteseteket tesz lehetővé. Adj Testim egy próbát lokátor szűrés. Boldog tesztelést!