Veb saytların istifadəçi interfeysini necə test edəcəksiniz?

Vizual sınaq, brauzerlerarası sınaq, adaptiv dizaynın sınağı, əlçatanlıq (accessibility) sınağı.

Vizual sınaq: elementlərin görünüşünün (rəng, ölçü, şrift) dizayn maketləri ilə uyğunluğunun yoxlanması, kənar boşluqların, hizalanmanın, örtüşmələrin olmamasının yoxlanması. Alətlər: əl ilə yoxlama, brauzer inkişaf alətləri, vizual regresiya sınağı üçün ixtisaslaşmış alətlər (məsələn, Applitools, Percy).

Brauzerlerarası sınaq: UI-nin müxtəlif brauzerlərdə (Chrome, Firefox, Edge, Safari) düzgün göstərilməsi və işləməsinin yoxlanması. Alətlər: BrowserStack, LambdaTest, müxtəlif brauzerlərlə Docker konteynerləri, əl ilə sınaq.

Adaptiv dizaynın sınağı: UI-nin müxtəlif ekran həllərində və cihazlarda (PC, planşet, smartfonlar) göstərilməsi və işləməsinin yoxlanması. Yöntemlər: brauzer pəncərəsinin ölçüsünü dəyişmək, inkişaf alətlərində cihaz emulasiya rejimindən istifadə, real cihazlarda sınaq.

Əlçatanlıq (Accessibility - A11y) sınağı: UI-nin əlçatanlıq standartlarına (WCAG) uyğunluğunun yoxlanması. Aspectlər: HTML semantikası, ARIA atributlarının düzgünlüyü, şəkillər üçün alternativ mətn, rəng kontrastı, klaviatura ilə naviqasiya, ekran oxuyucuların dəstəyi. Alətlər: Lighthouse (Chrome DevTools-ə daxil), Axe DevTools, WAVE Evaluation Tool, ekran oxuyucular ilə əl ilə sınaq (NVDA, JAWS, VoiceOver).

UI funksional sınağı: interaktiv elementlərin (düymələr, formalar, linklər) işləkliyinin yoxlanması, səhifələrarası keçidlər, elementlərlə qarşılıqlı əlaqə. Yöntemlər: əl ilə sınaq, UI testlərinin avtomatlaşdırılması.

UI testlərinin avtomatlaşdırılması: UI-də test ssenarilərinin avtomatik icrası üçün skriptlərin yazılması. Frameworklər: Selenium WebDriver, Cypress, Playwright, TestCafe.

Avtomatlaşdırılmış test nümunəsi elementin mövcudluğunu yoxlamaq üçün:

# Selenium istifadə edərək Python nümunəsi
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.chrome.service import Service

# Chrome sürücüsünün yolunu göstərin
service = Service('/yol/ChromeDriver')
driver = webdriver.Chrome(service=service)

try:
    driver.get("https://example.com")
    # Səhifədə h1 başlığının olub-olmadığını yoxlayın
    header_element = driver.find_element(By.TAG_NAME, "h1")
    print(f"Başlıq tapıldı: {header_element.text}")
except Exception as e:
    print(f"Başlıq tapılarkən xəta: {e}")
finally:
    driver.quit()

Avtomatlaşdırılmış UI frameworklərinin müqayisə cədvəli:

Framework	Dəstəklənən brauzerlər	Proqramlaşdırma dilləri	İcra sürəti	Xüsusiyyətlər
Selenium WebDriver	Bütün əsaslar	Java, Python, C#, Ruby	Orta	Sənaye standartı, çeviklik
Cypress	Chrome, Firefox, Edge	JavaScript	Sürətli	Daxili test icraçı, debugging
Playwright	Chromium, Firefox, WebKit	JavaScript, Python, C#	Sürətli	Bütün müasir brauzerləri dəstəkləyir, auto-waiting
TestCafe	Bütün əsaslar	JavaScript	Sürətli	Veb sürücülərə ehtiyac yoxdur

UI test strategiyası aşağıdakıları əhatə edə bilər:

• Ən kritik UI elementlərinin və onlarla qarşılıqlı əlaqə ssenarilərinin müəyyənləşdirilməsi.
• Müxtəlif UI vəziyyətlərini əhatə edən test ssenarilərinin hazırlanması (məsələn, aktiv sahə, səhv olan sahə, deaktiv element).
• Əl ilə və avtomatlaşdırılmış testlərin birləşdirilməsi.
• Hər kod dəyişiklikdən sonra UI regresiya testlərinin müntəzəm keçirilməsi.
• Görünməz problemləri aşkar etmək üçün explorative testlərin aparılması.