Web sitelerinin kullanıcı arayüzünü kontrol etmek…

Web sitelerinin kullanıcı arayüzünü kontrol etmek için aşağıdaki teknikleri kullanırdım:

Görsel test: UI öğelerinin mevcut görüntüsünü referans ekran görüntüleri veya tasarım mockup'larıyla karşılaştırmak, farklı çözünürlüklerde ve tarayıcılarda. Percy, Applitools Eyes veya manuel karşılaştırma gibi araçlar kullanmak.
Duyarlı test: Sitenin farklı cihazlarda ve ekran boyutlarında (masaüstü, tablet, mobil) doğru görüntülendiğinden ve fonksiyonel olduğundan emin olmak. Tarayıcı geliştirici araçlarındaki (Device Mode) veya özel bulut platformları kullanmak.
Çapraz tarayıcı uyumluluk testi: Sitenin farklı web tarayıcılarıyla (Chrome, Firefox, Safari, Edge) ve sürümleriyle uyumlu olduğunu kontrol etmek. BrowserStack, Sauce Labs veya farklı makinelerde manuel testler yapmak.
Erişilebilirlik testi: Sitenin erişilebilirlik standartlarına (WCAG) uygunluğunu kontrol etmek. Lighthouse, Axe DevTools gibi otomatik araçlar kullanmak, ekran okuyucular ve klavye navigasyonu ile manuel testler yapmak.
UI yük testi: Yüksek trafikte (örneğin, büyük veri yükleri, çoklu asenkron istekler) arayüz performansını test etmek. Sayfa yükleme sürelerini ve UI yanıtını ölçmek.

UI Otomasyonu: UI öğelerinin fonksiyonelliğini ve görünümünü otomatik testlerle doğrulamak. Temel araçlar: Selenium, Cypress, Playwright.

// Selenium WebDriver ile temel bir test örneği (Java)
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.By;
import org.openqa.selenium.WebElement;
import org.junit.jupiter.api.Test;
import static org.junit.jupiter.api.Assertions.assertTrue;

public class BasicUITest {

    @Test
    void checkPageTitle() {
        WebDriver driver = new ChromeDriver(); // Sürücü başlatma
        driver.get("https://www.example.com"); // URL'yi aç
        String expectedTitle = "Example Domain";
        String actualTitle = driver.getTitle(); // Sayfa başlığını al
        assertTrue(actualTitle.contains(expectedTitle), "Sayfa başlığı beklenenden farklı"); // Kontrol
        driver.quit(); // Tarayıcıyı kapat
    }

    @Test
    void checkElementPresence() {
         WebDriver driver = new ChromeDriver();
         driver.get("https://www.example.com");
         WebElement header = driver.findElement(By.tagName("h1")); // Etiketle arama
         assertTrue(header.isDisplayed(), "H1 başlığı görünmüyor"); // Görünürlüğü kontrolü
         driver.quit();
    }
}

Kullanılabilirlik Testleri: Arayüzün kullanım kolaylığı ve sezgiselliği değerlendirilir. Kullanıcı testleri, heuristik testler içerebilir.
Keşifsel UI Testleri: UI'da belirgin olmayan sorunları tespit etmek için keşif yaklaşımı kullanılır, kullanıcı senaryoları ve etkileşimlere odaklanılır.
Form Testleri: Alanların doğrulaması, hata mesajlarının doğru gösterimi, veri gönderiminde davranış.
Gezinme Testleri: Bağlantıların, düğmelerin, menülerin, ekmek kırıntılarının doğruluğu kontrol edilir.

Web sitelerinin kullanıcı arayüzünü kontrol etmek için hangi teknikleri kullanırdınız?