GUI Test Eğitimi: Eksiksiz Bir Kullanıcı Arayüzü (UI) Test Kılavuzu

gui testing tutorial

GUI Testi için Eksiksiz Kılavuz: Kullanıcı Arayüzü Testi Eğitimi

GUI Testi nedir?

GUI Testi, spesifikasyonlara göre uygun işlevselliği sağlamak için uygulamanın grafik kullanıcı arayüzünü test etme sürecidir. Düğmeler, simgeler, onay kutuları, renk, menü, pencereler vb.Gibi uygulama bileşenlerini kontrol etmeyi içerir.

performans testi için yük koşucu aracı

Bir web uygulamasının görsel dinamikleri, bir uygulamanın kullanıcıyla birlikte kabul edilmesinde çok önemli bir rol oynar.

Sonuç olarak, bu kabul, müşterinin başvurusu ile uzun süre müşteri bağını beraberinde getirir. Bu dijitalleşme çağında, Kullanıcı Arayüzü hızla değişiyor ve yeni olası müşteri kalabalığını çekmede kilit bir kaleye sahip.

Ne öğreneceksin:

• Kullanıcı Arayüzü Testi
• UI testi yaklaşımı
• Sık Karşılaşılan UI Hataları
• Temel Kullanıcı Arayüzü ve Kullanılabilirlik Testi Gereksinimleri
• Bazı temel bileşenler
• Bazı Gelişmiş Bileşenler
• UI bileşenlerinin durumları
• GUI Test Araçları
• Örnek GUI Test Durumları
• Sonuç
• Önerilen Kaynaklar

Kullanıcı Arayüzü Testi

Web uygulamasının görsel estetiğinin iyi bir şekilde kabul edilmesini sağlamak için, UI ve Kullanılabilirlik testi genel QA uygulamasının önemli bir yönü haline gelir. Bir URL aracılığıyla erişilebilen herhangi bir uygulama Web tabanlı bir uygulamadır. Bu tür uygulamalarda, esas olarak son kullanıcı tarafından kullanılacak uygulamanın ön ucunu test ediyoruz.

Her tarayıcı web sayfalarını farklı şekilde görüntüler, bu nedenle sayfanın farklı tarayıcılarda aynı görünmesi önemlidir. Bir web sayfası bozuk ve yönetilmeden görüntüleniyorsa, görüntüleyenleri web sayfasından çıkmaya yönlendirir. Bu nedenle, bir web sitesi daha iyi sonuçlar için UI testinden geçmelidir.

Tarayıcı testi aşağıdaki iki türden oluşur:

İşlevsellik testi

Uygulama boyunca farklı fonksiyonların test edilmesi. Hem olumlu hem de olumsuz senaryoları kullanarak ön uç sayfalarda bulunan tüm alan değerlerinin yanı sıra tüm gezinmeleri doğrulamayı içerir.

UI Testi

Web sayfasının görünüm ve his faktörünün test edilmesi. Görünüm ve hissetme faktörü, ekran türü, yazı tipi, hizalama, radyo düğmesi, onay kutusu vb. İçerir.

• Kullanıcı arayüzü testinin kapsadığı alanlar Kullanılabilirlik, Görünüm ve his, Gezinme denetimleri / gezinme çubukları, talimatlar ve teknik bilgi stili, resimler, tablolar, erişilebilirlik vb.
• Erişilebilirliği test etmek için, W3C-Web içeriği erişilebilirlik kılavuzlarını kontrol etmeliyiz.

Tıklayın İşte W3C kılavuzunu almak için.

UI testi yaklaşımı

Uygulamanın tüm işlevlerini kapsayan işlevsel test senaryolarından bir test senaryosu alt kümesi seçiyoruz.

İkinci adım, bu test senaryolarını UI test gereksinimlerine göre değiştirmektir.

Sonraki adım, bu test durumlarını yürütmek olacaktır; sonucu beklenen sonuçlarla karşılaştırmak ve herhangi bir fark varsa sorunu aynı şekilde gündeme getirmek. Tüm tarayıcılarda test etmek mümkün değildir. Normalde müşteri hangi tarayıcıda test etme gerekliliğine karar verir.

Her tarayıcının web sayfasını farklı şekilde görüntülediğini bildiğimiz için, tüm tarayıcıların web sayfasını tam olarak benzer görüntülemesini bekleyemeyiz.

Örneğin, windows-firefox'taki açılır menü, mac-firefox'tan farklı olacaktır. Bu tür sorunlar kabul edilebilir, çünkü bunlar işletim sistemi yardımcı programlarıdır ve bunları bu şekilde kabul etmemiz gerekir.

Temel Tarayıcı: Normalde uygulama, çoğunlukla son kullanıcılar tarafından kullanılması beklenen bir tarayıcıyı hedefleyerek geliştirilir, temel tarayıcı olarak adlandırılır.

Sık Karşılaşılan UI Hataları

• Düğme hizalama sorunları
• Etiketler veya metin kutuları arasında tutarsız boşluk
• Kırık etiketler, yani tek satırlı etiket iki satırda görüntülenir
• Metin kutuları, bilgi simgeleri, etiketler veya açılır menüler arasında yanlış hizalama
• Alanların örtüşmesi
• Eksik alanlar
• Sayfadaki veriler yanlış hizalanmış; yukarı veya aşağı doğru biraz zaman kaydırmalı
• Herhangi bir tarayıcıda, bir eylem seçerken, ilgili eylem gerçekleşmiyor
• Yeniden boyutlandırma beklendiği gibi çalışmıyor
• Bazı tarayıcılar için oturum sona erme süresi çok kısa veya çok uzun
• Tarayıcıya özgü sorunlar - Bir tarayıcıya veri girildikten sonra birkaç alan düzenlenemez, ancak başka bir tarayıcıda düzenlenebilir

Temel Kullanıcı Arayüzü ve Kullanılabilirlik Testi Gereksinimleri

Web uygulamasının temel UI testi gereksinimleri şunlardır:

1. Bir kullanıcı arayüzünde çeşitli bileşenlerin kullanılabilirliği
2. UI bileşeninin çeşitli durumları

Bileşen:

Bir bileşen, bir uygulama oluşturmak için diğer birkaç bileşenin kombinasyonu ile kullanılabilen bir yapı taşıdır. Bileşenler, uygulama genelinde yeniden kullanılabilir.

Bir bileşenin örnekleri arasında Düğme, Metin Alanı, Otomatik Önerme, Onay Kutusu, Açılır Menü vb. Bulunur.

Bazı temel bileşenler

Onay kutusu: Onay kutusu bileşeninden bir veya daha fazla seçenek seçilebilir

Radyo Düğmeleri: Yalnızca bir seçeneğin seçilmesi gerektiğinde radyo düğmeleri kullanışlıdır

Bazı Gelişmiş Bileşenler

1. Akordeon: Bu bileşen kullanılarak birden çok öğe dikey olarak istiflenebilir. Her öğe, içindeki içeriği görüntülemek için genişletilebilir. Birden fazla öğe de genişletilebilir.

2. Hesapta görüntülenen yeri gösteren bağlantılar: Bu, web sitesinde gezinmeye yardımcı olan çok kullanışlı bir bileşendir. Kullanıcı, bu bileşenden web sitesi içerisindeki mevcut konumunu belirleyebilir.

3. Atlı Karınca: Bir atlıkarınca bileşenine birden fazla bilgi öğesi grubu dahil edilebilir. Alt kısımdaki yol bulucular, daha fazla öğenin mevcut olduğunu gösterir. Oklar, atlıkarınca içinde gezinmeye yardımcı olur. Atlı karınca gezintisi genellikle sürekli bir döngü olarak yapılandırılır.

Tıklayın İşte UI bileşenleri hakkında daha faydalı bilgi almak için

UI bileşenlerinin durumları

Bileşenlerin kullanılabilirliği tamamen proje gereksinimleri kılavuzlarına dayanmaktadır. Bir projeden diğerine değişecektir.

Temel bir bileşen için çeşitli UI durumları şunlardır:

1. Doldurulmamış Devlet
2. Doldurulmuş Durum ve Odaklanma
3. Normal Durum ve Varsayılan Durum
4. Hover Durumu
5. Engelli Durumu
6. Maskeli Durum

Doldurulmamış Durum:

Bir bileşendeki herhangi bir değeri girmeden önce, bunun doldurulmamış bir durumda olduğu söylenir. Doldurulmamış durumu, varsa yer tutucu metni görüntüler. Aşağıdaki bir metin alanı bileşenidir.

Doldurulmuş Durum:

Kullanıcı tarafından girilen değere sahip bir bileşen doldurulmuş durumdur.

Odak Durumunda:

Kullanıcı, önceden doldurulmuş bir bileşeni tekrar ziyaret eder. Bileşen, belirli bir bileşenin odaklanılmakta olduğunu belirten imleci görüntülemelidir.

Normal durum:

Ekranda kullanıcı tarafından zaten girilen değerle bir bileşenin görüntüsü normal durum olarak tanımlanır.

Varsayılan durum:

Sunucudan / arka uçtan otomatik olarak doldurulan değeri görüntüleyen bir bileşen. Bu değer, bazı senaryolarda kullanıcı tarafından da düzenlenebilir.

Fareyle Üzerine Gelme Durumu:

Bileşenin üzerine gelindiğinde, fareyle üzerine gelme eylemini belirten bileşeni vurgular.

Fareyle Üzerine Gelmeden Önce:

Üzerinde gezinme:

en iyi bilgisayar bakım yazılımı nedir

Devre Dışı Durum:

Bileşen devre dışı bırakılır ve kullanıcı alanları düzenleyemez.

Etkin Durum

Engelli Durumu

Maskelenmiş Durum:

Şifre gibi hassas veriler bu bileşen kullanılarak gizlenebilir.

Web uygulamasının temel KULLANILABİLİRLİK testi gereksinimleri şunlardır:

1. Font ailesi
2. Yazı Boyutu
3. Renk
4. Harf boşluğu
5. Satır yüksekliği
6. Arka plan doğrulama
7. Dolgu / Opaklık
8. Uzunluk, genişlik ve genişlik gibi bileşenlerin ölçümleri
9. Ekrandaki bileşenler arasındaki konum / boşluk

Yukarıdaki Kullanılabilirlik özellikleri, kodda veya uygulamadaki inspect öğesi kullanılarak test edilebilir. Diğer bir kolay yol, eklentileri kullanmaktır. Eklentiler, uygulamanın test edilmesi gereken tarayıcıya göre değişiklik gösterebilir.

Çeşitli Tarayıcı Eklentilerinin ayrıntıları

Eklentilerin Avantajları:

• Zaman kazandırır
• Kullanımı kolay
• Uygun maliyetli

Eklentilerin Sınırlandırılması:

• Ölçümü kullanırken paralaks hatası
• Uygulamalar arasında uyumlu
• Birden çok tarayıcıyla uyumlu

Eklentiler için Referanslar:

• Web Denetçisi: Apple Geliştirici Araçları
• Firebug: Firebug Wiki
• Onu ölçmek
• Colorzilla

GUI Test Araçları

Teknoloji dünyasında, kullanıcı arabirimi testinde test uzmanlarına yardımcı olacak çeşitli araçlar mevcuttur.

• Selenyum
• HP Birleşik İşlevsel Testi
• Salatalık
• Kodlanmış UI
• Sahi

GUI araçlarının ayrıntılı bir listesi softwaretestinghelp.com'da mevcuttur! lütfen tıklayın İşte .

Örnek GUI Test Durumları

1) Atlı karınca oklarının ve yol bulucuların çalıştığını doğrulayın
2) Parola alanının yalnızca maskelenmiş durumda değerleri kabul ettiğini doğrulayın
3) Gerekli tüm alanlar girilene kadar 'kaydet' düğmesinin devre dışı kaldığını doğrulayın
4) Kullanıcının 'Üst' çubuğu kullanarak sayfanın üst kısmına gitmesine izin verildiğini doğrulayın
5) Uygulanan filtreler herhangi bir sonuç almadığında uygun mesajın görüntülendiğini doğrulayın.
6) Üstbilgiler ve altbilgilerde bulunan bağlantılardan gezinmeyi doğrulayın
7) Radyo düğmelerinin hizalamasının doğru olduğunu doğrulayın
8) Onay kutularındaki birden çok seçeneğin aynı anda seçilebildiğini doğrulayın
9) Her bölümün başlığının kalın harflerle olduğunu doğrulayın
10) Tıklayarak köprülerin renk değişikliğini doğrulayın

Sonuç

Bir web sitesi birçok işletmenin ruhudur. İyi göründüğünden ve farklı tarayıcılarda ve platformlarda benzer şekilde çalıştığından emin olmak çok gereklidir. Bu nedenle UI testi çok önemlidir ve geniş bir müşteri tabanı ve iş değerinde katkı sağlayacaktır.

Önerilen Kaynaklar

• En İyi Yazılım Test Araçları 2021 (QA Test Otomasyon Araçları)
• Alfa Testi ve Beta Testi (Tam Kılavuz)
• Primer e-Kitap İndirmeyi Test Etme
• Fonksiyonel Test ve Fonksiyonel Olmayan Test
• Derleme Doğrulama Testi (BVT Testi) Tam Kılavuzu
• Arayüz Testi nedir? Türlerini, Stratejisini ve Araçlarını Bilin
• QA Outsourcing Guide: Software Testing Outsourcing Companies
• Yazılım Testi Türleri: Ayrıntılarla Birlikte Farklı Test Türleri