Web sitelerinin kullanıcı arayüzünü nasıl test edeceksiniz?

Görsel testler, tarayıcılar arası uyumluluk testleri, duyarlı tasarım testleri, erişilebilirlik testleri (accessibility).

Görsel testler: öğelerin görünümünün (renk, boyut, yazı tipi) tasarım şablonlarıyla karşılaştırılması, boşlukların, hizalamanın kontrolü, örtüşmelerin olmaması. Araçlar: manuel kontrol, tarayıcı geliştirici araçları, görsel regresyon testleri için özel araçlar (örneğin, Applitools, Percy).

Tarayıcılar arası uyumluluk testleri: UI’nin farklı tarayıcılarda (Chrome, Firefox, Edge, Safari) ve sürümlerinde doğru görüntülenmesi ve çalışması. Araçlar: BrowserStack, LambdaTest, farklı tarayıcılar içeren Docker konteynerleri, manuel testler.

Duyarlı tasarım testleri: UI’nin farklı ekran çözünürlükleri ve cihazlarda (PC, tablet, akıllı telefon) görüntülenmesi ve çalışması. Yöntemler: tarayıcı penceresi boyutunun değiştirilmesi, geliştirici araçlarındaki cihaz emülasyonu, gerçek cihazlarda test.

Erişilebilirlik testleri (Accessibility - A11y): UI’nin erişilebilirlik standartlarına (WCAG) uygunluğunun kontrolü. Özellikler: HTML semantiği, ARIA özniteliklerinin doğruluğu, resimler için alternatif metin, renk kontrastı, klavye ile gezinme, ekran okuyucu desteği. Araçlar: Lighthouse (Chrome DevTools’a entegre), Axe DevTools, WAVE Evaluation Tool, ekran okuyucularla manuel testler (NVDA, JAWS, VoiceOver).

UI’nin fonksiyonel testleri: etkileşimli öğelerin (düğmeler, formlar, bağlantılar) düzgün çalışıp çalışmadığının kontrolü, sayfa geçişleri, öğelerle etkileşim. Yöntemler: manuel testler, UI otomasyonu.

UI testlerinin otomasyonu: otomatik test vakalarının çalıştırılması için scriptler yazma. Frameworkler: Selenium WebDriver, Cypress, Playwright, TestCafe.

Bir otomatik test örneği, öğenin varlığını kontrol etmek için:

# Selenium kullanarak Python örneği
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 belirtin
service = Service('/path/to/chromedriver')
driver = webdriver.Chrome(service=service)

try:
    driver.get("https://example.com")
    # Sayfada bir h1 başlığı olup olmadığını kontrol edin
    header_element = driver.find_element(By.TAG_NAME, "h1")
    print(f"Başlık bulundu: {header_element.text}")
except Exception as e:
    print(f"Başlık aranırken hata: {e}")
finally:
    driver.quit()

Otomatik UI framework karşılaştırma tablosu:

Framework	Desteklenen tarayıcılar	Programlama dilleri	Çalışma hızı	Özellikler
Selenium WebDriver	Tüm ana tarayıcılar	Java, Python, C#, Ruby	Orta	Endüstri standardı, esnek
Cypress	Chrome, Firefox, Edge	JavaScript	Hızlı	Dahili test koşucu, hata ayıklama
Playwright	Chromium, Firefox, WebKit	JavaScript, Python, C#	Hızlı	Modern tarayıcıların tümünü destekler, otomatik bekleme
TestCafe	Tüm ana tarayıcılar	JavaScript	Hızlı	Web sürücüye gerek yok

UI test stratejisi şunları içerebilir:

• En kritik UI öğelerinin ve bunlarla etkileşim senaryolarının belirlenmesi.
• UI’nin çeşitli durumlarını kapsayan kapsamlı test vakalarının oluşturulması.
• Manuel ve otomatik testlerin kombinasyonunun kullanılması.
• Kodda yapılan her değişiklikten sonra düzenli regresyon testleri yapılması.
• Belirsiz sorunların tespiti için keşifsel testler yapılması.