hluboký ponor do testování CSS: Kompletní průvodce vývojáře

pokud jde o front-end testování, testování CSS je často přehlíženo. V testování CSS jsou nepochybně významné výzvy, ale to neznamená, že by mělo být odmítnuto jako nedůležitý nástroj v celkové testovací strategii. V tomto příspěvku vám nabídneme průvodce touto formou testování, abyste pochopili motivace, které ji používají, a znáte praktické kroky, jak začít.

otevřeme příspěvek se základními otázkami:

• co je testování CSS?
• proč byste se o to měli starat??
• jak testujete CSS?

jakmile dostaneme základy z cesty, provedeme vás seznamem některých hlavních testovacích nástrojů CSS. Dozvíte se více o různých nástrojích a kategoriích nástrojů v tomto prostoru.

před zabalením se podělíme o některé závěrečné myšlenky, včetně toho, jak Testim Automate může obejít některé překážky uložené CSS při automatizovaném testování typu end-to-end.

pojďme na to.

základy testování CSS

začněme odpovědí na základní otázky.

co je testování CSS?

CSS testování, jak název napovídá, je proces testování stylů. Konkrétněji se jedná o automatické testování CSS. Koneckonců, toto je rok 2021 a automatizace testů je nezbytná. To platí ve všech úrovních, vrstvách a formách testování. Testování CSS není výjimkou.

proč byste se měli starat o testování CSS?

CSS je členem webové trifecta (HTML, CSS a JavaScript). Jako takový, je to zásadní pro kvalitu webové aplikace. Problémy v CSS způsobí, že webová aplikace / webové stránky nebudou vykresleny správně.

uživatelské rozhraní je obzvláště citlivou oblastí aplikace, pokud jde o uživatelské prostředí. Koneckonců, rozhraní je to, co uživatel vidí a dotýká se-doslova, v případě mobilu.

takže testování CSS by mělo být klíčovou součástí testování uživatelského rozhraní, pokud vaše organizace vážně poskytuje svým uživatelům nádherný uživatelský zážitek.

jak testujete CSS?

CSS můžete testovat různými způsoby. Je to proto, že testování CSS není jediná věc; místo toho přichází v různých typech. Čtyři hlavní typy jsou:

• regrese
• syntaxe
• Projekt
• odkaz

pojďme nyní pokrýt každý z těchto typů.

regrese

regresní CSS testování je stejné staré regresní testování aplikované na CSS. Regresní testování je méně druh testování-jako, jednotkové testování nebo end-to-end testování – a více strategie. Skládá se z nastavení testovací sady pro zachycení regresí nebo chyb po změnách v kódové základně.

takže regresní testování CSS ověřuje, že styl stránky po změně stránky neporušíte.

syntaxe

Tato kategorie se týká testovacích technik a nástrojů, které ověřují, že vaše syntaxe CSS je v pořádku. Stručně řečeno, je to jako linter pro CSS.

Projekt

Kategorie “Projekt” znamená kontrolu, zda CSS respektuje standardy projektu a organizace.

Reference

nakonec referenční CSS testování ověří, zda implementovaná a vykreslená stránka vypadá tak, jak měla vypadat. V této oblasti bylo dosaženo velkého pokroku a věci jsou mnohem lepší,než tomu bylo v temných dobách dominance aplikace Internet Explorer.

to však neznamená, že již neexistují výzvy. Navzdory mnoha hlavním prohlížečům dneška, které sdílejí společný základ-Prohlížeč Chromium s otevřeným zdrojovým kódem-budete pravděpodobně bojovat, když zajistíte, že vaše stránka vypadá a chová se stejně alespoň v nejpoužívanějších prohlížečích.

CSS testovací nástroje: zde jsou některé z hlavních

provedeme vás některými dostupnými nástroji, které byste mohli chtít vyzkoušet.

jak jsme již řekli, testování CSS je často přehlíženou oblastí při testování. Jedním z důsledků toho je snížený počet dostupných nástrojů ve srovnání s jinými typy testování.

CSS Lint

CSS Lint je přesně to, co jeho název napovídá: linter pro CSS kód. Můžete k němu přistupovat na jeho webových stránkách nebo jej nainstalovat jako balíček npm.

CSS Lint nabízí kontrolu syntaxe, kromě použití pravidel pro kontrolu, že kód neobsahuje problémy. Můžete také napsat vlastní soubor pravidel.

BackstopJS

BackstopJS je vizuální regresní nástroj pro webové aplikace. Dělá to porovnáním snímků obrazovky DOM pořízených v průběhu času. Můžete jej snadno nainstalovat pomocí npm:

BackstopJS vykresluje testy s bezhlavým chromem a může simulovat interakce uživatelů pomocí skriptů Puppeteer. Můžete jej přidat do svého CI, a je dodáván s integrovaným Vykreslování Docker.

Quijote

Quijote je jednotkové a integrační testování CSS. Pomocí této knihovny můžete zkontrolovat, jak jsou prvky HTML vykresleny prohlížečem, a ověřit, jak se prvky vzájemně vztahují. Quijote funguje v moderních stolních a mobilních prohlížečích, ale můžete také použít nástroj, jako je Karma, ke spuštění testů Quijote na více prohlížečích.

tento nástroj můžete nainstalovat pomocí npm:

CSSCritic

CSS Critic je nástroj pro automatické regresní testování CSS.

funguje porovnáním aktuálního stavu rozvržení s referenčním obrázkem, který poskytnete. Kdykoli se změní rozvržení, testy selžou.

můžete získat CSS Critic pomocí npm:

důležitým omezením je, že CSSCritic funguje pouze ve Firefoxu a chromu.

závěr

CSS testování je často přehlížená forma testování. Který, bohužel, dává nějaký smysl, protože CSS byl vždy jakýmsi ošklivým káčátkem webové trifecty.

vzhledem k tomu, že chyby CSS jistě ovlivňují rozhraní webové aplikace-což negativně ovlivňuje uživatelskou zkušenost-testování stylů je nesmírně důležité, pokud chcete svým návštěvníkům dodat skvělý UX.

v tomto příspěvku jsme viděli základy testování CSS: co to je, proč na tom záleží a jak to děláte. Také jsme vás provedli některými z hlavních nástrojů, které pokrývají různé kategorie: lintery, jednotkové testování, regresní testování a vizuální regresní testování. Nyní víte více o konceptu testování CSS a nástrojů, které máte k dispozici.

před zabalením je zde poslední myšlenka: CSS je důležité, a to nejen v kontextu testování CSS. Záleží také na jiných typech testování.

například end-to-end testovací nástroje často používají názvy tříd CSS jako identifikátory. Bohužel to může být křehký přístup. Je běžné, že vývojáři používají techniky, které nakonec připojí náhodné identifikátory ke svým třídám CSS. Příkladem takového přístupu jsou moduly CSS.

použití takových technik často vede k křehkým testům. Mnoho nástrojů se při hledání prvků v DOM spoléhá na názvy tříd. Když se názvy tříd změní, testy selžou, což má za následek těžkou údržbu testů.

existují však lepší přístupy. Například Testim nedávno přidal funkci nazvanou filtrování a mapování lokátorů. Umožňuje Testim filtrovat dynamickou část názvů tříd při určování lokátorů pro každý prvek. To zlepšuje přesnost lokátoru, což přispívá k robustnějším testovacím případům. Vyzkoušejte Testim a filtrování lokátoru. Šťastné testování!