Duyarlı Web Tasarımı Testi: Tam Başlangıç ​​Kılavuzu

responsive web design testing

Günümüz çağında internete erişmek için mobil cihazların kullanımı artmış ve oldukça popüler hale gelmiştir. Hemen hemen her internet kullanıcısı, web sitesinin mobil versiyonunu ister.

Ancak çoğu web sitesi, mobil cihazlar için olması gerektiği kadar optimize edilmemiştir. Test uzmanları, duyarlı tasarımlar üzerinde mobil duyarlı bir test gerçekleştirmelidir.

Geleneksel yazılım ürünleri, herhangi bir cihazda temelde aynı şekilde çalışır.

Microsoft Office, Örneğin , her kişisel bilgisayarda aynı görünüyor. Microsoft Word'ü tam olarak masaüstünüzde çalıştığı gibi aldığınızı ve bir iPhone4'te görüntülediğinizi hayal edin. Ya menüler ve düğmeler küçük görünür ya da ekranın yalnızca bir köşesini görürsünüz ve kapsamlı kaydırma çubukları kullanmanız gerekir. Her iki durumda da, uygulama esasen kullanılamaz hale gelir.

Bu sinir bozucu deneyim, her tasarımcının web için tasarım yapmaya çalışırken yaşadığı şeydir.

Sorunun çözümü, web sayfalarının tarayıcıya çözünürlüğün ne olduğunu sorması ve ardından mevcut ekran alanına dayalı olarak kullanıcı deneyimini incelikle yeniden tasarlama tekniği olan 'duyarlı tasarım' adı verilen bir şeydir. Birdenbire, yazılımınızın üretimde tam olarak nasıl görüneceğini bilmek imkansızdır.

Bu, çeşitli çözünürlüklerde neyin 'doğru göründüğünü' neyin olmadığını denemek ve öğrenmek için gerekli olan bir test stratejisi (ve bir otomasyon stratejisi) anlamına gelir.

Ne öğreneceksin:

• Yeni Başlayanlar İçin Duyarlı Web Sitesi Tasarımlarını Test Etme Kılavuzu
  • Duyarlı Web Tasarımı nedir?
  • Duyarlı Tasarımın Avantajları:
  • Duyarlı Web Sitesi Tasarımının Ana Bileşenleri:
  • Duyarlı Web Tasarım Örnekleri
  • Duyarlı Bir Web Sitesi Nasıl Test Edilir
  • Duyarlı web sitesi testi için örnek Test senaryoları:
  • Duyarlı Bir Web Sitesini Test Etmek İçin Araçlar
  • Duyarlı Tasarımı ve Olası Çözümleri Test Etmenin Zorlukları
  • Duyarlı web testi için ipuçları
• Sonuç
  • Önerilen Kaynaklar

Yeni Başlayanlar İçin Duyarlı Web Sitesi Tasarımlarını Test Etme Kılavuzu

Bir web sitesini açmaya çalıştığımızda, sunucu ' m.sub-domains 'Talebin ne tür bir mobil cihazdan kaynaklandığını belirlemek için. Buna dayanarak kullanıcıyı ilgili mobil sürüme yönlendirir.

Bunu% 100 etkili kılmak için, her cihazın kendisi için özel olarak oluşturulmuş kendi web sitesi tasarımına sahip olması gerekir; fveya örnekBlackberry, iPhone, iPad vb. için ekran boyutlarını ve çözünürlüklerini dikkate alan farklı bir özel tasarım.

Ancak, her çözünürlük ve cihaz için farklı web versiyonu pratik değildir. Ethan Marcotte yeni bir yaklaşım geliştirdi - Duyarlı Web Tasarımı ( RWD ) - bu sorunu çözer.

Bizim önerimiz

# 1) LT Tarayıcı

LT Tarayıcı kullanıcıların 45'ten fazla cihaz görünümünde web sitelerini test etmelerine ve hatalarını ayıklamalarına yardımcı olur. Mobil görünümde hata ayıklama için geliştirici dostu bir tarayıcı olan LT Browser ile web sitenizi önceden yüklenmiş farklı mobil ve masaüstü cihaz görüntüleme bağlantı noktalarında test edin.

Web sitenizin URL'sini girmeniz ve web sitenizi test edeceğiniz cihazı seçmeniz yeterlidir. Yan yana görünüm karşılaştırması için aynı anda iki cihaz seçebilirsiniz.

Yalnızca test etmekle kalmaz, kullanıcılar ayrıca LT Browser tarafından sunulan dahili DevTools yardımıyla web sitelerinde hata ayıklayabilir.

En iyi bölüm, kullanıcıların, LT Browser'ı duyarlı testler için ilk tercihimiz yapan, gereksinimlerine göre özel bir cihaz oluşturabilmeleridir.

Duyarlı Web Tasarımı nedir?

RWDweb sitelerinin cihazlarına tepki vermesi, çözünürlüğü ve doğru şekilde işlenmesi ve uyarlanması için hedefler. Örneğin, kullanıcı masaüstü / dizüstü bilgisayardan iPad'e geçerse, web sitesi görüntü boyutu vb. çözünürlük değişikliklerini ilgili cihaz yeteneklerine göre otomatik olarak uyarlamalıdır.

Kısacası,Sorumlu tasarımdır-dir 'Her ekran için bir web sitesi' .

Aşağıdaki ekran birmisalRWD'nin:

Not: Gerçek zamanlımisalduyarlı bir web sitesinin www.fpl.com

RWD'de bir web sitesi, kolay gezinme, açık ve basit kullanıcı arabirimi vb. Aracılığıyla üstün bir kullanıcı deneyimi sağlamak için tasarlanmıştır. Duyarlı web siteleri kolayca uyarlanır ve tüm çözünürlüklerde, tarayıcılarda, ekran boyutlarında, donanımlarda ve İşletim Sistemlerinde çalışır.

• Duyarlı web siteleri PHP, .Net, Java, CQ5 (Adobe Experience Manager - AEM) ve duyarlı tasarımlar geliştirmek için çok kullanışlı olan birçok yeni çerçevede kodlanmıştır.
• Ekran çözünürlüklerinin ve görüntülerin otomatik olarak yeniden boyutlandırılması için CSS ve HTML özelliklerinden yararlanılır.
• RW tasarımı, bir sitenin düzenini tanımlamak için kesme noktaları kullanır. Her tasarım farklı kesme noktalarında kullanılır. Bir tasarım kesme noktası üzerine uygulanırken, kesme noktasının altında başka bir tasarım kullanılır. Bu kesme noktaları genellikle tarayıcıların genişliğine dayanır.
• Geliştiriciler duyarlı bir web sitesi tasarlarken, sitenin tüm cihazlardaki içeriğini, tasarımını ve performansını göz önünde bulundurarak kullanılabilirliği sağlamak .

Diyagram, içeriğin çevreye ve cihazın davranışına nasıl uyum sağladığına dair doğru bir benzetmedir.

Not : RWD dışında, adı verilen başka bir yaklaşım daha var. Uyarlanabilir Web Tasarımı ( AWD ) . AWD yaklaşımında, her cihaz için özel bir tasarım olacaktır. Ancak, AWD her zaman uygun olmayabilir. Ayrıca, AWD sitelerini tasarlamak, DWT sitelerine kıyasla daha fazla zaman ve para gerektirir.

Duyarlı Tasarımın Avantajları:

# 1) Kullanıcı deneyimi: Bir RW'ye eriştiğimiz cihaza bağlı olarak, olağandışı unsurları gizler ve kullanıcıların hedeflerine daha hızlı ulaşmalarına yardımcı olur.Örneğin:Mobilden bir RW ​​açarsak, önemsiz öğeleri gizler ve web sayfalarının yüklenmesini hızlandırır.

#iki) Paylaşma veya Bağlama: Bir RW ​​için, çeşitli cihazlar için yalnızca bir URL kullanılır. Yalnızca tek bir URL tüm verileri ve bilgileri çeşitli cihazlardan topladığından, kullanıcılar için daha iyi bir UX sağlar.

# 3) Bir RW ​​için çok az veya minimum bakım gerekir.

# 4) RW düzenleri akıcıdır.

Duyarlı Web Tasarımı ile Uyarlanabilir Web Tasarımı arasındaki farklar:

RWD ve AWD birbirleriyle yakından ilişkilidir.

• DWT, değişikliklere hızlı ve olumlu tepki verirken, AWD yeni bir amaç için kolayca değiştirilebilir.
• RWD'nin birden fazla akışkan ızgara düzeni vardır ve AWD'nin birden çok sabit genişlik düzeni vardır.
• DWT'deki görüntüler bağlama duyarlı olarak adlandırılır.

Duyarlı Web Sitesi Tasarımının Ana Bileşenleri:

Responsive Web Design'ın üç ana bileşeni vardır:

# 1) Esnek Düzenler: Dinamik olarak herhangi bir genişliğe göre kolayca yeniden boyutlandırılabilen esnek bir ızgaraya sahip bir web sitesi oluşturmak.

#iki) Medya sorguları: Cihazın yönü, görüntü alanı vb. Gibi bağlama göre tarayıcılar ve cihazlar için çeşitli stiller sağlayın.

# 3)Esnek Ortam: Görüntü alanlarının boyutu değiştikçe, medyanın da (resimler, videolar vb.) Boyutlarını veya çözünürlüklerini ihtiyaca göre değiştirmesi gerekir.

Not : 'Görüntü alanı', web sitesinin gerçek içeriğinin görüntülendiği tarayıcı alanıdır. Viewport, araç çubuklarını, sekmeleri vb. İçermez.

Duyarlı Web Tasarım Örnekleri

Örnek 1)

Bağlantıyı aç www.fpl.com çeşitli cihazlardan alın ve URL'yi inceleyin. Responsive web sitesinin URL'si tüm cihazlar için aynı kalır.

için) Bir masaüstü veya dizüstü bilgisayardan RW'nin görünümü (büyük ekran boyutu)

b) RW'nin bir tabletten görünümü (orta ekran boyutu)

c) RW'nin bir mobil cihazdan görünümü (küçük ekran boyutu)

Örnek 2)

Siteyi aç www.yepme.com bir dizüstü bilgisayardan ve ayrıca bir cep telefonundan ve URL'leri karşılaştırın. Bu yepme.com bağlantı duyarlı bir bağlantı değil.

için) Bir masaüstü veya dizüstü bilgisayardan yanıt vermeyen bir web sitesinin görünümü

varsayılan ağ geçidi sürekli olarak kullanılamıyor

b) Mobil cihazdan yanıt vermeyen bir web sitesinin görünümü

Duyarlı Bir Web Sitesi Nasıl Test Edilir

Duyarlı tasarım testinin anlamı web sitesini test etmek veya farklı cihazlardan URL. Pratik olarak, duyarlı web sitesini tamamen test etmek mümkün değildir çünkü bunu yapmak için çeşitli ekran boyutları için çeşitli sistemler kurmamız gerekir.

Duyarlı test için olası bir yol, test senaryosuna göre tarayıcı pencere boyutunu yeniden boyutlandırmaktır.

IE ve Safari gibi bazı tarayıcılar, görüntü alanı alanını piksel cinsinden görüntülemenize yardımcı olacak eklentiler veya tarayıcı uzantıları sağlayacaktır. Bu, pikselleri değiştirerek istenen ekran boyutunu elde ederek testi kolaylaştırır.

Chrome gibi diğer tarayıcılar, adı verilen yazılım veya programı sağlar. 'Emülatör' Bu, test için gerekli olan istenen cihaza göre ekran özelliklerini ve ortamını değiştirmeye yardımcı olacaktır.

Not: 'Emülatör' tarayıcıda sağlanan ve ana sistemin (mevcut tarayıcı) konuk sistem (istenen ekran boyutu için test edilecek istenen cihazın tarayıcısı) gibi davranmasını sağlayan yazılım veya programdır.

Emülatörler size test için gereken ortamı tam olarak sağlayamasalar da, bir RW'yi yüksek seviyede test etmek için uygun maliyetli bir çözümdür.

Duyarlı web sitesi testi için örnek Test senaryoları:

Duyarlı web tasarımı test edicisi, duyarlı tasarımın aşağıda belirtilenlerin tümünü karşıladığından emin olmalıdır. test senaryoları hatasız, duyarlı bir tasarım olmasını sağlamak için.

# 1) Duyarlı web sitesi bağlantısı veya URL'si, ekran çözünürlüğünden bağımsız olarak her cihazdaki tüm tarayıcılar için aynı olmalıdır.

Varsayalım www.abc.com duyarlı bir web sitesidir. Bir dizüstü bilgisayarda ve bir cep telefonunda açarsak, URL'nin her iki cihazda da aynı olması gerekir. Mobil tarayıcıda açılan web sitesi ile başlamamalı www.m.abc.com veya www.mobile.abc.com

Misal: Web sitesini açın www.kotak.com bir dizüstü bilgisayardan ve aynı zamanda mobilden de açın ve her iki cihazda da URL'yi gözlemleyin. URL, her iki cihaz için aynı değil.

Anlık görüntünün altında bir URL'nin nasıl değiştiği gösterilmektedir. farklı cihazlarda yanıt vermeyen web sitesi dizüstü bilgisayar ve mobil gibi.

Web sitesini açın www.w3schools.com bir dizüstü bilgisayardan ve cep telefonundan ve URL'leri kontrol edin. Her iki cihaz için de aynı olmalıdır.

Aşağıdaki anlık görüntü, farklı cihazlarda duyarlı bir web sitesi için URL'nin aynı kaldığını göstermektedir:

#iki) Duyarlı bir web sitesinin içeriğinin (resimler, alt bağlantılar, menüler vb.) Görüntülenme konumu, ekran çözünürlüğündeki değişikliğe göre dinamik olarak değişmelidir. Yani, ekran çözünürlüğünü dizüstü bilgisayarın boyutundan cep telefonuna değiştirirsek, menü seçeneklerinin gösterimi dinamik olarak değişmelidir.

Misal: Bağlantıyı aç www.fpl.com bir dizüstü bilgisayardan ve pencerenin sağ üst köşesindeki menüye tıklayın. Menü seçenekleri aşağıda gösterildiği gibi görüntülenir:

eclipse c ++ nasıl kurulur

Açık www.fpl.com cep telefonundan ve pencerenin sağ üst köşesindeki menüyü tıklayın. Menü seçenekleri aşağıdaki gibidir:

Not: Bu senaryo, tarayıcı öykünücüleri kullanılarak da test edilebilir (Eski:krom).

Web sitesini açın www.fpl.com bir masaüstünü kullanarak ve menü seçeneklerinin nasıl görüntülendiğini gözlemleyin. Aşağıdaki anlık görüntüye bakın:

Şimdi tarayıcı penceresini mobil ekran boyutuna göre yeniden boyutlandırın ve ardından menü seçeneklerinin görüntüsünü kontrol edin. Aşağıdaki anlık görüntüye bakın:

# 3) Duyarlı bir web sitesinin URL'leri de çözüme özgü olmalıdır.

Bu senaryoyu test etmek için ön koşul: Geliştiriciden, alt bağlantının yanıt vermediği Duyarlı test web sitesine herhangi bir alt bağlantı eklemesini isteyin.

Örneğingeliştirici bağlantı ekleyebilir www.snapdeal.com test web sitemize.

Şimdi, bir mobil cihazdan duyarlı test web sitesini açın ve ön koşulda belirtilen alt bağlantıya tıklayın. Ardından, alt bağlantının URL'si şu şekilde değişmelidir https://m.snapdeal.com .

# 4) Aynı senaryo bir dizüstü bilgisayardan da test edilebilir. RW'yi bir masaüstü veya dizüstü bilgisayardan açın ve yanıt vermeyen alt bağlantıya (üçüncü test senaryosunun ön koşulunda belirtilmiştir) tıklayın. Alt bağlantının URL'si değişmemelidir (bu senaryoyu dizüstü bilgisayardan test ettiğimiz için URL aynı kalmalıdır).

# 5) Bu senaryoyu test etmek için ön koşul: Geliştiriciden herhangi bir alt bağlantı eklemesini isteyin,Örneğin, www.paytm.com test sitesine. Bu senaryoyu uygulayacağınız mobil cihaz, ilgili Paytm uygulamasının cep telefonuna yüklenmiş olması gerekir.

Şimdi bir mobil cihazdan teste duyarlı web sitemizi açın ve 'paytm' alt bağlantısını tıklayın. Ardından cep telefonuna yüklenen Paytm uygulaması açılmalıdır. (Kullanıcı, tarayıcıda veya başka bir pencerede web sitesine yönlendirilmemelidir; yalnızca uygulama açık olmalıdır.)

# 6) Duyarlı web sitesindeki resimler çözünürlüğe özgüdür. Mobil uyumluluk için tasarlanmış duyarlı web sitesinin koduna eklenen görüntünün çözünürlüğünün bir masaüstü veya tabletinkinden farklı olduğu anlamına gelir. Her ekran boyutunun tasarımda kendine özgü görüntüsü olmalıdır.

Bu senaryoyu test etmek için ön koşul: Görüntülerin çözünürlüğünü test etmek ve kontrol etmek zor bir görev olabilir. Geliştiriciden duyarlı web sitesine mobil, tablet ve masaüstü için ayrı ayrı üç farklı resim eklemesini isteyin.

Bir masaüstü, tablet ve bir mobil cihazdan teste duyarlı tasarım web sitesini açın. Duyarlı web sayfasındaki resimler, üç cihaz için de farklı olmalıdır.

(VEYA)

Bir masaüstünden RW testini açın ve web sayfasındaki resmi kontrol edin. Şimdi pencereyi tablete göre yeniden boyutlandırın ve resmi kontrol edin. Bu, masaüstü ekran boyutu için gösterilen görüntüden farklı olmalıdır. Artık pencereyi mobil ekran boyutuna göre yeniden boyutlandırabilir ve resmi kontrol edebilirsiniz. Bu resim de yukarıdaki iki resimden farklı olmalıdır.

Misal: Duyarlı siteyi açın www.fpl.com masaüstünden; görüntüye sağ tıklayın ana sayfa -> 'İncele' yi seçin menüden. Koddan görüntü çözünürlüğünü kontrol edin (görüntü dosya adı uzantısını .jpg kontrol edin). Aşağıdaki ekran görüntüsüne bakın:

Şimdi aynı pencereyi tablet ekran boyutuna yeniden boyutlandırın ve görüntü çözünürlüğünü kontrol edin. (Görüntü adı uzantısı medium.jpg şeklindedir)

Son olarak, pencere boyutunu mobil ekran boyutuna yeniden boyutlandırın ve resmi kontrol edin. (Görüntü adı uzantısı small.jpg'dir)

# 7) Web sayfasının herhangi bir yerine rasgele tıklayın ve köprülü olmayan herhangi bir veri veya metnin başlatılıp başka bir sayfaya veya içeriğe yönlendirilip yönlendirilmediğini kontrol edin. Bu, herhangi bir kelimenin veya metnin, içinde köprü olarak işaretlenip arka uç .

Not : Birkaç projede, gereksinimler belirli cihazlar için ekranın piksel boyutu ve çözünürlüğünden bahseder. (Örneğin, RW'leri için bir tablet görünümü 15:15 piksel ve bir cep telefonu için 10:10 vb. olmalıdır.)

Piksel boyutunu değiştirdiğimizde RW ekranı için olması gereken dinamik değişiklikleri test etmek ana senaryodur.

# 8) Test RW'mizi bir tarayıcıda açın ve ana görüntülerin içeriğini ve ekranını görüntüleyin. Şimdi pencereyi tablet boyutunun kesme noktasına kadar yeniden boyutlandırın ve görüntü çözünürlüğü ve diğer içerikte olması gereken değişiklikleri doğrulayın. Kesme noktalarında, değişiklikler dinamik olarak gerçekleşmelidir (bazen değişiklikler kesme noktalarında gerçekleşmez ve bir kusur olan diğer bazı piksel boyutlarında değişebilir.)

Duyarlı Bir Web Sitesini Test Etmek İçin Araçlar

Duyarlı web sitemizin web sayfalarını önizlemenizi sağlayacak birkaç araç (web sitesi) vardır.

Örneğin,duyarlı sitemizi önceden tanımlanmış farklı ekran çözünürlüklerinde (akıllı telefonlar, tabletler, vb.) test edebilir ve ayrıca istenen herhangi bir çözünürlüğe göre özelleştirebiliriz. Bu araçlar, test faaliyetlerini daha kolay ve daha hızlı hale getirir. Bu tür tarayıcı içi araçlar şu şekilde adlandırılabilir: Sorumlu .

Bazı araçlar, duyarlı web sitesinin web sitesi tasarımlarını, HTML'yi, düzenlerini, CSS'yi vb. Test etmemize yardımcı olabilecek duyarlı ekran görüntüsünü yakalama konusunda önemli bir özellik sunar.

Bu araçlar, gerçek cihazlar mevcut olmadığında veya hazır olmadığında harika alternatiflerdir.

İşte hızlı bir araç listesi:

# 1) Duyarlı tasarım denetleyicisi

Test edilmesi gereken duyarlı web sitesinin URL'sini yukarıdaki 'URL'nizi Buraya Girin' alanına girin ve 'GİT' düğmesini tıklayın. Yanıt veren siteyi görüntülemek istediğiniz cihazı ve çözünürlüğü bile seçebilirsiniz.

Şimdi girin www.fpl.com alanda, 'Nexus 7 PORTRAIT' düzenini seçin ve GİT'e tıklayın. Site, seçilen formatın çözünürlüğünde görüntülenir.

#iki) Screenfly

Test sitesine girin www.fpl.com GİT'e tıklayın.

Düzeni masaüstü, tablet, mobil vb. Olarak değiştirin ve siteyi test edin. Bu araçla çözünürlüğü bile özelleştirebilirsiniz.

Örneğin, ekran çözünürlüğünü 512 x 256 olarak ayarlayın ve siteyi test edin.

Not : Bu araçla test bile yapabilirsiniz. senaryo 6 çözünürlükleri değiştirerek ve resim adlarını doğrulayarak kolayca.

# 3) Tasarımmodo

Herhangi bir URL girin, www.makemytrip.com ve Enter'a tıklayın.

Tarayıcının sağ üst tarafında, web sitesinin düzenini herhangi bir belirli mobil model veya cihaz vb. İle değiştirme seçeneğiniz vardır.

Not : Bu aracın, ekranı sürüklemek ve çözünürlüğü istediğimiz çözünürlüğe değiştirmek gibi başka bir özelliği vardır.

# 4) Yanıt veriyor

Test URL'sini girin, www.fpl.com alanında ve 'Test' düğmesine tıklayın.

Not: Bu araç, sitemizin test edilebileceği yalnızca birkaç sabit düzen seçeneğine sahiptir.

# 5) Mattkersley

RW'nizin aynı anda birden fazla ekran boyutunda görüntülenmesini istiyorsanız, bu araç Mattkersley ihtiyacın olan şey.

Şimdi test URL'nizi adres çubuğuna girin ve enter'a tıklayın. RW'yi aynı anda birden fazla ekran boyutunda görüntüleyebilirsiniz.

# 6) Varsayılan olarak, chrome'da birkaç Geliştirme Aracı vardır bu sayede cihaz modunu ve yeteneklerini simüle edebiliriz.

Chrome'un bu özelliğini kullanmak için, teste duyarlı herhangi bir tasarım web sitesini açın. www.fpl.com Chrome'da ve web sayfasını sağ tıklayın ve menüden 'İncele' seçeneğini seçin veya Ctrl + Shift + I tuşlarına basın. Aşağıdaki pencere web sayfasının alt kısmında açılır.

Şimdi aşağıdaki ekran görüntüsünde gösterildiği gibi simgeye tıklayın.

Web sayfasının mobil modu açılır. Bundan sonra, çözünürlüğü herhangi bir belirli piksele ve ayrıca açılır menüde görüntülenen önceden tanımlanmış herhangi bir mobil modele değiştirebilirsiniz. Net bir fikir edinmek için aşağıdaki anlık görüntüyü görüntüleyin:

Not: Ayrıca web sayfasını dikey veya yatay görünüme de değiştirebiliriz.

Duyarlı tasarımı test etmek için diğer iyi araçlar:

7) Sorumlu tasarım
8) BrowserStack
9) Truva
10) AmIResponsiveDesign
on bir) Sorumlu
12) Öğrenci
13) Duyarlı Test
14) MAC makineleri için ' UYGUN RW'yi test etmek için. Bu uygulama, test için çeşitli cihazlarda çeşitli kesme noktaları ayarlamanıza olanak tanır. APTUS ücretsiz bir uygulama değil ve onu Mac App Store'dan satın almamız gerekiyor.

Duyarlı Tasarımı ve Olası Çözümleri Test Etmenin Zorlukları

Dinamik Test Stratejisi

320 × 480'den (iPhone4'ün çözünürlüğü) 2048 × 2048'e (büyük bir monitör) geçmek, 4 Milyonun üzerinde olası tarayıcı boyutu bırakır. Çoğu test grubu, test cihazlarının listesini bir avuç kadar daraltır. O zaman bile, manuel test problemine yaklaşmak zor veya imkansızdır.

Geliştiriciler muhtemelen tüm platform sorunlarını önceden tahmin edemez ve test uzmanları bunları yayınlanmadan önce yakalayamaz. Bu nedenle, üretimde ara sıra oluşan kullanıcı arayüzü sorununu buluyoruz.

Belki birisi tarayıcılarının boyutunu küçülterek önemli metin alanlarının bir sayfa etiketi tarafından kapsanmasına neden olmuştur. Belki de dinamik sayfa yeniden boyutlandırmayı işlemek için tasarlanmış bazı kodlar, kalıcı tarih seçicileri sonlandırır ve WebDriver üzerine kurulu normal bir test tarafından asla fark edilmez. Testler oluşturmak için çok az ve çok kısa süre için çok fazla görüntüleme seçeneği var.

Şuna bir göz atalımgerçekçi örneksorunu göstermek için.

Dinamik sayfalar, reklam kaydırıcıları gibi şeyler ve farklı sayfa boyutlarındaki kullanıcılardan gelen içerik, birçok yazılım ürününün temelini oluşturur. Buna, sayfanın nasıl görüntüleneceğini tahmin edemediğimiz ve birçok otomasyon çabasının başarısızlıkla başladığını da ekleyin.

Bu sorun için iki popüler çözüm görüyorum - standartlaştırılmış veya temel, veri kümesi kullanmak ve test paketi her çalıştırıldığında bunu yenilemek ve her seferinde bir ortam veya platform almak.

bir web sitesine kod nasıl enjekte edilir

Standart veriler, test ortamını her yüklediğimizde sayfa içeriğinin aynı görünmesini sağlar. Bu strateji, insanların birçok platforma erişmesini sağlayan Sauce Labs gibi bir şeyle birleştiğinde oldukça ileri gidersiniz.

Bu yaklaşım zaman ve kaynak gerektirir. Veritabanı dışa aktarımlarını oluşturmak ve güncellemek için, genellikle bir DBA olan veritabanı erişimi olan birinden zamana ihtiyacınız olacaktır. Ve birisinin test ortamını korumak için komut dosyası kurulumu ve sökme komut dosyaları oluşturması gerekir. Tüm bu çabalardan sonra, saklanmayı sevdiği sterilize edilmiş ortam böcekleriyle karşılaşabilirsiniz.

Alternatif olarak, düzen ve içerik bakımından farklılık gösteren web sayfalarındaki testleri otomatikleştirmek için Görsel Test teknolojisini kullanabilirsiniz. Bu aracı kullanarak, test ortamınızda herhangi bir değişiklik yapmadan ve test grubunuzun dışındaki kişilerden herhangi bir beceri seti gerektirmeden testler oluşturabilirsiniz.

Bir örneğe bakalım.

Twitter mobil uygulamasını düşünün.

Bu ürün, sürekli değişen kullanıcı içeriği ve reklamın bir kombinasyonudur. Başlıkta ayrıca, haber akışı ve bildirimler gibi kullanıcı arayüzünün birkaç temel parçası vardır.

Görsel bir test aracı kullanarak, yalnızca görüntülenebilir alanın değil, tüm kaydırılabilir sayfanın ekran görüntüsünü alarak başlayabilirsiniz. Metin içeriğini yok sayan ancak sayfa üzerindeki öğelere odaklanan bir karşılaştırma seçeneği belirleyebilirsiniz.

Örneğin, Öğelerin içinde ne olduğu konusunda endişelenmeden, tweet alanlarının var olduğunu, her tweet'in bir ad öğesi ve tarih / saat öğesi olduğunu görebilirsiniz.

Öğelerin tam sayfalarda aranması, birçok otomatik testte gördüğümüz bakım ve karmaşıklık yükünü de hafifletir. Bir sayfadaki verileri değiştirmek, kaydetmek, kaydırmak ve sonra doğrulamak yerine, her şeyi tek bir çekimde elde edersiniz. Bu, yazılacak daha az kod, bakımı yapılacak daha az kod ve gecelik test çalıştırmalarında daha az yanlış pozitif anlamına gelir.

Duyarlı Tasarım için Duyarlı Test:

Duyarlı tasarım, mevcut her platforma kombinasyon problemini ekledi. Soru; En iyi test kapsamı için seçtiğimiz tüm bu olası platformlardan ve ekran boyutlarından.

Kapladığımız ortamların sayısını yalnızca en popüler olanlara indirgemek, teknik görevi kolaylaştırırken, kapsama sorununu da göz ardı ediyor.

Sadece bir otomasyon çerçevesiyle ortamların sayısını artırmak bir bakım kabusu yaratır ve potansiyel olarak çözülemeyen bir test problemi ekler.

İyi görsel test araçlarının web sürücüsü gibi esnek bir UI otomasyon çerçevesiyle birleşimi, bu sorunun teknik yönlerini sadece başa çıkmayı kolaylaştırmakla kalmaz, aynı zamanda çözülebilir hale getirebilir.

Hedef, makul bir bakım yükü ile iyi bir kullanıcı arayüzü kapsamıdır. Görsel test, sağlam ve ölçeklenebilir tek seçeneğinizdir.

Duyarlı web testi için ipuçları

# 1) Bir RW'yi test ederken, tüm tarayıcılarda ve İşletim sistemlerinde görüntülerin, metinlerin hizalanması, kenarların etrafındaki dolgu vb. Gibi tasarım tutarlılığına dikkat etmelisiniz.

#iki) Bir RW'nin testi sırasında, test uzmanı neyi test edeceğini ve farklı kesme noktalarında birden fazla cihazda nasıl test edeceğini bilmelidir. Aksi takdirde, oldukça ayrıntılı ve kafa karıştırıcı olabilir.

# 3) Duyarlı bir web sitesinin kapsamlı bir şekilde test edilmesi için, test uzmanı ve geliştirici koordinasyonu bir zorunluluktur. Geliştirici, test senaryolarının ön koşullarında belirtilen koşulları oluşturmada test uzmanlarına yardımcı olmalıdır.

# 4) Web sayfalarının tüm çözünürlüklerde okunabilir olup olmadığını kontrol edin, yani tarayıcıyı mobil ekran boyutuna yeniden boyutlandırsak bile içeriğin okunabilir olması gerekir.

# 5) RW'nin önemli içeriği tüm kesme noktaları için görünür olmalıdır, yani tarayıcı boyutunu masaüstü ekranından mobil ekrana değiştirirsek, ana görüntüler, ana metin, menü vb. Aynı kalmalıdır.

# 6) Tarayıcı test için yeniden boyutlandırılırsa, RW'nin herhangi bir tıklama alanı (düğmeler, menüler, alt bağlantılar vb. Gibi) tıklamaya uygun olmalıdır.

# 7) Tarayıcının yeniden boyutlandırılması ve yanıt veren web sitesinin test edilmesi yalnızca birkaç önemli sorunu tanımlayabilirken, mobil cihazlarda parmakla kaydırma, dokunma vb. İle ilgili birkaç başka sorun olabilir. Bu belirli özelliklerin gerçek cihazlarda test edilmesi, daha iyi kusur bulma ve giderme sağlayabilir.

Sonuç

Duyarlı tasarımın test edildiğinde birçok zorluğu olacaktır. Zorlukların üstesinden gelmek için verimli bir şekilde düşünmelisiniz.

Responsive bir web sitesini test etmek, birçok kişinin başarılı bir geleceği için çok önemlidir. mobil uygulamalar. Mobil kullanıcılar sadece artacak ve beklentileri masaüstü kullanıcılarından çok farklı. RWD'nin uygulanması ve kapsamlı testi, sitenizi beklentileri karşılayacak şekilde ayarlamanın harika bir yoludur.

RWD'nin uygulanması ve kapsamlı testi, sitenizi beklentileri karşılayacak şekilde ayarlamanın harika bir yoludur.

Bu makalede tartışılan bilgilerin, ipuçlarının ve test senaryolarının, duyarlı web sitesi test ihtiyaçlarınıza kesinlikle yardımcı olacağını umuyoruz.

Yazar hakkında: Bu Laxmi'nin konuk gönderisidir. 7 yıldan fazla Yazılım test deneyimine sahip ve şu anda kıdemli bir yazılım test mühendisi olarak çalışıyor.

Bu makalede verilen tüm örnekleri deneyin ve aynı konuda herhangi bir sorunuz / yorumunuz varsa bize bildirin.

Önerilen Kaynaklar

• Alfa Testi ve Beta Testi (Tam Kılavuz)
• Derleme Doğrulama Testi (BVT Testi) Tam Kılavuzu
• Fonksiyonel Test ve Fonksiyonel Olmayan Test
• Yazılım Testi Türleri: Ayrıntılarla Birlikte Farklı Test Türleri
• En İyi Yazılım Test Araçları 2021 (QA Test Otomasyon Araçları)
• ETL Test Veri Ambarı Test Eğitimi (Tam Kılavuz)
• Web Uygulaması Güvenliği Test Kılavuzu
• SoftwareTestingHelp'ten En İyi QA Yazılım Test Hizmetleri