a Deep Dive Into CSS Testing: a Developer’ s Complete Guide

When it comes to front-end testing, CSS testing is often overlook. CSS-testauksessa on epäilemättä merkittäviä haasteita, mutta se ei tarkoita, että se olisi hylättävä merkityksettömänä työkaluna yleisessä testausstrategiassa. Tässä viestissä tarjoamme sinulle oppaan tähän testausmuotoon, jotta ymmärrät sen käytön motiivit ja tiedät käytännön vaiheet alkuun pääsemiseksi.

avaamme viran peruskysymyksillä:

• mitä on CSS-testaus?
• miksi siitä pitäisi välittää??
• miten CSS: ää testataan?

heti kun saamme perusasiat kuntoon, käymme läpi listan tärkeimmistä CSS-testaustyökaluista. Ymmärrät enemmän tämän tilan eri työkaluista ja työkaluluokista.

ennen kuin lopetamme, jaamme joitakin lopullisia ajatuksia, mukaan lukien miten Testim Automate voi kiertää joitakin css: n asettamia esteitä automatisoiduissa päästä päähän-testeissä.

mennään asiaan.

CSS Testing Basics

aloitetaan vastaamalla peruskysymyksiin.

mitä on CSS-testaus?

CSS-testaus on nimensä mukaisesti tyylilakanoiden testaamista. Tarkemmin, viittaamme automaattinen CSS testaus. Onhan tämä vuosi 2021, ja testiautomaatio on välttämätöntä. Tämä pätee kaikilla testaustasoilla, – kerroksilla ja-muodoilla. CSS testaus ei ole poikkeus.

miksi CSS-testauksesta pitäisi välittää?

CSS kuuluu web-trifektaan (HTML, CSS ja JavaScript). Sellaisenaan, se on elintärkeää laatua web-sovellus. Ongelmat CSS aiheuttaa web app / verkkosivuilla ei renderöidä oikein.

käyttöliittymä on sovelluksen erityisen herkkä alue käyttäjäkokemuksen osalta. Loppujen lopuksi käyttöliittymä on se, mitä käyttäjä näkee ja koskettaa—aivan kirjaimellisesti, kun kyseessä on mobiili.

joten CSS-testauksen tulisi olla olennainen osa KÄYTTÖLIITTYMÄTESTAUSTA, jos organisaatiosi on tosissaan tarjoamassa käyttäjilleen ilahduttavaa käyttökokemusta.

miten CSS: ää testataan?

CSS: ää voi testata monin eri tavoin. Tämä johtuu siitä, että CSS testaus ei ole yksi asia; sen sijaan, se tulee eri tyyppejä. Neljä päätyyppiä ovat:

• regressio
• syntaksi
• projekti
• viite

käydään nyt läpi jokainen näistä tyypeistä.

regressio

regressio CSS-testaus on sama vanha regressiokoe, jota sovelletaan CSS: ään. Regressiotestaus on vähemmän eräänlainen testaus-kuten, yksikkötestaus tai päästä päähän-testaus-ja enemmän strategia. Se koostuu testisarjan perustamisesta regressioiden tai vikojen havaitsemiseksi codebasen muutosten jälkeen.

niin, CSS regressiotestaus todentaa, että et riko sivun tyyliä sivun vaihtamisen jälkeen.

syntaksi

tämä luokka viittaa testaustekniikoihin ja työkaluihin, jotka vahvistavat CSS-syntaksisi olevan kunnossa. Pähkinänkuoressa, se on kuin linter CSS.

projekti

“projekti” – luokka tarkoittaa sen tarkistamista, noudattaako CSS projektin ja organisaation standardeja.

viite

lopuksi viite CSS testaus tarkistaa, onko toteutettu ja renderoitu sivu näyttää siltä, miltä sen oletettiin näyttävän. Paljon edistystä on tapahtunut tällä alalla, ja asiat ovat paljon paremmin kuin ne olivat pimeällä keskiajalla Internet Explorer valta-asema.

se ei kuitenkaan tarkoita, etteikö haasteita enää olisi. Huolimatta monista tämän päivän suurimmista selaimista, joilla on yhteinen perusta-avoimen lähdekoodin Chromium-selain-joudut todennäköisesti kamppailemaan varmistaessasi, että sivusi näyttää ja käyttäytyy samalla tavalla ainakin kaikkein käytetyimmissä selaimissa.

CSS testaustyökalut: Tässä muutamia tärkeimpiä

käymme läpi joitakin käytettävissä olevia työkaluja, jotka kannattaa tarkistaa.

kuten aiemmin totesimme, CSS-testaus on usein huomiotta jätetty alue testauksessa. Yksi tämän seurauksista on käytettävissä olevien välineiden väheneminen verrattuna muihin testaustyyppeihin.

CSS nukka

CSS nukka on juuri sitä, mitä sen nimikin antaa ymmärtää: CSS-koodin linteri. Voit käyttää sitä sen verkkosivuilla tai asentaa sen npm-pakettina.

CSS Nint tarjoaa syntaksitarkistuksen, lisäksi sääntöjen avulla tarkistetaan, ettei koodi sisällä ongelmia. Voit myös kirjoittaa omat sääntösi.

BackstopJS

BackstopJS on web-sovellusten visuaalinen regressioväline. Se tekee sen vertaamalla DOM kuvakaappauksia otettu ajan. Voit helposti asentaa sen npm: llä:

BackstopJS tekee testejä päättömällä Chromella ja voi simuloida käyttäjien vuorovaikutusta Nukketeatterikommenteilla. Voit lisätä sen CI, ja se tulee integroitu Docker renderöinti.

Quijote

Quijote on css: n yksikkö-ja integraatiotestaus. Tämän kirjaston avulla voit tarkistaa, miten selain renderoi HTML-elementtejä ja tarkistaa, miten elementit liittyvät toisiinsa. Quijote toimii nykyaikaisissa työpöytä-ja mobiiliselaimissa, mutta Karman kaltaista työkalua voi käyttää myös Quijote-testien suorittamiseen useilla selaimilla.

voit asentaa tämän työkalun NPM: n kautta:

CSS critic

CSS Critic on css: n automaattisen regressiotestauksen työkalu.

se toimii vertaamalla ulkoasusi nykytilaa antamaasi referenssikuvaan. Kun asettelu muuttuu, testit epäonnistuvat.

CSS-kriitikon saa npm: n avulla:

tärkeä rajoitus on, että CSSCritic toimii vain Firefoxissa ja Chromessa.

Conclusion

CSS-testaus on usein ylenkatsottu testausmuoto. Mikä, valitettavasti, on jonkin verran järkeä, koska CSS on aina ollut eräänlainen ruma ankanpoikanen web Kolmikko.

kuitenkin, koska CSS—virheet varmasti vaikuttavat web—sovelluksen käyttöliittymään-mikä puolestaan vaikuttaa negatiivisesti käyttäjäkokemukseen-tyylilakanoiden testaaminen on ensiarvoisen tärkeää, jos aiot toimittaa suuren UX: n kävijöillesi.

tässä viestissä olemme nähneet CSS-testauksen perusteet: mitä se on, miksi sillä on väliä ja miten sen teet. Olemme myös opastaneet sinua joidenkin päätyökalujen läpi, jotka kattavat eri kategoriat: linterit, yksikkötestaus, regressiotestaus ja visuaalinen regressiotestaus. Nyt tiedät enemmän käsite CSS testaus ja työkalut käytettävissänne.

ennen paketointia, tässä viimeinen ajatus: CSS on tärkeä, eikä vain CSS-testauksen yhteydessä. Sillä on merkitystä myös muunlaisissa testeissä.

esimerkiksi päästä päähän-testausvälineissä käytetään usein CSS-luokan nimiä tunnisteina. Valitettavasti se voi olla hauras lähestymistapa. On tavallista, että kehittäjät käyttävät tekniikoita, jotka päätyvät liittämällä satunnaisia tunnisteita CSS-luokkiin. CSS-moduulit ovat esimerkki tällaisesta lähestymistavasta.

tällaisten tekniikoiden käyttö johtaa usein hauraisiin testeihin. Monet työkalut luottavat luokan nimet löytää elementtejä DOM. Kun luokkien nimet muuttuvat, testit epäonnistuvat, mikä johtaa raskaaseen testihuoltoon.

on kuitenkin olemassa parempiakin lähestymistapoja. Esimerkiksi Testim on äskettäin lisännyt ominaisuuden nimeltä paikantimen suodatus ja kartoitus. Sen avulla Testim voi suodattaa luokkanimien dynaamisen osan määrittäessään paikantimia kullekin alkuaineelle. Tämä parantaa paikannustarkkuutta ja tekee testitapauksista vankempia. Kokeile Testimin paikannussuodatusta. Hauskaa testausta!