Kako ćete testirati korisnički interfejs web sajtova?

Vizuelno testiranje, testiranje pretraživača, testiranje responzivnog dizajna, testiranje pristupačnosti (accessibility).

Vizuelno testiranje: provera izgleda elemenata (boja, veličina, font) u skladu sa dizajn maketama, provera margina, poravnanja, odsustva preklapanja. Alati: ručno testiranje, alati za razvoj u pretraživaču, specijalizovani alati za vizuelno regresiono testiranje (npr. Applitools, Percy).

Testiranje pretraživača: provera ispravnog prikaza i funkcionisanja UI u različitim pretraživačima (Chrome, Firefox, Edge, Safari) i njihovim verzijama. Alati: BrowserStack, LambdaTest, Docker kontejneri sa različitim pretraživačima, ručno testiranje.

Testiranje responzivnog dizajna: provera prikaza i rada UI na različitim rezolucijama ekrana i uređajima (PC, tableti, pametni telefoni). Metode: promena veličine prozora pretraživača, korišćenje režima emulacije uređaja u alatima za razvoj, testiranje na pravim uređajima.

Testiranje pristupačnosti (Accessibility - A11y): provera usklađenosti UI sa standardima pristupačnosti (WCAG) za korisnike sa ograničenim mogućnostima. Aspekti: semantika HTML, ispravnost ARIA atributa, dostupnost alternativnog teksta za slike, kontrast boja, navigacija tastaturom, podrška za čitače ekrana. Alati: Lighthouse (ugrađen u Chrome DevTools), Axe DevTools, WAVE Evaluation Tool, ručno testiranje sa čitačima ekrana (NVDA, JAWS, VoiceOver).

Funkcionalno testiranje UI: provera funkcionalnosti interaktivnih elemenata (dugmad, forme, linkovi), prelazi između stranica, interakcija sa elementima. Metode: ručno testiranje, automatizacija UI testova.

Automatizacija UI testova: pisanje skripti za automatsko izvršavanje test slučajeva na UI. Frameworkovi: Selenium WebDriver, Cypress, Playwright, TestCafe.

Primer automatizovanog testa za proveru prisustva elementa:

# Primer u Pythonu koristeći Selenium
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.chrome.service import Service

# Navesti putanju do Chrome drajvera
service = Service('/putanja/do/chromedriver')
driver = webdriver.Chrome(service=service)

try:
    driver.get("https://example.com")
    # Provera da li postoji h1 naslov na stranici
    header_element = driver.find_element(By.TAG_NAME, "h1")
    print(f"Naslov pronađen: {header_element.text}")
except Exception as e:
    print(f"Greška pri traženju naslova: {e}")
finally:
    driver.quit()

Tabela poređenja automatizovanih UI okvira:

Okvir	Podržani pretraživači	Programski jezici	Brzina izvršavanja	Osobine
Selenium WebDriver	Svi glavni	Java, Python, C#, Ruby	Srednja	Industrijski standard, fleksibilnost
Cypress	Chrome, Firefox, Edge	JavaScript	Brza	Ugrađeni pokretač testova, debugging
Playwright	Chromium, Firefox, WebKit	JavaScript, Python, C#	Brza	Podrška svim modernim pretraživačima, auto-waiting
TestCafe	Svi glavni	JavaScript	Brza	Nije potrebna web drajveri

Strategija testiranja UI može uključivati:

• Identifikaciju najkritičnijih UI elemenata i scenarija interakcije s njima.
• Kreiranje sveobuhvatnih test slučajeva koji pokrivaju različita stanja UI (npr. aktivno polje, polje sa greškom, onemogućeni element).
• Korišćenje kombinacije ručnog i automatizovanog testiranja.
• Redovno izvođenje regresionih testova UI nakon svake promene u kodu.
• Sprovođenje explorative testiranja radi otkrivanja nejasnih problema.