Lekce 1 - Úvod do praktického testování softwaru
V úvodním tutoriálu kurzu praktického testování projektů si vysvětlíme, proč je důležité testovat. Představíme si základní přístupy k testování softwaru, včetně validace formulářů, testování single-page a multiple-page aplikací nebo testování responzivity. Zaměříme se také na rozdíly mezi User Experience (UX) a User Interface (UI), abychom zajistili komplexní pohled na testování.
Minimální požadavky
Pro úspěšné absolvování kurzu je nutná znalost jazyka Python alespoň v rozsahu našich kurzů:
- Základní konstrukce jazyka Python,
- Objektově orientované programování v Pythonu,
- Testování v Pythonu.
A dále také znalosti z kurzu:
Praktické testování projektů je navazujícím bodem osnovy výše, který by měl každý dobrý programátor znát, aby jeho práce měla skutečnou hodnotu.
Úvod do testování softwaru
Testování softwaru je nezbytnou součástí vývoje, která zajišťuje, že aplikace splňuje požadavky, je spolehlivá, bezpečná a uživatelsky přívětivá.
Testování softwaru je proces ověřování a validace, který má za cíl:
- Odhalit chyby v aplikaci.
- Ověřit, zda aplikace splňuje specifikaci.
- Zajistit, že aplikace funguje podle očekávání koncových uživatelů.
Testování softwaru se řadí mezi dobré praktiky vývoje softwaru a pomáhá odhalovat chyby již během procesu vývoje, čímž minimalizuje náklady na jejich pozdější opravy.
Postup testování softwaru
Postup testování softwaru zahrnuje následující kroky:
- sběr požadavků – identifikace části k testování,
- plánování testů – výběr vhodných metod a nástrojů,
- příprava testovacích případů – definování scénářů a dat pro testování,
- provedení testů – manuální nebo automatizované spuštění testovacích případů,
- identifikace a oprava chyb – zaznamenání nalezených problémů a jejich oprava,
- uzavření testování – analýza výsledků, vytvoření zprávy o testování a příprava softwaru k nasazení.
Postup vidíme na následujícím diagramu:
Druhy testování softwaru
Existují dva hlavní typy testování:
- Manuální testování – Jedná se o testy prováděné ručně testery, kteří aplikaci kontrolují podle definovaných scénářů.
- Automatizované testování – Automatizované testování používá k provádění testů software, což vede k rychlejšímu a efektivnějšímu testování. Automatizace je zvláště užitečná při testování rozsáhlých aplikací nebo opakujících se úkolů.
Testování různých druhů aplikací
Nyní si představíme různé druhy aplikací a popíšeme si, na co se při jejich testování zaměřit.
Formuláře a jejich validace
Formuláře slouží k načítání uživatelských vstupů a jsou klíčovou součástí většiny webových aplikací. Validace zajišťuje, že uživatelé zadávají data ve správném formátu a minimalizují se chyby.
U formulářů testujeme:
- Validaci povinných polí – Zda uživatel nemůže odeslat formulář bez vyplnění povinného pole.
- Formáty vstupu – Zda vstupy odpovídají očekávaným
formátům (např. e-mailová adresa obsahuje
@a doménu). - Hranice vstupu – Zda jsou zadávaná data v povoleném rozsahu (např. minimální či maximální délka hesla).
- Chybové hlášky – Zda je zobrazená chybová hláška jasná a srozumitelná.
- Zabezpečení vstupu – Zda formulář odolává útokům, jako je SQL injection nebo XSS.
Testovací scénář pro validaci e-mailu
Ukažme si příklad testovacího scénáře pro zadání e-mailu:
| Testovací případ | Vstup | Očekávaný výsledek |
|---|---|---|
| platný e-mail | user@example.com | Formulář je odeslán úspěšně. |
| neplatný e-mail | user@com | Zobrazí se chybová hláška. |
| prázdné pole | (žádný vstup) | "Toto pole je povinné." |
Single-page aplikace (SPA)
SPA jsou webové aplikace (stránky), které načítají obsah dynamicky bez nutnosti znovu načítat celou stránku. Celou single-page aplikaci tedy představuje jediná stránka, která se stáhne ze serveru. Po stáhnutí je u klienta přítomná kompletní aplikace a klient již nikdy nemusí přejít na jinou stránku. SPA minimalizuje server a klade důraz na klientskou část. To přináší nové výzvy pro testování. Příkladem SPA jsou stránky www.gmail.com nebo www.netflix.com.
SPA běží ve webovém prohlížeči a komunikuje se vzdáleným serverem prostřednictvím aplikačního rozhraní, tzv. API. API slouží jako prostředník mezi aplikací a serverem, umožňuje načítání a odesílání dat bez nutnosti znovu načítat celou stránku. Více si o API vysvětlíme v dalších lekcích.
Princip technologie single-page application znázorňuje tento diagram:
Na obrázku vidíme klienta (např. uživatele s otevřeným Netflixem ve webovém prohlížeči), jak komunikuje skrz různé vrstvy aplikace se vzdáleným serverem, který mu posílá data. Data se přenášejí ve formátu JSON nebo XML a aplikace je zpracovává pomocí JavaScriptu.
Díky lokálnímu úložišti může aplikace fungovat i bez internetu. Navigační API umožňuje plynulé přechody mezi stránkami bez opětovného načítání.
U SPA se zaměřujeme na:
- Načítání obsahu – Ověřujeme, zda se data načítají dynamicky při změně stavu, a kontrolujeme rychlost načítání.
- URL a směrování – Ověřujeme, zda změna URL odpovídá očekávanému obsahu.
- Interakce uživatele – Testujeme tlačítka, formuláře a interaktivní prvky.
- Funkčnost při ztrátě připojení – Je-li specifikací požadována podpora offline režimu, simulujeme výpadek internetu a ověřujeme, zda aplikace správně zachovává data, obnovuje spojení a synchronizuje změny po opětovném připojení.
Multiple-page aplikace (MPA)
Multiple-page aplikace jsou tradiční webové aplikace, kde každá akce vyžaduje načtení nové stránky. Aplikace tedy běží na serveru. Na základě požadavků od klienta se vygeneruje nová webová stránka a pošle se klientu. Např. web ITnetwork, z kterého teď text čtete, je MPA. Každá lekce je nová stránka.
Graficky situace vypadá takto:
MPA vyžadují testování:
- Přechodů mezi stránkami – Ověření, zda navigace mezi stránkami funguje správně.
- Stavu relací – Kontrola, zda se relace uživatele přenáší mezi stránkami (např. přihlášení).
- Stavu formulářů – Ověření, zda se data správně předávají mezi stránkami.
- Načítání zdrojů – Testování, zda se načítají všechny potřebné zdroje, jako jsou CSS a JavaScript.
Responzivní stránky
Responzivní stránky jsou takové, které se dokážou přizpůsobit velikosti displeje zařízení podle určitých pravidel, definovaných nejčastěji pomocí takzvaných breakpointů. Breakpointy nastavujeme, od jaké šířky zařízení se má aplikovat určitý CSS styl, aby byl obsah přehledný na mobilních telefonech, tabletech i počítačích.
Testování responzivního designu
U testování se zaměřujeme na:
- Layout – Ověření, zda se prvky správně přizpůsobují velikosti obrazovky.
- Interakce – Kontrola, zda jsou tlačítka i formuláře snadno použitelné na mobilu.
- Různá zařízení – Testujeme při různých rozlišeních (mobil, tablet, desktop).
Na videu níže vidíme, jak se obsah stránky přizpůsobuje menšímu displeji:
Pro testování responzivních stránek můžeme využít vývojářskou konzoli prohlížeče (F12), která umožňuje simulovat různé druhy zařízení, velikosti a rozlišení obrazovky.
User Experience a User Interface
Termín User Experience (UX) označuje obor, který se zabývá zlepšováním kvality uživatelovy interakce s produkty, jako jsou webové stránky, aplikace, stroje nebo jiné systémy. UX se zaměřuje na to, aby produkty byly nejen snadno použitelné, ale také příjemné a přínosné pro uživatele.
UX se někdy mylně zaměňuje s User Interface (UI), tedy s „uživatelským rozhraním“. Tyto dvě disciplíny však nejsou synonyma, i když spolu úzce souvisejí. UI design se zaměřuje na vizuální a interaktivní prvky rozhraní, jako jsou barvy, tlačítka, typografie nebo uspořádání prvků. UX design naopak zahrnuje celý proces tvorby uživatelské zkušenosti – od analýzy potřeb uživatelů přes návrh a testování prototypů až po finální podobu produktu.
Pokud například vytvoříme rozhraní, které je vizuálně atraktivní, ale obtížně použitelné, můžeme říci, že takový produkt má dobré UI, ale špatné UX. Naopak produkt, který se snadno ovládá, ale není vizuálně přitažlivý, bude mít dobré UX, ale slabé UI. V ideálním případě však UX i UI spolupracují, aby vytvořily produkt, který je funkční, snadno použitelný a esteticky příjemný.
UX se tedy zaměřuje na to, jak snadno, efektivně a příjemně mohou uživatelé produkt používat. UI zase řeší, jak tento produkt vypadá a jak uživatelé interagují s jednotlivými prvky. Obě disciplíny společně tvoří základ kvalitní uživatelské zkušenosti.
Testování UX a UI
Testování UX zahrnuje například uživatelské testy, heatmapy nebo zpětnou vazbu od uživatelů. UI testování ověřuje konzistenci designu, kontrasty barev a čitelnost textu.
Podívejme se na toto řešení rozhraní výtahových tlačítek:
Vidíme, že rozhraní je nepřehledné a uživatele bude mást. Dobré rozhraní, a to nejen výtahu, ale i webu či programu, musí být na první pohled pochopitelné a snadno použitelné.
Druhým příkladem může být rozhraní autorádia a převodovky:
Velkým stříbrným kolečkem může řidič ovládat automatickou převodovku, kolečkem napravo si může upravovat hlasitost. Nepozornému řidiči by se mohlo stát, že místo zesílení rádia vyřadí převod. Rozhraní a jeho použitelnost je jedním z rozhodujících faktorů při výběru produktu, nepraktické rozhraní tedy může uživatele odradit.
V příští lekci, Úvod do REST API a moderních webových aplikací, si vysvětlíme, proč se moderní aplikace vytvářejí pomocí API serveru a jak takový server funguje.
