İletki Test Eğitimi: Otomasyon Aracı Çerçevesi

İletki Testi Nedir?

İletki önemli rol oynayan otomasyon ve uçtan uca davranış odaklı bir test aracıdır. Test yapmak AngularJS uygulamalarından biridir ve aşağıdaki gibi güçlü teknolojileri birleştiren bir Çözüm entegratörü olarak çalışır: Selenium, Jasmine, Web sürücüsü vb. İletki Testinin amacı yalnızca AngularJS uygulamalarını test etmek değil aynı zamanda normal Web Uygulamaları için de otomatik regresyon testleri yazmaktır.

Neden Açıölçer Çerçevesine İhtiyacımız Var?

JavaScript neredeyse tüm web uygulamalarında kullanılır. Uygulamalar büyüdükçe, JavaSenaryo Ayrıca boyut ve karmaşıklık da artar. Bu durumda, Test Uzmanları için web uygulamasını çeşitli senaryolar için test etmek zor bir görev haline gelir.

Bazen AngularJS uygulamalarındaki web öğelerini AngularJS kullanarak yakalamak zordur. JUnit or Selenium WebDriver.

İletki, ile yazılmış bir NodeJS programıdır. JavaAngularJS uygulamalarında web elemanlarını tanımlamak için Node ile birlikte çalışan bir scripttir ve ayrıca kullanıcı eylemleriyle tarayıcıyı kontrol etmek için WebDriver'ı kullanır.

Tamam, tamam şimdi AngularJS uygulamasının tam olarak ne olduğunu tartışalım.

AngularJS uygulamaları, web uygulaması bileşenlerini ifade etmek için genişletilmiş HTML sözdizimini kullanan Web Uygulamalarıdır. Esas olarak dinamik web uygulamaları için kullanılır. Bu uygulamalar normal Web Uygulamalarına göre daha az ve esnek kod kullanır.

Normal'i kullanarak neden Angular JS web öğelerini bulamıyoruz? Selenium Web sürücüsü?

Angular JS uygulamaları, ng-repeater, ng-controller, ng-model.. vb. gibi bazı ekstra HTML özelliklerine sahiptir ve bunlar, Angular JS'de yer almamaktadır. Selenium yer belirleyiciler. Selenium kullanarak bu web öğelerini tanımlayamıyor Selenium kod. Yani, İletki üstte Selenium Web Uygulamalarındaki bu nitelikleri işleyebilir ve kontrol edebilir.

İletki, Angular JS tabanlı uygulamalar için uçtan uca bir test çerçevesidir. Çoğu çerçeve, Angular JS uygulamaları için birim testleri yapmaya odaklanırken Protractor, bir uygulamanın gerçek işlevselliğini test etmeye odaklanır.

Protractor'ı başlatmadan önce aşağıdakileri yüklememiz gerekiyor:

SeleniumSen bulabilirsiniz Selenium Kurulum adımları aşağıdaki bağlantılardadır, (https://www.guru99.com/installing-selenium-webdriver.html )
NPM (Node.js)NodeJS Kurulumu, Protractor'ı kurmak için NodeJS'yi kurmamız gerekiyor. Bu kurulum adımlarını aşağıdaki bağlantıda bulabilirsiniz. https://www.guru99.com/download-install-node-js.html )

İletki Kurulumu

) 1 Adım Komut istemini açın ve yazın “npm install –g iletki” ve Enter'a bas.

Yukarıdaki komut gerekli dosyaları indirecek ve Protractor'ı istemci sistemine yükleyecektir.

) 2 Adım Kurulumu ve sürümü kullanarak kontrol edin "İletki –versiyon". Başarılı olursa, sürümü aşağıdaki ekran görüntüsündeki gibi gösterecektir. Değilse, 1. adımı tekrar gerçekleştirin.

(3. ve 4. Adımlar İsteğe bağlıdır ancak daha iyi uygulama için önerilir)

) 3 Adım Web sürücüsü yöneticisini güncelleyin. Web sürücüsü yöneticisi, belirli bir tarayıcıda angular web uygulamasına karşı testleri çalıştırmak için kullanılır. Protractor yüklendikten sonra, web sürücüsü yöneticisinin en son sürüme güncellenmesi gerekir. Bu, komut isteminde aşağıdaki komutu çalıştırarak yapılabilir.

webdriver-manager update

) 4 Adım Web sürücüsü yöneticisini başlatın. Bu adım, web sürücüsü yöneticisini arka planda çalıştıracak ve iletki aracılığıyla yürütülen testleri dinleyecektir.

Protractor herhangi bir testi çalıştırmak için kullanıldığında, web sürücüsü otomatik olarak yüklenecek ve ilgili tarayıcıda testi çalıştıracaktır. Web sürücüsü yöneticisini başlatmak için, komut isteminden aşağıdaki komutun yürütülmesi gerekir.

webdriver-manager start

Şimdi, aşağıdaki URL'ye giderseniz (http://localhost:4444/wd/hub/static/resource/hub.html) tarayıcınızda Web sürücüsü yöneticisinin arka planda çalıştığını göreceksiniz.

İletki kullanarak örnek AngularJS uygulama testi

İletkinin çalışması için iki dosyaya ihtiyacı vardır; spec dosya ve yapılandırma dosyası.

yapılandırma dosyası: Bu Dosya, test dosyalarının yerleştirildiği yere (specs.js) iletki yapmaya ve onunla konuşmaya yardımcı olur Selenium sunucu (Selenium Adres). Chrome, İletki için varsayılan tarayıcıdır.

Spesifikasyon dosyası: Bu Dosya, uygulamayla etkileşime geçmek için mantığı ve konum belirleyicileri içerir.

) 1 Adım Giriş yapmalıyız https://angularjs.org ve “Buraya bir isim girin” metin kutusuna “GURU99” metnini girin.

) 2 Adım Bu adımda,

“Guru99” adını girildi
Çıkış metninde “Merhaba Guru99” görülüyor.

) 3 Adım Şimdi adı girdikten sonra web sayfasındaki metni yakalamamız ve beklenen metinle doğrulamamız gerekiyor.

Kodu:

Konfigürasyon dosyasını hazırlamamız gerekiyor (conf.js) ve spesifikasyon dosyası (spec.js) Yukarıda da belirtildiği gibi.

spec.js'nin mantığı:

describe('Enter GURU99 Name', function() {
 it('should add a Name as GURU99', function() {
 browser.get('https://angularjs.org');
 element(by.model('yourName')).sendKeys('GURU99');
  var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1'));
expect(guru.getText()).toEqual('Hello GURU99!');
  });
});

Spec.js'nin Kod Açıklaması:

tanımlamak('GURU99 Adını Girin', function() Tanımlama söz dizimi Jasmine çerçevesinden alınmıştır. Burada "tanımla" ('GURU99 Adını Girin') tipik olarak bir uygulamanın bir sınıf veya işlev vb. olabilecek bileşenlerini tanımlar. Kod paketinde “GURU99'a Girin” olarak adlandırılan bu yalnızca bir dizedir, kod değildir.
it('GURU99 olarak bir Ad eklenmelidir', function()
tarayıcı.get('https://angularjs.org') Şunun gibi Selenium Web sürücüsü tarayıcısı.get, belirtilen URL ile yeni bir tarayıcı örneği açacaktır.
eleman(by.model('adınız')).SendKey'ler('GURU99') Burada web sayfasındaki “ng-model”in değeri olan “yourName” olarak Model ismini kullanan web elementini buluyoruz. Aşağıdaki ekran görüntüsünü kontrol edin-

var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1')) Burada web öğesini kullanarak buluyoruz XPath ve değerini bir "guru" değişkeninde saklayın.
beklemek(guru.getText()).eşit('Merhaba GURU99!') Son olarak web sayfasından aldığımız metni (gettext() kullanarak) beklenen metinle doğruluyoruz.

conf.js'nin mantığı:

exports.config = {
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: ['spec.js']
};

conf.js'nin Kod Açıklaması

seleniumAddress: 'http://localhost:4444/wd/hub' Yapılandırma dosyası Protractor'a seleniumAddress'in konumunu söyler Selenium Konuşulacak adres Selenium WebDriver.
specs: ['spec.js']Bu satır İletkiye spec.js test dosyalarının konumunu söyler

Kuralların Uygulanması

Burada öncelikle dizin yolunu değiştireceğiz veya sistemimizde conf.js ve spec.js'nin bulunduğu klasöre gideceğiz..

Aşağıdaki adımı izleyin.

) 1 Adım Komut istemini açın.

) 2 Adım Selenium web sürücüsü yöneticisinin çalışır durumda olduğundan emin olun. Bunun için “webdriver-manager start” komutunu verin ve Enter tuşuna basın.

(Selenium web sürücüsü çalışır durumda değilse, İletki web uygulamasını yönetecek web sürücüsünü bulamadığı için teste devam edemeyiz)

) 3 Adım Yeni bir komut istemi açın ve komutu şu şekilde verin: “iletki conf.js” Yapılandırma dosyasını çalıştırmak için.

Açıklama:

Burada İletki, içinde verilen spesifikasyon dosyası bulunan yapılandırma dosyasını yürütecektir.
Selenium sunucusunun şu anda çalıştığını görebiliriz:http://localhost:4444/wd/hubconf.js dosyasında vermiş olduğumuz.
Ayrıca, yukarıdaki ekran görüntüsünde olduğu gibi kaç tanesinin geçildiğini ve başarısız olunduğunu burada görebilirsiniz..

Tamam, geçildiğinde veya beklendiği gibi sonucu doğruladık. Şimdi başarısızlık sonucuna da bakalım.

) 1 Adım Açma ve değiştirmenin spec.js'nin aşağıdaki gibi “'Merhaba GURU99'u değiştir” olarak sonuçlanması bekleniyor.

Spec.js'deki değişiklikten sonra :

describe('Enter GURU99 Name', function() {
 it('should add a Name as GURU99', function() {
 browser.get('https://angularjs.org');
 element(by.model('yourName')).sendKeys('GURU99');
  var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1'));
expect(guru.getText()).toEqual('Hello change GURU99!');
  });
});

) 2 Adım Spec.js dosyasını kaydedin ve “Kodun Yürütülmesi” bölümünün yukarıdaki adımlarını tekrarlayın.

Şimdi yukarıdaki adımları uygulayın.

Sonuç:

Sonucun ekran görüntüsünde 'F' ile gösterilen başarısız olduğunu ve nedeninin şu şekilde olduğunu görebiliriz: “Beklenen 'Merhaba GURU99!' 'Merhaba GURU99'u değiştir!'e eşit olacak. Ayrıca kod çalıştırılırken kaç hatayla karşılaşıldığını gösterir.

ile aynı şeyi başarabilir miyiz? Selenium ağ sürücüsü?

Bazen AngularJS uygulamalarının web elemanlarını XPath veya CSS seçiciyi kullanarak tanımlayabiliriz. Selenium ağ sürücüsü. Ancak AngularJS uygulamalarında elemanlar dinamik olarak oluşturulacak ve değiştirilecektir. Dolayısıyla İletki, AngularJS uygulamalarıyla çalışmak için daha iyi bir uygulamadır.

Jasmine Reporters'ı kullanarak Raporlar Oluşturun

İletki, Jasmine muhabirlerinin test raporları oluşturmasını destekler. Bu bölümde Test yürütme raporlarını XML formatında otomatik olarak oluşturmak için JunitXMLReporter'ı kullanacağız.

XML formatında rapor oluşturmak için aşağıdaki adımları izleyin.

Jasmine Reporter Kurulumu

Bunu yerel veya küresel olarak yapmanın iki yolu vardır

Komut istemini açın ve yerel olarak yüklemek için aşağıdaki komutu çalıştırın

npm install --save-dev jasmine-reporters@^2.0.0

Yukarıdaki komut, komut isteminde komutu çalıştırdığımız dizinden jasmine rapor düğüm modüllerini yerel olarak kuracaktır.

Komut istemini açın ve genel kurulum için aşağıdaki komutu yürütün

npm install –g jasmine-reporters@^2.0.0

Bu dersimizde Jasmine Reporter'ları yerel olarak kuracağız..

) 1 Adım Komutu yürütün.

npm install --save-dev jasmine-reporters@^2.0.0

aşağıdaki gibi komut isteminden.

) 2 Adım Dizindeki kurulum klasörlerini kontrol edin. Aşağıdaki anlık görüntüdeki gibi başarıyla kurulduğunda “Node_modules” mevcut olmalıdır.

) 3 Adım Mevcut bir conf.js dosyasına aşağıdaki renkli kodu ekleyin

exports.config = {
      seleniumAddress: 'http://localhost:4444/wd/hub',
      capabilities: {
          'browserName': 'firefox'
      },
      specs: ['spec.js'],
     framework: 'jasmine2' ,
      onPrepare: function() {
          var jasmineReporters = require('C:/Users/RE041943/Desktop/guru/node_modules/jasmine-reporters');
          jasmine.getEnv().addReporter(new jasmineReporters.JUnitXmlReporter(null, true, true)
          );
     }
   };

Kodun açıklaması:

Kodda “raporu oluşturuyoruz”JUnitXmlReporter” ve Raporun nerede saklanacağını Yol'a vermek.

) 4 Adım Komut istemini açın ve komutu yürütün iletki conf.js.

) 5 Adım Yukarıdaki kodu çalıştırdığınızda belirtilen yolda junitresults.xml oluşturulacaktır.

) 6 Adım XML'i açın ve sonucu doğrulayın. Başarısızlık mesajı sonuç dosyasında bizim gibi gösterilir. Test Durumu başarısız oldu. "spec.js"den Beklenen Sonucun bir Web sayfasından Gerçek sonuçla eşleşmemesi nedeniyle Test durumu başarısız oldu

) 7 Adım Kanıtlar veya sonuç dosyaları için junitresult.xml dosyasını kullanın.

ÖZET

Gerçi Selenium iletkinin yaptığı bazı şeyleri yapabilir, iletki AngularJS uygulamalarını test etmek için endüstriyel standart ve en iyi uygulamadır. Bir İletki ayrıca içindeki birden fazla yeteneği yönetebilir ve kullanarak web öğelerinin dinamik değişikliklerini yönetebilir. ng modeli, ng-click.., vb. (Selenyum bunu yapamaz).

Beğenebilirsin: