levikaldor.hu minőségkapu

Egy parancs, ami élesítés előtt végignézi az összes oldalt, és megállítja a pusht, ha bármi romlott.

típus
Tesztautomatizálás
szerepem
Tervezés, fejlesztés, tesztelés
technológia
Astro, TypeScript, Playwright, axe-core, Lighthouse, Vitest

Kiinduló helyzet

Egy weboldal minősége csendben romlik. Egy új kép lassítja a betöltést, egy új szín rontja a kontrasztot, egy beépített widget adatot küld egy harmadik félnek. Ezt kézzel minden változtatás után ellenőrizni nem reális, ezért gépre bíztam.

Mit ellenőriz

Egyetlen parancs (npm run audit) lefordítja az oldalt, végignézi az összes lapot, és megbukik, ha bármelyik szabály sérül:

  • SEO: a title és a description hossza és egyedisége, canonical, hreflang párok, egyetlen H1, strukturált adatok, sitemap, robots.txt, törött belső linkek.
  • Akadálymentesség: axe-core a WCAG 2.2 AA szabályaival, világos és sötét témában, mobil és asztali méreten. Playwrighttal a billentyűzetes használat is: skip link, látható fókusz, mobilmenü Esc-re, űrlap hibaösszesítő.
  • Reflow: 320 px széles nézetben egyik oldal sem görgethető vízszintesen.
  • Adatvédelem: a böngésző egyetlen kérése sem mehet harmadik félhez, nem jöhet létre süti, és minden külső szolgáltatásnak szerepelnie kell az adatkezelési nyilvántartásban.
  • Jogi oldalak: mindkét nyelven léteznek, minden oldal láblécéből elérhetők, és a hatálydátumuk naprakész.
  • Régi címek: egyik korábban nyilvános URL sem adhat 404-et.
  • Lighthouse: 100 pont mind a négy kategóriában, mobilon és asztalon, sablononként egy oldalon.

Döntések

Git hook, nem CI. Az ellenőrzés a pre-push hookban fut, és csak a main ágra menő pushnál, mert a Vercel onnan élesít. Ha az utolsó teljes futás óta egyik figyelt fájl sem változott, kihagyja, így egy második push nem vár újra öt percet.

Lighthouse mintán. Az első változat minden oldalon lefuttatta a Lighthouse-t, és egy óránál tovább tartott. Most sablononként egy oldalt mér, az összes oldalt pedig élesítés után a PageSpeed Insights méri.

Az eredmény az oldalon. Egy sikeres teljes futás után az audit beírja a dátumot, az oldalak és a tesztek számát egy kis JSON-fájlba. A főoldal és a lábléc ebből mutatja az utolsó ellenőrzést.

Hogyan teszteltem

Az ellenőrzők maguk is tesztelve vannak Vitesttel, tesztvezérelt fejlesztéssel: minden szabálynak van tesztje, ami előbb megbukott, és csak a javítás után ment át. Egy automatizált code review talált benne hibát is. Az egyik ilyen az volt, hogy egy hibaoldal helyett csendben egy másikat ellenőrzött. Ezt is előbb egy bukó teszt mutatta meg, utána javítottam.

Másképp csinálnám

A Lighthouse a gép terhelésére érzékeny: ha mellette fut egy fejlesztői szerver, 98 vagy 99 is kijöhet hibátlan kódon. Ma már az elejétől külön kezelném a mérési zajt, és technikai hiba esetén egyszer automatikusan újrafuttatnám a mérést. Ez utóbbi azóta bekerült.