QA lista

Vizuális, viselkedési és teljesítmény-ellenőrzések annak, aki az integrációt teszteli (nem feltétlenül a fejlesztő, aki építette).

Akkor használd, ha

Indulás előtti QA-t csinálsz egy oldalon, ami egy Lupian Rive animációt tartalmaz.
Bejött egy hibajelentés, és strukturáltan szeretnéd reprodukálni.

Mire lesz szükséged

A staging vagy éles URL.
A preview.mp4 vagy a demo.lupian.studio referenciaként, hogy hogy kellene kinéznie.
Böngésző DevTools.

Vizuális

[ ] Az animáció a szándékolt méretben és képarányban jelenik meg.
[ ] Nincs letterbox-sáv vagy levágás ott, ahol a design nem számít rá.
[ ] A szélek élesek Retina / 4K kijelzőn (nem homályos).
[ ] A színek egyeznek a preview.mp4-fel.
[ ] Első töltődéskor nincs villanás vagy „beugrás” (fontold meg a fallback képből egy fade-int).
[ ] A fallback kép eltűnik, amint az animáció kész.

Lejátszás

[ ] Az animáció a vártnak megfelelően autoplay-elődik (vagy idle marad, ha a handoff.md ezt mondja).
[ ] A loopok és átmenetek a preview.mp4-fel egyeznek.
[ ] Nincs frame-akadás vagy beragadás.

Interaktivitás

Minden, a handoff.md-ben felsorolt inputra/eseményre:

[ ] A hover, kattintás, drag (ahol releváns) a várt állapotváltást váltja ki.
[ ] A trigger inputok akciónként pontosan egyszer sülnek el.
[ ] A számokra épülő inputok (pl. scroll által vezérelt progress) végig simán mozognak a teljes tartományon.
[ ] A handoff.md-ben felsorolt eseményeket a körülvevő oldal megkapja, amikor kell.
[ ] Élesetek: gyors kattintgatás, tartott hover, a canvasből kihúzott drag — nincs beragadt állapot.

Reszponzivitás

[ ] Átméretezed a böngészőablakot — az animáció újra felveszi a méretet, éles marad.
[ ] Mobil szélességen (≤ 480px): nincs levágás vagy átfedés a környező UI-jal.
[ ] Tablet szélességen (~ 768–1024px): nincs levágás vagy átfedés.
[ ] Valódi mobil eszközön a touch input működik (nincs scroll-elnyelés, nincs elveszett koppintás).

Böngésző mátrix

[ ] Chrome (latest, desktop).
[ ] Safari (latest, desktop).
[ ] Firefox (latest, desktop).
[ ] Edge (latest, desktop).
[ ] Safari iOS-en (valódi eszköz).
[ ] Chrome Androidon (valódi eszköz).

Teljesítmény

[ ] Az FPS ~60-on marad a célzott eszközökön, miközben az animáció megy.
[ ] Idle állapotban a CPU/GPU nem szökik 100%-ra.
[ ] A Lighthouse / Web Vitals értékek a vártnak megfelelő tartományban vannak.
[ ] Több animációt tartalmazó oldalon a később érkező példányok is rendereletődnek (nincs fekete canvas — lásd: Több animáció egy oldalon).

Memória

[ ] Navigálj az oldalra és vissza, többször. A memória visszatér az alapszintre (DevTools → Memory → heap snapshot).
[ ] Nincs „WebGL context lost” figyelmeztetés a konzolon.

Konzol és hálózat

[ ] A konzolon nincs hiba.
[ ] A .riv kérésen nincs 404 vagy CORS figyelmeztetés.
[ ] Második oldalbetöltéskor a .riv cache-ből jön (a méret „(disk cache)” / „(memory cache)”-t mutat).

Akadálymentesség

[ ] Ha az animáció dekoratív, a canvasen aria-hidden="true" van, vagy nincs bejelentett szerepe.
[ ] Ha az animáció érdemi tartalmat közöl, a körülvevő HTML ugyanazt az információt eljuttatja az asszisztív technológiáknak (szöveg a canvas mellett, alt szöveg a fallback képen).
[ ] Az animáció szüneteltethető, vagy nem sérti a felhasználó prefers-reduced-motion beállítását (ahol a design ezt megkívánja).

Ha valami nem stimmel

Tünet alapján: Hibakeresés.
A hiba elküldése a Lupiannek: Mit küldj a Lupiannek.

Kapcsolódó