Kaip testuosite interneto svetainių naudotojo sąsają?

Vizuotiniai testavimai, naršyklių suderinamumo testavimai, reaguojančio dizaino testavimai, prieinamumo (accessibility) testavimai.

Vizuotiniai testavimai: elementų išvaizdos palyginimas (spalva, dydis, šriftas) su dizaino maketais, tarpusavio atstumų, išlygiavimo, nebuvimo patikrinimas: Įrankiai: rankinis palyginimas, naršyklės kūrimo įrankiai, specializuoti vizualinio regresijos testavimo įrankiai (pvz., Applitools, Percy).

Naršyklių suderinamumo testavimas: UI teisingas atvaizdavimas ir funkcionalumas įvairiose naršyklėse (Chrome, Firefox, Edge, Safari) ir jų versijose: Įrankiai: BrowserStack, LambdaTest, Docker konteineriai su įvairiomis naršyklėmis, rankinis testavimas:

Reaguojančio dizaino testavimas: UI atvaizdavimas ir veikimas skirtinguose ekrano sprendimuose ir įrenginiuose (PC, planšetės, išmanieji telefonai): Metodai: naršyklės lango dydžio keitimas, įrenginių emuliacija kūrimo įrankiuose, testavimas realiuose įrenginiuose:

Prieinamumo (Accessibility - A11y) testavimas: UI atitiktis prieinamumo standartams (WCAG) naudotojams su ribotomis galimybėmis: Aspektai: HTML semantika, ARIA atributų teisingumas, alternatyvinis tekstas vaizdams, spalvų kontrastas, klaviatūros navigacija, ekranų skaitytuvų palaikymas: Įrankiai: Lighthouse (įtrauktas į Chrome DevTools), Axe DevTools, WAVE Evaluation Tool, rankinis testavimas naudojant ekranų skaitytuvus (NVDA, JAWS, VoiceOver):

UI funkcionalumo testavimas: interaktyvių elementų veikimo patikrinimas (mygtukai, formos, nuorodos), puslapių perėjimai, sąveika su elementais: Metodai: rankinis testavimas, UI testų automatizavimas:

UI testų automatizavimas: scenarijų rašymas automatinio UI testų vykdymo: Framework'ai: Selenium WebDriver, Cypress, Playwright, TestCafe:

Pavyzdys automatizuoto testo, patikrinančio elemento buvimą:

# Python naudojant Selenium
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.chrome.service import Service

# Nurodyti Chrome vairuotojo kelią
service = Service('/path/to/chromedriver')
driver = webdriver.Chrome(service=service)

try:
    driver.get("https://example.com")
    # Patikrinimas, ar puslapyje yra h1 antraštė
    header_element = driver.find_element(By.TAG_NAME, "h1")
    print(f"Antraštė rasta: {header_element.text}")
except Exception as e:
    print(f"Klaida ieškant antraštės: {e}")
finally:
    driver.quit()

Automatizuotų UI framework'ų palyginamoji lentelė:

Framework'as	Palaikomi naršyklės	Programavimo kalbos	Greitis	Ypatybės
Selenium WebDriver	Visi pagrindiniai	Java, Python, C#, Ruby	Vidutinis	Pramonės standartas, lankstumas
Cypress	Chrome, Firefox, Edge	JavaScript	Greitas	Testų vykdymo įrankis, derinimas
Playwright	Chromium, Firefox, WebKit	JavaScript, Python, C#	Greitas	Palaiko visas šiuolaikines naršykles, automatinis laukimas
TestCafe	Visi pagrindiniai	JavaScript	Greitas	Naršyklės vairuotojai nereikalingi

UI testavimo strategija gali apimti:

• Kritiškiausių UI elementų ir jų sąveikos scenarijų nustatymas.
• Išsamūs testų atvejai, apimantys įvairias UI būsenas.
• Rankinio ir automatizuoto testavimo derinys.
• Reguliari UI regresijos testų atlikimas po kiekvienos kodo keitimo.
• Eksploratyvus testavimas neaiškių problemų identifikavimui.