Açıölçer Testi nedir?
PROTRACTOR , AngularJS uygulamalarının Test edilmesinde önemli bir rol oynayan ve Selenium, Jasmine, Web sürücüsü vb. Gibi güçlü teknolojileri birleştiren bir Çözüm entegratörü olarak çalışan otomasyon ve uçtan uca davranış odaklı bir test aracıdır. İletki Testinin Amacı sadece AngularJS uygulamalarını test etmek değil, aynı zamanda normal Web Uygulamaları için otomatik regresyon testleri yazmak içindir.
Bu başlangıç eğitiminde öğreneceksiniz-
- Neden İletki Çerçevesine İhtiyacımız Var?
- Açıölçer Kurulumu
- İletki kullanarak örnek AngularJS uygulama testi
- Kodun Yürütülmesi
- Jasmine Reporters kullanarak Raporlar Oluşturun
Neden İletki Çerçevesine İhtiyacımız Var?
JavaScript hemen hemen tüm web uygulamalarında kullanılmaktadır. Uygulamalar büyüdükçe, JavaScript'in boyutu ve karmaşıklığı da artar. Böyle bir durumda, Test Uzmanları için web uygulamasını çeşitli senaryolar için test etmek zor bir görev haline gelir.
Bazen JUnit veya Selenium WebDriver kullanarak AngularJS uygulamalarında web öğelerini yakalamak zordur.
İletki, JavaScript ile yazılmış ve AngularJS uygulamalarındaki web öğelerini tanımlamak için Node ile birlikte çalışan bir NodeJS programıdır ve ayrıca tarayıcıyı kullanıcı eylemleriyle kontrol etmek için WebDriver'ı kullanır.
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 kıyasla daha az ve esnek kod kullanır.
Normal Selenium Web sürücüsünü kullanarak Angular JS web öğelerini neden bulamıyoruz?
Açısal JS uygulamaları, Selenium yer belirleyicilerinde bulunmayan ng-tekrarlayıcı, ng-denetleyici, ng-modeli… vb. Gibi bazı ekstra HTML niteliklerine sahiptir. Selenium, Selenium kodunu kullanarak bu web öğelerini tanımlayamaz. Bu nedenle, Selenium'un üstündeki Açıölçer, Web Uygulamalarında bu özellikleri 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.
İletki'yi başlatmadan önce aşağıdakileri yüklememiz gerekir:
- Selenyum
Selenium Kurulum adımlarını aşağıdaki bağlantılarda bulabilirsiniz (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)
Açıölçer Kurulumu
Adım 1) Komut istemini açın ve "npm install -g protractor" yazın ve Enter'a basın .
Yukarıdaki komut gerekli dosyaları indirecek ve Protractor'ı istemci sisteme kuracaktır.
Adım 2) " İletki - sürümü " kullanarak kurulumu ve sürümü kontrol edin . 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.
(Adım 3 ve 4 İsteğe bağlıdır ancak daha iyi uygulama için önerilir)
Adım 3) Web sürücü yöneticisini güncelleyin. Web sürücü yöneticisi, testleri belirli bir tarayıcıda açısal web uygulamasına karşı çalıştırmak için kullanılır. Protractor yüklendikten sonra, web sürücü 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
Adım 4) Web sürücü yöneticisini başlatın. Bu adım, web sürücü yöneticisini arka planda çalıştıracak ve iletki aracılığıyla çalıştırılan tüm testleri dinleyecektir.
İletki herhangi bir testi çalıştırmak için kullanıldığında, web sürücüsü otomatik olarak testi ilgili tarayıcıya yükleyecek ve çalıştıracaktır. Web sürücü yöneticisini başlatmak için, aşağıdaki komutun komut isteminden yürütülmesi gerekir.
webdriver-manager start
Şimdi, tarayıcınızda aşağıdaki URL'ye ( http: // localhost: 4444 / wd / hub / static / resource / hub.html ) giderseniz, aslında arka planda çalışan Web sürücüsü yöneticisini göreceksiniz.
İletki kullanarak örnek AngularJS uygulama testi
İletki çalıştırmak için iki dosyaya ihtiyaç duyar, bir özellik dosyası ve yapılandırma dosyası.
- Konfigürasyon dosyası : Bu Dosya, ileticinin test dosyalarının yerleştirildiği yere (specs.js) ve Selenium sunucusuyla (Selenium Adresi) konuşmasına yardımcı olur. Chrome, Protractor için varsayılan tarayıcıdır.
- Spec dosyası: Bu Dosya, uygulamayla etkileşim kurmak için mantık ve konum belirleyicileri içerir .
Adım 1) https://angularjs.org oturum açmalı ve metni "Buraya bir isim girin" metin kutusuna "GURU99" olarak girmeliyiz.
Adım 2) Bu adımda,
- "Guru99" adını girdi
- Çıktı metninde "Hello Guru99" görülür.
Adım 3) Şimdi adı girdikten sonra web sayfasından metni yakalamalı ve beklenen metni doğrulamalıyız .
Kod:
Yukarıda belirtildiği gibi konfigürasyon dosyasını (conf.js) ve spec dosyasını (spec.js) hazırlamalıyız .
Spec.js 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ımlamaktadır ( 'GURU99 Adını girin', function ()
Tanımlama sözdizimi Jasmine çerçevesinden alınmıştır. Burada "tanımla" ("GURU99 Adını Girin") tipik olarak bir uygulamanın bileşenlerini tanımlar, bunlar bir sınıf veya işlev vb.
- it ('GURU99 olarak bir İsim eklemeli', function ()
- browser.get ('https://angularjs.org')
Selenium Webdriver'da olduğu gibi browser.get, belirtilen URL ile yeni bir tarayıcı örneği açacaktır.
- öğe (by.model ('adınız')). sendKeys ('GURU99')
Burada Model adını web sayfasındaki "ng-model" değeri olan "Adınız" olarak kullanarak web öğesini buluyoruz. Aşağıdaki ekran görüntüsünü kontrol edin.
- var guru = öğe (by.xpath ('html / body / div [2] / div [1] / div [2] / div [2] / div / h1'))
Burada XPath kullanarak web öğesini buluyoruz ve değerini bir değişken "guru" içinde saklıyoruz .
- bekliyoruz (guru.getText ()). toEqual ('Merhaba GURU99!')
Son olarak, web sayfasından aldığımız metni (gettext () kullanarak) beklenen metinle doğruluyoruz.
Conf.js mantığı:
exports.config = {seleniumAddress: 'http://localhost:4444/wd/hub',specs: ['spec.js']};
Conf.js kod açıklaması
- seleniumAddress: 'http: // localhost: 4444 / wd / hub'
Konfigürasyon dosyası Açığa Aktarıcıya Selenium Adresinin konumunu Selenium WebDriver ile konuşmasını söyler.
- specs: ['spec.js']
Bu satır, İletki Uzmanına spec.js test dosyalarının konumunu söyler
Kodun Yürütülmesi
Burada önce dizin yolunu değiştireceğiz veya confi.js ve spec.js'nin sistemimize yerleştirildiği klasöre gideceğiz .
Aşağıdaki adımı izleyin.
Adım 1) Komut istemini açın.
Adım 2) Selenyum web sürücü yöneticisinin çalışır durumda olduğundan emin olun. Bunun için "webdriver-manager start" komutunu verin ve Enter'a basın .
(Selenyum web sürücüsü çalışmıyorsa ve çalışmıyorsa, İletki web uygulamasını kullanacak web sürücüsünü bulamadığından teste devam edemeyiz)
Adım 3) Yeni bir komut istemi açın ve yapılandırma dosyasını çalıştırmak için komutu "iletki conf.js" olarak verin .
Açıklama:
- Burada İletki, yapılandırma dosyasını verilen özellik dosyasıyla çalıştıracaktır.
- Conf.js dosyasında vermiş olduğumuz " http: // localhost: 4444 / wd / hub " da çalışan selenyum sunucusunu görebiliyoruz .
- Ayrıca, yukarıdaki ekran görüntüsündeki gibi kaçının geçtiğini ve başarısız olduğunu buradan görebilirsiniz .
Güzel, geçtiğinde veya beklendiği gibi sonucu doğruladık. Şimdi de başarısızlık sonucuna bakalım.
Adım 1) Açın ve aşağıdaki gibi spec.js ile sonuçlanması beklenen değişikliği "'Merhaba değiştir GURU99" yapın.
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!');});});
Adım 2) 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ç:
Başarısız olan sonucu ekran görüntüsünde "F" ile "Beklenen" Merhaba GURU99! "Nedeni ile görebiliriz. 'Merhaba değişiklik GURU99!' a eşittir. Ayrıca, kod çalıştırılırken kaç tane başarısızlıkla karşılaşıldığını gösterir.
Selenium web sürücüsü ile aynı şeyi başarabilir miyiz?
Bazen AngularJS uygulamalarının web öğelerini Selenium web sürücüsünden XPath veya CSS seçici kullanarak belirleyebiliriz. Ancak AngularJS uygulamalarında, öğeler dinamik olarak oluşturulacak ve değiştirilecektir. Dolayısıyla Açıölçer, AngularJS uygulamalarıyla çalışmak için daha iyi bir uygulamadır.
Jasmine Reporters kullanarak Raporlar Oluşturun
İletki, Jasmine muhabirlerini test raporları oluşturmaları için destekler. Bu bölümde, Test yürütme raporlarını otomatik olarak XML biçiminde oluşturmak için JunitXMLReporter'ı kullanacağız.
XML biçiminde raporlar oluşturmak için aşağıdaki adımları izleyin.
Jasmine Reporter'ın Kurulumu
Bunu yerel veya küresel olarak yapmanın iki yolu vardır.
- Komut istemini açın, yerel olarak yüklemek için aşağıdaki komutu yürütün
npm install --save-dev jasmine-reporters@^2.0.0
Yukarıdaki komut yasemin raporlarını yükleyecektir düğüm modülleri yerel olarak komutu komut isteminde çalıştırdığımız dizinden anlamına gelir.
- Komut istemini aç, genel kurulum için aşağıdaki komutu yürütün
npm install -g jasmine-reporters@^2.0.0
Bu eğitimde yasemin muhabirlerini yerel olarak kuracağız .
Adım 1) Komutu yürütün.
npm install --save-dev jasmine-reporters@^2.0.0
aşağıdaki gibi komut isteminden.
Adım 2) Dizindeki kurulum klasörlerini kontrol edin . "Node_modules" aşağıdaki anlık görüntüdeki gibi başarıyla kurulursa mevcut olmalıdır.
Adım 3) Aşağıdaki renkli kodu mevcut bir conf.js dosyasına 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));}};
Kod açıklaması:
Kodda , " JUnitXmlReporter " raporunu oluşturuyoruz ve raporun nerede saklanacağına Yol veriyoruz.
Adım 4) Komut istemini açın ve komut iletki conf.js'yi çalıştırın.
Adım 5) Yukarıdaki kodu çalıştırdığınızda, belirtilen yolda junitresults.xml oluşturulacaktır.
Adım 6) XML'yi açın ve sonucu doğrulayın. Test Vakamız başarısız olduğu için sonuç dosyasında hata mesajı gösterilir. "Spec.js" den Beklenen Sonuç bir Web sayfasındaki Gerçek sonuçla eşleşmediği için Test olayı başarısız oldu
Adım 7) Kanıtlar veya sonuç dosyaları için junitresult.xml dosyasını kullanın.
Özet:
Selenium ileticinin yaptığı bazı şeyleri yapabilse de, iletki endüstriyel standarttır ve AngularJS uygulamalarını test etmek için en iyi uygulamadır. Bir Açıölçer aynı zamanda içindeki birden fazla yeteneği yönetebilir ve ng-model, ng-tıklama…, vb. Kullanarak ağ elemanlarının dinamik değişikliklerini idare edebilir (hangi selenyum yapamaz).
Bu makale Ranjith Kumar Enishetti tarafından hazırlanmıştır.