Ako budete testovať používateľské rozhranie webových stránok?

Vizuálne testovanie, testovanie naprieč prehliadačmi, testovanie responzívneho dizajnu, testovanie prístupnosti (accessibility).

Vizuálne testovanie: kontrola vzhľadu prvkov (farba, veľkosť, písmo) podľa dizajn makiet, kontrola okrajov, zarovnania, absencie prekrytia. Nástroje: ručné testovanie, nástroje pre vývojárov v prehliadači, špecializované nástroje na vizuálne regresné testovanie (napríklad Applitools, Percy).

Testovanie naprieč prehliadačmi: kontrola správneho zobrazenia a fungovania UI v rôznych prehliadačoch (Chrome, Firefox, Edge, Safari) a ich verziách. Nástroje: BrowserStack, LambdaTest, Docker kontajnery s rôznymi prehliadačmi, ručné testovanie.

Testovanie responzívneho dizajnu: kontrola zobrazenia a práce UI na rôznych rozlíšeniach obrazovky a zariadeniach (PC, tablety, smartfóny). Metódy: zmena veľkosti okna prehliadača, použitie režimu emulácie zariadení v nástrojoch pre vývoj, testovanie na reálnych zariadeniach.

Testovanie prístupnosti (Accessibility - A11y): kontrola súladu UI so štandardmi prístupnosti (WCAG) pre používateľov s obmedzenými možnosťami. Aspekty: sémantika HTML, správnosť ARIA atribútov, dostupnosť alternatívneho textu pre obrázky, kontrast farieb, navigácia klávesnicou, podpora pre čítače obrazovky. Nástroje: Lighthouse (vestavěný v Chrome DevTools), Axe DevTools, WAVE Evaluation Tool, ručné testovanie s čítačmi obrazovky (NVDA, JAWS, VoiceOver).

Funkčné testovanie UI: kontrola funkčnosti interaktívnych prvkov (tlačidlá, formuláre, odkazy), prechody medzi stránkami, interakcia s prvkami. Metódy: ručné testovanie, automatizácia UI testov.

Automatizácia UI testov: písanie skriptov pre automatické vykonávanie testovacích prípadov na UI. Frameworky: Selenium WebDriver, Cypress, Playwright, TestCafe.

Príklad automatizovaného testu na kontrolu prítomnosti prvku:

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

# Uveďte cestu k ovládaču Chrome
service = Service('/cesta/k/chromedriver')
driver = webdriver.Chrome(service=service)

try:
    driver.get("https://example.com")
    # Kontrola, či je na stránke nadpis h1
    header_element = driver.find_element(By.TAG_NAME, "h1")
    print(f"Nadpis nájdený: {header_element.text}")
except Exception as e:
    print(f"Chyba pri hľadaní nadpisu: {e}")
finally:
    driver.quit()

Porovnávacia tabuľka automatizačných UI rámcov:

Rámec	Podporované prehliadače	Programovacie jazyky	Rýchlosť vykonávania	Funkcie
Selenium WebDriver	Všetky hlavné	Java, Python, C#, Ruby	Stredná	Priemyselný štandard, flexibilita
Cypress	Chrome, Firefox, Edge	JavaScript	Rýchla	Zabudovaný testovací runner, debugging
Playwright	Chromium, Firefox, WebKit	JavaScript, Python, C#	Rýchla	Podpora všetkých moderných prehliadačov, auto-waiting
TestCafe	Všetky hlavné	JavaScript	Rýchla	Nie je potrebný web driver

Stratégia testovania UI môže zahŕňať:

• Určenie najkritickejších UI prvkov a scenárov interakcie s nimi.
• Vytvorenie komplexných testovacích prípadov pokrývajúcich rôzne stavy UI (napr. aktívne pole, pole s chybou, zakázaný prvok).
• Použitie kombinácie ručného a automatizovaného testovania.
• Pravidelné vykonávanie regresných testov UI po každej zmene v kóde.
• Vykonávanie exploratívneho testovania na odhalenie nejasných problémov.