Jak budete testovat uživatelské rozhraní webových stránek?

Vizuální testování, testování napříč prohlížeči, testování responzivního designu, testování přístupnosti (accessibility).

Vizuální testování: kontrola vzhledu prvků (barva, velikost, písmo) podle návrhových maket, kontrola okrajů, zarovnání, absence překrytí. Nástroje: ruční kontrola, vývojářské nástroje v prohlížeči, specializované nástroje pro vizuální regresní testování (například Applitools, Percy).

Testování napříč prohlížeči: kontrola správného zobrazení a funkčnosti UI v různých prohlížečích (Chrome, Firefox, Edge, Safari) a jejich verzích. Nástroje: BrowserStack, LambdaTest, Docker kontejnery s různými prohlížeči, ruční testování.

Testování responzivního designu: kontrola zobrazení a funkčnosti UI na různých rozlišeních obrazovky a zařízeních (PC, tablety, smartphony). Metody: změna velikosti okna prohlížeče, použití režimu emulace zařízení v vývojářských nástrojích, testování na reálných zařízeních.

Testování přístupnosti (Accessibility - A11y): kontrola souladu UI s normami přístupnosti (WCAG) pro uživatele s omezenými schopnostmi. Aspekty: sémantika HTML, správnost atributů ARIA, dostupnost alternativního textu pro obrázky, kontrast barev, navigace klávesnicí, podpora čteček obrazovky. Nástroje: Lighthouse (vestavěný do Chrome DevTools), Axe DevTools, WAVE Evaluation Tool, ruční testování s čtečkami obrazovky (NVDA, JAWS, VoiceOver).

Funkční testování UI: kontrola funkčnosti interaktivních prvků (tlačítka, formuláře, odkazy), přechody stránek, interakce s prvky. Metody: ruční testování, automatizace UI testů.

Automatizace UI testů: psaní skriptů pro automatické provádění testovacích případů na UI. Frameworky: Selenium WebDriver, Cypress, Playwright, TestCafe.

Příklad automatizovaného testu pro kontrolu přítomnosti prvku:

# Příklad v Pythonu s použitím Selenium
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.chrome.service import Service

# Určení cesty k ovladači Chrome
service = Service('/cesta/k/chromedriver')
driver = webdriver.Chrome(service=service)

try:
    driver.get("https://example.com")
    # Kontrola, že na stránce je nadpis h1
    header_element = driver.find_element(By.TAG_NAME, "h1")
    print(f"Nadpis nalezen: {header_element.text}")
except Exception as e:
    print(f"Chyba při hledání nadpisu: {e}")
finally:
    driver.quit()

Porovnávací tabulka automatizačních UI frameworků:

Framework	Podporované prohlížeče	Programovací jazyky	Rychlost provádění	Vlastnosti
Selenium WebDriver	Všechny hlavní	Java, Python, C#, Ruby	Střední	Průmyslový standard, flexibilita
Cypress	Chrome, Firefox, Edge	JavaScript	Rychlá	Vestavěný testovací běžec, debugging
Playwright	Chromium, Firefox, WebKit	JavaScript, Python, C#	Rychlá	Podpora všech moderních prohlížečů, auto-waiting
TestCafe	Všechny hlavní	JavaScript	Rychlá	Není potřeba web driverů

Strategie testování UI může zahrnovat:

• Určení nejkritičtějších UI prvků a scénářů interakce s nimi.
• Vytvoření komplexních testovacích případů pokrývajících různé stavy UI (například aktivní pole, pole s chybou, zakázaný prvek).
• Použití kombinace ručního a automatizovaného testování.
• Pravidelné provádění regresních testů UI po každé změně v kódu.
• Provádění explorativního testování za účelem odhalení nejasných problémů.