Výhody automatizovaného vizuálního testování

I malá vizuální chyba na webu nebo v aplikaci může mít negativní vliv na uživatelskou zkušenost. A to si velký bankovní klient typu Moneta Money Bank nemůže dovolit. Proto jsme pro něj spustili pilotní projekt automatického vizuální testování s cílem zajistit pixel perfect řešení.

Proč nepodceňovat vizuální testování?

Když se řekne softwarová chyba, obvykle se nám vybaví selhání a neočekávané chování způsobené chybami v logice systému. Prováděním funkčních testů se snažíme tyto chyby odhalit co nejdříve. Někdy se však může stát, že tester přehlédne jiné typy chyb, které jsou pro uživatele zřejmější a rozpoznatelnější a v konečném důsledku i rušivější. Mluvíme o takzvaných vizuálních chybách.

Právě vizuální chyby způsobují nesprávné zobrazení rozhraní, a tím zhoršují uživatelský zážitek zákazníků a klientů.

Proto je důležité i tyto chyby odhalit včas, protože mohou velmi negativně ovlivnit použitelnost a přístupnost aplikace či webu a mít tak přímý dopad na UX.

K odhalování těchto vizuálních bugů slouží vizuální regresní testy, které ověřují, zda vzhled aplikace nedoznal změnou kódu neočekávaných změn, a to tak, že nejprve pořídí snímek obrazovky (výchozí stav) aplikace a po každém testu zkontrolují, zda se vzhledem k němu nezměnil. A dokáží odhalit, zda po provedení změn v systému nevznikly právě vizuální chyby.

Výhody automatizovaného vizuálního regresního testování

Software pro vizuální regresní testování analyzuje obrázky "pixel po pixelu" a hledá změny, které nemusí být nutně viditelné lidským okem, ale potenciálně viditelně odlišné pro počítač či zařízení. Například v nové verzi prohlížeče může být několik subpixelů jinak zaoblených, a daný obrázek je kvůli tomu mírně posunutý o jeden pixel - což by počítač okamžitě pochopil jako rozdíl, ale při povrchní kontrole lidskýma očima by to nebylo zjistitelné.

Automatizované vizuální regresní testování (AVRT) má několik výhod:

1) Rychlost:

AVRT může automatizovat procesy, které by jinak museli být prováděny ručně, což usnadňuje a urychluje proces testování.

2) Spolehlivost:

AVRT může být nastaven tak, aby provedl stejný test v mnoha různých prostředích, prohlížečích nebo s různými verzemi softwaru, což snižuje riziko chyb, které by mohly být způsobeny ručním testováním.

3) Objektivita:

AVRT automaticky porovnává aktuální verzi s referenční verzí, což snižuje subjektivitu spojenou s ručním testováním.

4) Schopnost zachytit změny:

AVRT může detekovat i malé změny v rozložení nebo designu, což je obzvláště užitečné pro testování webových stránek nebo mobilních aplikací.

5) Schopnost rozsáhlého testování:

AVRT umožňuje provést velké množství testů v krátkém čase, což umožňuje testovat více variant a kombinací.

Moneta Money Bank: Automatizované regresní testování zrychluje odhalování chyb na bankovním portálu

Právě díky těmto testům a výhodám, které s sebou nesou, jsme spustili pilotní projekt automatizovaného vizuálního testování pro našeho klienta Moneta Money Bank, který provozuje rozsáhlý webový portál s důrazem na pozitivní uživatelskou zkušenost.

Plně responzivní web MONETA Money Bank je postavený na JAVA EE portálu Liferay DXP ve spojení s moderní technologií dynamické frontendové knihovny ReactJS. Tato kombinace využívající modulární architekturu zajišťuje dlouhodobě udržitelný přístup pro další agilní vývoj a budování struktury a obsahu internetové prezentace. Využívá optimalizaci například ve formě adaptivních obrázků, kompresi dat GZIP či stripování.

Obsah webu si tvoří a upravuje sám klient dle potřeby. Proto při těchto webových úpravách a změnách často zasáhne negativně lidský faktor, který může způsobit to, že se webové rozhraní i kvůli malé neúmyslné chybě vizuálně rozbije.

V pilotní fázi proto zajišťujeme vizuální kontrolu pro desítku hlavních stránek, a to prostřednictvím nástroje Percy.io od firmy BrowserStack, který je momentálně jedničkou v oblasti automatizované kontroly vzhledu stránek především díky kombinaci kvality algoritmu „pixel by pixel“ a času potřebného na kontrolu velkého množství screenshotů.

Pro zohlednění potřeb našeho klienta jsme také vytvořili řešení podporující různé viewporty, momentálně aktivně kontrolujeme view port pro full HD, mobilní zařízení i tablety.

Percy.io jednoduše urychluje testování a zachytí i malé nechtěné vizuální změny, které často vznikají jako vedlejší účinky změn kódu nebo použitých knihoven. Klient díky procesu automatizace šetří čas, peníze a výsledkem je uživatelsky přívětivý webový design bez nechtěných bugů.