Kā jūs testēsiet tīmekļa vietņu lietotāja saskarni?

Vizuālie testi, pārlūkprogrammu saderības testi, reaģējoša dizaina testi, pieejamības (accessibility) testi.

Vizuālie testi: elementu ārējās izskata salīdzināšana (krāsa, izmērs, fonts) ar dizaina maketiem, atstarpe, izlīdzinājuma, trūkumu pārbaude: Instrumenti: roku salīdzināšana, pārlūkprogrammas izstrādes rīki, specializēti vizuālā regresijas testēšanas rīki (piemēram, Applitools, Percy).

Pārlūkprogrammu saderības testi: UI pareiza attēlošana un darbība dažādās pārlūkprogrammās (Chrome, Firefox, Edge, Safari) un to versijās: Instrumenti: BrowserStack, LambdaTest, Docker konteineri ar dažādām pārlūkprogrammām, roku testēšana:

Reaģējoša dizaina testi: UI attēlošana un darbība dažādās ekrāna izšķirtspējās un ierīcēs (PC, planšetdatori, viedtālruņi): Metodes: pārlūkprogrammas loga izmēra maiņa, ierīču emulācija izstrādes rīkos, testēšana reālos ierīcēs:

Pieejamības (Accessibility - A11y) testi: UI atbilstība pieejamības standartiem (WCAG) ierobežotu iespēju lietotājiem: Īpašības: HTML semantika, ARIA atribūtu pareiza lietošana, alternatīvs teksts attēliem, krāsu kontrasts, tastatūras navigācija, ekrāna lasītāju atbalsts: Instrumenti: Lighthouse (iebūvēts Chrome DevTools), Axe DevTools, WAVE Evaluation Tool, roku tests ar ekrāna lasītājiem (NVDA, JAWS, VoiceOver):

UI funkcionālais tests: interaktīvo elementu darbības pārbaude (pogas, formas, saites), lapu pārejas, elementu mijiedarbība: Metodes: roku tests, UI testu automatizācija:

UI testu automatizācija: skriptu rakstīšana UI testu automātiskai izpildei: Frameworki: Selenium WebDriver, Cypress, Playwright, TestCafe:

Piemērs automatizētam testam, kas pārbauda elementa esamību:

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

# Norādīt Chrome vadītāja ceļu
service = Service('/path/to/chromedriver')
driver = webdriver.Chrome(service=service)

try:
    driver.get("https://example.com")
    # Pārbaudīt, vai lapā ir h1 virsraksts
    header_element = driver.find_element(By.TAG_NAME, "h1")
    print(f"Virsraksts atrasts: {header_element.text}")
except Exception as e:
    print(f"Kļūda meklējot virsrakstu: {e}")
finally:
    driver.quit()

Automatizēto UI frameworku salīdzinošā tabula:

Frameworks	Atbalstītās pārlūkprogrammas	Programmēšanas valodas	Ātrums	Īpašības
Selenium WebDriver	Visas galvenās	Java, Python, C#, Ruby	Vidējs	Nozares standarts, elastība
Cypress	Chrome, Firefox, Edge	JavaScript	Ātrs	Testa izpildītājs, atkļūdošana
Playwright	Chromium, Firefox, WebKit	JavaScript, Python, C#	Ātrs	Atbalsta visas mūsdienu pārlūkprogrammas, automātiska gaidīšana
TestCafe	Visas galvenās	JavaScript	Ātrs	Nav nepieciešami vides vadītāji

UI testēšanas stratēģija var ietvert:

• Kritiskāko UI elementu un to mijiedarbības scenāriju noteikšana.
• Detalizētu testu izveidi, kas aptver dažādus UI stāvokļus.
• Roka un automatizēta testēšana kombinācija.
• Regulāra UI regresijas testēšana pēc katras izmaiņas kodā.
• Eksploratīva testēšana neparedzētu problēmu identificēšanai.