Kullanıcı arabirimi testlerini planlama

  • 6 dakika

Bu bölümde Amita ve Andy ile birlikte Selenium kullanıcı arabirimi testlerini yayın işlem hattına nasıl dahil edebileceğinizi öğreneceksiniz. Amita'nın normalde el ile yaptığı testlerden geçerek başlarlar. Ardından Amita'nın el ile gerçekleştirilen adımlarını otomatik test çalışmaları ile eşlerler.

Ui testlerini el ile çalıştırma

Amita, Andy'nin gelmesini bekliyor. Andy, Amita'nın işlem hattının Test aşamasına eklenecek bir UI testi yazmasına yardımcı olacak. Oraya vardığında Andy, Amita'nın not defterine karalama yaptığını, bir şeyler çizdiğini, mırıldandığını ve sonra sayfayı yırtıp atdığını görür.

Merhaba. Mutlu görünmüyorsun.

Mutlu değilim. Otomatik testin nasıl yazıldığına anlamaya çalışıyorum ama nereden başlayacağımı bilmiyorum. Ben kodlamıyorum. Kendimi eskimiş gibi hissediyorum.

Vay canına, o kadar da kötü olduğunu sanmıyorum. İlk olarak, her zaman kullanıcının bakış açısına sahip birine ihtiyacımız olacaktır. Bunu otomatikleştirmenin bir yolu yoktur. Diğeri için, kimse testleri otomatikleştirmeyi bilerek başlamaz. Bir noktada hepimiz yeni başlayanlardık. Umarım öğrenme sürecini biraz daha kolaylaştırabilirim.

Bence en iyi başlangıç yolu, düzenli olarak el ile yaptığınız bir şeyi otomatikleştirmektir. Kullanıcı arabirimi testi seçin. Daha sonra adım adım ilerleyelim ve adımları bir yere yazalım. Şimdi bu adımları nasıl otomatikleştirebileceğimizi öğreneceğiz. Hangi testi seçmeliyiz?

Amita derin bir nefes alır.

Amita: Şimdi kalıcı pencere testlerini otomatikleştirelim. Örneğin Oyunu indir düğmesi gibi bazı şeylere tıkladığımda, doğru kalıcı pencerenin göründüğünü doğrulamak istiyorum. Sonra kalıcı pencereden uzağa tıkladığımda, kalıcı pencerenin kaybolduğunu ve ana pencerenin yeniden etkin olduğunu doğrulamak istiyorum.

Başlamak için harika bir yer gibi görünüyor. Testi çalıştırırsınız. Prosedürü yazacağım.

Amita bir Windows dizüstü bilgisayar açar ve Google Chrome'ı başlatır. Web uygulamasına gider ve giriş sayfasının açıldığını doğrular.

Bahşiş

Amita'nın el ile gerçekleştirilen testlerini takip etmek istiyorsanız, Space Game web sitesinin yerel bir kopyasını çalıştırabilirsiniz. Visual Studio Code terminalinde aşağıdaki komutları çalıştırın ve ardından gibi Now listening on: http://localhost:5000görünen bağlantıya tıklayın.

git fetch upstream selenium
git checkout -B selenium upstream/selenium
dotnet build --configuration Release
dotnet run --configuration Release --no-build --project Tailspin.SpaceGame.Web

Andy: Tamam. Bundan sonra neleri kontrol edebilirsiniz?

Amita: Oyunu indir düğmesine tıkladığımda doğru kalıcı pencerenin görüntülendiğini kontrol ediyorum.

Amita, Oyunu indir düğmesine tıklar. Kalıcı pencere görüntülenir.

Screenshot of a browser showing the Download game modal window on the Space Game website.

Andy: Harika. Bundan sonra hangi kalıcı pencereleri denetleyebilirsiniz?

Şimdi dört oyun ekranını kontrol ediyorum. Bundan sonra puan tablosunda en üstteki oyuncuya tıkliyorum. Oyuncunun profilinin göründüğünü doğruliyorum.

Amita, örnek oyun ekranlarını göstermek için dört küçük resim görüntüsünden her birine tıklar.

Screenshot of a browser showing the game screen modal window on the Space Game website.

Ardından Amita puan tablosunda en üstteki oyuncuya tıklar. Oyuncunun profili görüntülenir.

Screenshot of a browser showing the leaderboard modal window on the Space Game website.

Bu, kalıcı pencere testlerini kapsar. Bu testleri Windows'ta çalıştırıyorum çünkü çoğu oyuncu sitemizi ziyaret etmek için bunu kullanıyor. Testleri Chrome'da çalıştırıyorum ve zamanım olduğunda bunları Firefox ve Microsoft Edge'de de çalıştırıyorum.

Zamanım olsaydı, oyuncuların siteyi ziyaret etmek için kullandığı tüm işletim sistemleriyle uyumlu olduğumuzdan emin olmak için tüm testleri macOS ve Linux üzerinde yeniden çalıştırırdım. Ama başka birçok test daha yapmamız gerekiyor.

Selenium'da bulucular nedir?

Selenium testinde, bulucu üzerinde işlem yapmak için DOM'dan (Belge Nesne Modeli) bir HTML öğesi seçer. DOM'yi BIR HTML belgesinin ağaç veya grafik gösterimi olarak düşünün. DOM'daki her düğüm belgenin bir bölümünü temsil eder.

Selenium testinde bir HTML öğesini şu şekilde bulabilirsiniz:

  • id özniteliği.
  • name özniteliği.
  • XPath ifadesi.
  • Bağlantı metni veya kısmi bağlantı metni.
  • Veya h1gibi body etiket adı.
  • CSS sınıf adı.
  • CSS seçici.

Kullandığınız bulucu, HTML kodunuzun yazılma şekline ve gerçekleştirmek istediğiniz sorgu türlerine bağlıdır.

BIR HTML belgesinde id , özniteliği bir HTML öğesi için benzersiz bir tanımlayıcı belirtir. Burada, her tanımlayıcının benzersiz olması gerektiğinden id sayfadaki öğeleri sorgulamak için özniteliğini kullanacaksınız. Bu, özniteliği bir id Selenium testindeki öğeleri sorgulamanın en kolay yollarından biri yapar.

Her HTML öğesinin kimliğini alma

Burada Amita ve Andy ile birlikte amita'nın tıkladığı her düğmenin ve sonuçta elde edilen her kalıcı pencerenin kimliğini toplarlar.

Bu testlerin neden bu kadar uzun sürebileceğini ve bu kadar sinir bozucu olabileceğini görebiliyorum. Onları otomatikleştirmeye bayılacaksın. Söz veriyorum.

Şöyle yapacağız. Tıkladığınız her düğmenin id özniteliğini ve görüntülenen kalıcı pencerenin özniteliğini alacağız. Yazdığımız otomatikleştirilmiş testler, hangi düğmelere tıklandığını ve hangi kalıcı pencerelerin beklendiğini bilmek için bu ifadeleri kullanabilir.

Oyunu indir düğmesinin id özniteliğini alarak başlayalım.

Dekont

İsterseniz bu adımları izleyebilir veya yalnızca okuyabilirsiniz. Sonraki bölümde, otomatikleştirilmiş testleri çalıştırdığınızda id ihtiyacınız olan tüm öznitelikler sağlanır.

  1. Google Chrome'da Space Game giriş sayfasına gidin.

  2. Oyunu indir düğmesine sağ tıklayın ve ardından İncele'yi seçin.

    Geliştirici araçları penceresi açılır. Oyunu indir düğmesinin HTML kodu vurgulanır.

  3. Vurgulanan kodu inceleyin ve özniteliğini not edin id . daha sonrası için öğesini id kopyalayın.

    Screenshot of a browser showing the developer tools window and a selected HTML element.

  4. Oyunu indir düğmesini seçin. Ardından görüntülenen kalıcı pencerenin özniteliğini almak id için 2. ve 3. adımları yineleyin.

  5. Dört oyun ekranı ve puan tablosundaki en iyi oyuncu için işlemi tekrarlayın.

Amita, Microsoft Word'u açar ve bir tablo ekler. Tablo, her bağlantının id özniteliğini ve id ilgili kalıcı pencerenin özniteliğini içerir. Amita kayıtları tablosunu temel tutmak için:

  • Oyunu indir düğmesi.
  • Oyun ekranlarından sadece biri.
  • Puan tablosundaki en iyi oyuncu.

Amita'nın tablosu şöyle görünür:

Özellik Bağlantı id Kalıcı id
Oyun indir düğmesi download-btn pretend-modal
İlk oyun ekranı screen-01 screen-modal
En iyi puan tablosu oyuncusu profile-1 profile-modal-1

Otomatikleştirilmiş testleri planlama

Amita: Tamam. Tıkladığım her düğmenin özniteliğine sahibiz id . Sonuçta elde edilen kalıcı pencere de vardır. Sırada ne var?

Sanırım testlerimizi yazmaya hazırız. Şunları yapacağız:

  1. Selenium içeren bir NUnit projesi oluşturun. Proje, uygulamanın kaynak koduyla birlikte dizininde depolanır.
  2. Belirtilen bağlantıya tıklamak için otomasyon kullanan bir test çalışması yazın. Test çalışması beklenen kalıcı pencerenin göründüğünü doğrular.
  3. Test çalışması yönteminin id parametrelerini belirtmek için kaydettiğimiz özniteliği kullanın. Bu görev bir dizi veya test serisi oluşturur.
  4. Testleri Chrome, Firefox ve Microsoft Edge'de çalışacak şekilde yapılandırın. Bu görev bir test matrisi oluşturur.
  5. Testleri çalıştırın ve her web tarayıcısının otomatik olarak gelmesini izleyin.
  6. Selenium'un her tarayıcı için test serisinde otomatik olarak çalışmasını izleyin.
  7. Konsol penceresinde tüm testlerin geçtiğini doğrulayın.

Testlerin ne kadar hızlı çalıştığını görmek için sabırsızlanıyorum. Testleri şimdi deneyebilir miyiz?

Kesinlikle. Dizüstü bilgisayarıma geçelim. Uygulama kodu hazır.