Ön Uç Testi Nedir?
Editoryal Takım
⚡ Akıllı Özet
Ön uç testleri, grafiksel kullanıcı arayüzünü, işlevselliği, kullanılabilirliği ve sunum katmanının performansını doğrular; böylece düzen hataları, bozuk komut dosyaları ve yavaş sayfalar gerçek kullanıcılar bunlarla karşılaşmadan önce yakalanır.
Ön Uç Testi Nedir?
Ön uç testleri , bir test tekniğidir. grafiksel kullanıcı arabirimi (GUI), bir arayüzün işlevselliği ve kullanılabilirliği web uygulaması Test edilirler. Amaç, sunum katmanının ardışık güncellemeler boyunca hatasız kalmasını doğrulamaktır.
Örneğin, bir form alanına adınızı yazıyorsanız, rakamlar kabul edilmemelidir. GUI öğelerinin hizalamasını kontrol etmek de günlük hayatta karşılaştığımız bir diğer durumdur.
Bunun dışında, ön uç testleri aşağıdaki alanlar için gerçekleştirilir:
- CSS regresyon testi: Ön yüz düzenini bozan küçük CSS değişiklikleri.
- JavaKomut dosyası değişiklikleri Bu durum ön yüzü işlevsiz hale getirir.
- Performans kontrolleri Arayüzün ne kadar çabuk kullanılabilir hale geldiği konusunda.
Ön Uç Web Sitesi Test Planı Nasıl Oluşturulur?
Ön uç test planı oluşturmak basit dört adımlı bir süreçtir.
) 1 Adım Test planınızı yönetmek için kullanabileceğiniz araçları keşfedin.
) 2 Adım Ön uç testleri için bütçeyi belirleyin.
) 3 Adım Tüm süreç için zaman çizelgesini belirleyin.
) 4 Adım Projenin kapsamını belirleyin. Kapsam şunları içerir:
- OperaKullanıcılarınızın kullandığı sistemler ve tarayıcılar
- İzleyiciler tarafından kullanılan popüler cihazlar
- izleyicilerin teknik yeterliliği
- izleyicilerin internet bağlantı hızı
Ön Uç Test Planı Neden Oluşturulmalıdır?
Aşağıdaki diyagram, bir planın belirlemesi gereken iki boyutu göstermektedir.
Bir plan, hangi tarayıcıların ve işletim sistemleri Projenin kapsaması gereken hususlar çoktur. Olası kombinasyonlar sayısızdır, bu nedenle bir plan hem çabayı hem de maliyeti azaltır.
Planın iki açık avantajı var:
- Projenin kapsamı hakkında tam bir açıklık sağlıyor.
- Proje hayata geçirildiğinde güven veriyor.
Daha İyi Ön Uç Testi İçin İpuçları
Daha iyi bir ön uç test planı oluşturmak için ipuçları:
- Bütçenizi, kaynaklarınızı ve zamanınızı akıllıca hazırlayın.
- Testlerin daha hızlı çalışması için başsız (headless) bir tarayıcı kullanın.
- Daha hızlı yürütme için testlerdeki DOM oluşturma miktarını azaltın.
- Test senaryolarını izole edin, böylece hatanın temel nedeni hızlıca bulunur ve düzeltme döngüsü kısalır.
- Daha hızlı sonuç almak için test komut dosyalarınızı yeniden kullanılabilir hale getirin. regresyon döngüleri.
- Test komut dosyalarınız için tutarlı bir adlandırma kuralı kullanın.
- Her birini bağlayın test durumu gözle görülür bir davranışa.
Ön Uç Test Araçları
Hiçbir tek araç betik yazmayı, stil sayfalarını ve görselleri kapsamaz, bu nedenle ekipler birkaç aracı bir araya getirir.
JS test aracı: Jasmine
Yasemin Test etmeye yönelik davranış odaklı bir geliştirme çerçevesidir. JavaSenaryo Kod, teknik detaylardan ziyade iş değerine odaklanır, temiz bir sözdizimine sahiptir ve başka hiçbir çerçeveye bağımlı değildir. JSSpec, ScrewUnit, JSpec ve RSpec gibi birim test çerçevelerinden yararlanmıştır. Günümüzde yaygın olarak kullanılan alternatifler ise Jest ve Vitest'tir.
Fonksiyonel test aracı: Selenium
Selenium Tarayıcılar ve platformlar genelinde uçtan uca testler gerçekleştirir, örneğin: Windows, macOS ve Linux'ta test yazmanıza olanak tanır. Java, PythonC# ve diğer diller. Selenium IDE Kayıt ve oynatma özelliklerini ekler, bu nedenle ilk betik için kod yazmaya gerek yoktur. Cypress Oyun yazarı da aynı konuyu, bekleme süresini de içerecek şekilde ele alıyor. tracing.
CSS ve görsel araçlar: CSSLint ve BackstopJS
CSSLint , ile yazılmış açık kaynaklı bir linter'dır. JavaTarayıcıda ve komut satırından çalışan bir betik. Artık aktif olarak bakımı yapılmıyor, bu nedenle ekipler artık stil sayfalarını Stylelint veya ESLint'in CSS desteğiyle denetliyor.
Geri döndürmezJS Görsel regresyon testlerini yönetir. Sayfaları Chrome'da başsız modda oluşturur, her ekran görüntüsünü onaylanmış bir referans görüntüyle karşılaştırır ve görüntü alanı boyutlarını ve geçme/kalma koşullarını yapılandırmanıza olanak tanır.
Herhangi bir ön uç test aracı için iki zorluk geçerlidir:
- Test otomasyonu Başlangıç aşamasında oldukça fazla çaba gerektirir.
- Araçlar, belirli işletim sistemleri ve tarayıcı sürümleriyle uyumluluk sorunları yaşayabilir.
Ön Uç Performans Optimizasyonu
Ön uç performans testi tek bir soruyu yanıtlar: Sayfa ne kadar hızlı yüklenir ve kullanılabilir hale gelir? Uygulama yüksek yük altında kalmadan önce tek bir kullanıcı için optimizasyon yapmak iyi bir uygulamadır. performans testi.
Ön Uç Performans Optimizasyonu Neden Önemlidir?
Performans optimizasyonu eskiden sunucuyu ayarlamak anlamına geliyordu, çünkü çoğu web sitesi statikti ve işlem sunucu tarafında gerçekleşiyordu.
Web uygulamaları dinamik hale geldikçe, çok daha fazla iş tarayıcıya taşındı: çerçeve kodu, üçüncü taraf komut dosyaları, resimler ve yazı tipleri. İstemci tarafı kodu kendi başına bir darboğaz haline geldi.
Ön Uç Performans Optimizasyonunun Faydası Nedir?
- İstemci tarafındaki sorunlar, sunucu darboğazları kadar doğrudan kullanıcı deneyimini olumsuz etkiler; bu nedenle her ikisine de dikkat edilmelidir.
- Ziyaretçinin bekleme süresinin büyük bir kısmı sunucunun yanıt vermesinden sonra gerçekleşir; indirme, ayrıştırma ve işleme gibi işlemler yapılır. Bu nedenle ön uç çalışmaları genellikle daha büyük ve gözle görülür bir kazanç sağlar.
- Görüntüleri sıkıştırmak, komut dosyalarını ertelemek ve medya için yer ayırmak gibi düzeltmeler, arka uç mimarisini yeniden tasarlamaktan daha ucuzdur.
- Temel Web Ölçütleri — En Büyük İçerik Boyama Alanı, Sonraki Boyama Alanına Etkileşim ve Kümülatif Düzen Shift — sonuçları ortak bir puan tablosunda paylaşın.
Ön Uç Performans Test Araçları
1. Sayfa Hızı Analizleri
Pagespeed Insights is GoogleÜcretsiz sayfa analiz hizmeti. Lighthouse denetimi gerçekleştirir, Temel Web Önemli Metriklerini raporlar ve yükleme süresini kısaltmak için öneriler sunar. Lighthouse ayrıca Chrome Geliştirici Araçları içinde de bulunur.
2. Pingdom
Pingdom Bu, bir web sitesi ve performans izleme hizmetidir. Sayfa yavaşladığında veya çevrimdışı kaldığında müşterileri uyarır, böylece sorunlar kullanıcılar bildirmeden önce ortaya çıkar.
Özellikler:
- Bir web sayfasının tüm bölümlerini inceler.
- Performansa genel bir bakış sunar.
- Tracperformans geçmişinizi gösterir.
- Birden fazla konumdan test yapmanıza olanak tanır
