Jak jsme 4 manuální testery nahradili 1 knihovnou

Úvod

Při vývoji aplikace skládající se z více modulů, které se navzájem ovlivňují, se může během okamžiku stát, že se rozhodí celý finální design produktu. Od navzájem se překrývajících textů, až po podivně obtažené obrázky, kdy na levé části máte šířku 10px a na druhé 30px.

Taková aplikace pak u zákazníků dokáže vést nejen ke ztrátě důvěry v danou aplikaci, ale třeba i k většímu počtu chyb v objednávce.

Můžeme se dokonce setkat i se zmizením tlačítka „odeslat objednávku“ nebo s podobnými přešlapy vedoucími k propadu tržeb a poškození reputace klienta. Tomu je samozřejmě potřeba předcházet...

Cíl projektu

Dostali jsme za úkol poskytnout dlouhodobé řešení problémů s vizuálním testováním webových aplikací, na které zákazníci narážejí. Zároveň jsme měli vyvinout knihovnu, která by byla univerzální a dala se použít nezávisle na projektu. Díky tomu jsme měli být schopni vizuálně testovat jakýkoliv projekt plně automaticky a během pár chvil.

Startovní pozice

Zákazník pro své prodejce vyvíjel webovou aplikaci složenou z několika modulů. Držel si 4 manuální testery, kdy každý z nich po releasu opakoval okolo 100-200 stejných testů, ve kterých měřil pohyb prvků o pixely. Ti k tomu používali virtuální pravítko a porovnávali, zda poloha prvků souhlasí s dokumentací. Tato úmorná a nudná práce jim často zabrala celý jeden týden - tedy polovinu času ze sprintu!

Nastavení očekávání

Na samotném začátku jsme si museli nadefinovat, co od knihovny očekáváme, co je v našich silách zvládnout do termínu odevzdání a co má největší prioritu. Z analýzy testů, aplikace a práce manuálních testerů vyplynuly tyto body:

1. Knihovna zvládne podle předem vytvořených screenů rozeznat, zda došlo k nějakému pohybu na stránce
2. Knihovna bude plně kompatibilní s Robot frameworkem (kvůli zákazníkovu přání), ale v ideálním případě může fungovat nezávisle na něm
3. Knihovna musí umět nejen rozeznávat rozdíly na obrázcích, ale také ignorovat určité oblasti, které se dokážou měnit dynamicky (například reklamy nebo různé posuvné prvky na stránce)
4. Knihovna bude umět vyrábět screenshoty v různých rozlišeních a také výřezy z nich
5. Velký důraz musí být kladen nejen na rychlost vývoje, ale v případě potřeby i na úpravy od samotných vývojářů aplikace

Další kroky

Díky výše popsané analýze jsme si mohli dovolit zvolit jako hlavní jazyk Python, který pro nás představoval hned několik výhod: je jednoduchý, přehledný, rychlý na vývoj a navíc v něm zákazníkovi vývojáři již uměli pracovat. Úpravu knihovny pro budoucí potřeby projektu, by proto pak měli zvládat sami bez něčí pomoci.

Samotný vývoj pak byl otázkou několika dnů. Jako první a nejdůležitější funkce byla naprogramována metoda pro porovnávání dvou obrázků. V základním principu jde o využití knihovny OpenCV k převodu původního screenu webové aplikace a aktuálního screenu na matici jedniček a nul, které se pak následně porovnají a vrátí hodnotu. V několika dalších dnech jsme pak naimplementovali funkce na vytváření screenů (včetně výřezů z obrázku dle vstupních parametrů) a ignorování oblastí dle vložených argumentů.

V samotném závěru vývoje pak došlo na komunikaci přímo s RF - bylo potřeba vyřešit nejen chybové hlášky, ale i vkládání obrázků se zvýrazněnými místy výskytu chyb. Následovalo vyřešení našeho nejpalčivějšího problému - samotnou instalaci knihovny, která obsahuje spoustu podpůrných knihoven.

Jako nejlepší přístup se nakonec ukázalo vytváření pip adresáře a sourcování kódu na githubu. Díky tomu jsme zajistili rychlé šíření knihovny mezi vývojáře, a to včetně updatování knihovny. Nyní můžeme dát pouze pip install WatchUI a následně v robotu zadat Library WatchUI pro její používání.

S čím jsme pracovali

Jak již bylo zmíněno, jako hlavní jazyk knihovny pro rozeznávání rozdílů byl vybrán Python. K němu se postupně přidaly tyto knihovny:

• OpenCV je svobodná a otevřená multiplatformní knihovna pro manipulaci s obrazem
• Pandas - softwarová knihovna napsaná pro programovací jazyk Python pro manipulaci a analýzu dat
• Pillow - Je knihovna pro pro otevírání, manipulaci a ukládání mnoha různých formátů obrazových souborů.
• NumPy je základní knihovna pro vědce a analytiky, kteří pracují s Pythonem. Definuje typ pro n-rozměrné homogenní pole (nejčastěji čísel) a API pro práci s takovým polem.
• scikit-image je open-source knihovna pro zpracování obrázků pro programovací jazyk Python
• scikit-learn je bezplatná softwarová knihovna pro strojové učení pro programovací jazyk Python.
• Imutils – Knihovna pro základní funkce zpracování obrázků
• Robot Framework – testovací framework napsaný v pythonu
• Selenium - Knihovna pro používání webových prohlížečů
• robotframework-seleniumLibrary – knihovna pro robotframework a selenium

S čím jsme „bojovali“

Během vývoje jsme narazili na dvě překážky. Ta první se týkala samotného designu knihovny, kdy jsme si i přes první analýzu a nasazení na testy neuvědomili, že je třeba naprogramovat možnost nastavení některých funkcí, jako třeba možnost vybrat si do jaké složky se budou výsledné obrázky ukládat, nebo že bude třeba vkládat obrázky se zvýrazněnými rozdíly i do samotného reportu vytvářeného skrz Robot framework.

Druhý problém nebyl na rozdíl od toho prvního složitý z hlediska teorie (jak řešení navrhnout tak, aby bylo příjemné pro uživatele), ale z hlediska času. Potřebovali jsme naimplementovat co nejjednodušší vytváření pip package, dokumentace a možnosti aktualizovat kód nezávisle na contributorovi.

Vzhledem k tomu, že jsme po celou dobu vývoje používali github, zcela logicky vyplynulo, že využijeme i jeho funkci github actions. To byla velká výzva, protože se jednalo o naše první setkání s tímto nástrojem. Přesto se nám po několika dnech podařilo mít plně funkční CI, kde dojde k „mergnutí“ na základě odsouhlasení změny v kódu majitelem repositáře. Tak se nejdřív spustí testy, a pokud dopadnou dobře, dojde k vytvoření pip package a jeho zveřejnění na pypi.org. Odtud si ho pak ostatní uživatelé knihovny můžou snadno stáhnout.

Co jsme získali

K velkému nadšení všech se nám podařilo vytvořit neomezeně šiřitelnou knihovnu, která je volně dostupná a momentálně používaná nejen v Čechách, ale třeba i ve Francii. Naše knihovna udělala radost hlavně našemu zákazníkovi. Umožnila mu totiž testery, kteří trávili každý měsíc půlku sprintu kontrolováním designu, přesunout na jiné testování. V rámci projektu jsme tak dosáhli úspory času i peněz.