Açıölçer - Nesneler

Bu bölüm, Açıölçer'deki nesneler hakkında ayrıntılı olarak tartışır.

Sayfa Nesneleri nedir?

Sayfa nesnesi, test bakımını geliştirmek ve kod tekrarını azaltmak için e2e testleri yazmak için popüler hale gelen bir tasarım modelidir. AUT'nizin (test edilen uygulama) bir sayfasına arayüz görevi gören nesne yönelimli bir sınıf olarak tanımlanabilir. Ancak, sayfa nesnelerine derinlemesine dalmadan önce, otomatik kullanıcı arayüzü testindeki zorlukları ve bunlarla başa çıkmanın yollarını anlamamız gerekir.

Otomatik kullanıcı arayüzü testiyle ilgili zorluklar

Otomatikleştirilmiş kullanıcı arayüzü testiyle ilgili bazı yaygın zorluklar aşağıdadır -

UI Değişiklikleri

UI testiyle çalışırken en yaygın sorunlar, kullanıcı arayüzünde gerçekleşen değişikliklerdir. Örneğin, çoğu zaman düğmeler veya metin kutuları vb. Genellikle değişir ve UI testi için sorunlar yaratır.

DSL (Etki Alanına Özgü Dil) desteği eksikliği

UI testiyle ilgili bir diğer sorun da DSL desteğinin olmamasıdır. Bu sorunla birlikte neyin test edildiğini anlamak çok zorlaşıyor.

Çok sayıda tekrar / Kod çoğaltma

UI testinde bir sonraki yaygın sorun, çok sayıda tekrar veya kod tekrarının olmasıdır. Aşağıdaki kod satırlarının yardımı ile anlaşılabilir -

element(by.model(‘event.name’)).sendKeys(‘An Event’);
element(by.model(‘event.name’)).sendKeys(‘Module 3’);
element(by.model(‘event.name’));

Zor bakım

Yukarıdaki zorluklar nedeniyle, bakım için baş ağrısına dönüşür. Bunun nedeni, tüm örnekleri bulmamız, yeni ad, seçici ve diğer kodla değiştirmemiz gerektiğidir. Ayrıca testleri yeniden düzenleme ile uyumlu tutmak için çok zaman harcamamız gerekiyor.

Kırık testler

UI testindeki bir diğer zorluk, testlerde çok sayıda başarısızlık olmasıdır.

Zorluklarla Başa Çıkmanın Yolları

UI testinin bazı yaygın zorluklarını gördük. Bu tür zorluklarla baş etmenin yollarından bazıları aşağıdaki gibidir:

Referansları Manuel Olarak Güncelleme

Yukarıdaki zorlukların üstesinden gelmek için ilk seçenek, referansları manuel olarak güncellemektir. Bu seçenekteki sorun, testlerimizin yanı sıra kodda da manuel değişikliği yapmamız gerektiğidir. Bu, bir veya iki test dosyanız olduğunda yapılabilir, ancak ya bir projede yüzlerce test dosyanız varsa?

Sayfa Nesnelerini Kullanma

Yukarıdaki zorlukların üstesinden gelmek için başka bir seçenek, sayfa nesnelerini kullanmaktır. Bir sayfa nesnesi, temelde bir Angular şablonun özelliklerini kapsayan düz bir JavaScript'tir. Örneğin, aşağıdaki özellik dosyası, farkı anlamak için sayfa nesneleri olmadan ve sayfa nesneleriyle birlikte yazılmıştır -

Without Page Objects

describe('angularjs homepage', function() {
   it('should greet the named user', function() {
      browser.get('http://www.angularjs.org');
      element(by.model('yourName')).sendKeys('Julie');
      var greeting = element(by.binding('yourName'));
      expect(greeting.getText()).toEqual('Hello Julie!');
   });
});

With Page Objects

Kodu Sayfa Nesneleri ile yazmak için yapmamız gereken ilk şey bir Sayfa Nesnesi oluşturmaktır. Dolayısıyla, yukarıdaki örnek için bir Sayfa Nesnesi şöyle görünebilir -

var AngularHomepage = function() {
   var nameInput = element(by.model('yourName'));
   var greeting = element(by.binding('yourName'));

   this.get = function() {
      browser.get('http://www.angularjs.org');
   };

   this.setName = function(name) {
      nameInput.sendKeys(name);
   };
   
   this.getGreetingText = function() {
      return greeting.getText();
   };
};
module.exports = new AngularHomepage();

Testleri Organize Etmek İçin Sayfa Nesnelerini Kullanma

UI testinin zorluklarının üstesinden gelmek için yukarıdaki örnekte sayfa nesnelerinin kullanıldığını gördük. Daha sonra, testleri düzenlemek için bunları nasıl kullanabileceğimizi tartışacağız. Bunun için test komut dosyasının işlevselliğini değiştirmeden test komut dosyasını değiştirmemiz gerekir.

Misal

Bu kavramı anlamak için yukarıdaki konfigürasyon dosyasını sayfa nesneleriyle alıyoruz. Test komut dosyasını aşağıdaki gibi değiştirmemiz gerekiyor -

var angularHomepage = require('./AngularHomepage');
describe('angularjs homepage', function() {
   it('should greet the named user', function() {
      angularHomepage.get();

      angularHomepage.setName('Julie');
   
      expect(angularHomepage.getGreetingText()).toEqual
      ('Hello Julie!');
   });
});

Burada, sayfa nesnesine giden yolun belirtiminize göre olacağını unutmayın.

Aynı notta, test paketimizi çeşitli test gruplarına ayırabiliriz. Konfigürasyon dosyası daha sonra aşağıdaki gibi değiştirilebilir

exports.config = {
   // The address of a running selenium server.
   seleniumAddress: 'http://localhost:4444/wd/hub',

   // Capabilities to be passed to the webdriver instance.
   capabilities: {
      'browserName': 'chrome'
   },
   // Spec patterns are relative to the location of the spec file. They may
   // include glob patterns.
   suites: {
      homepage: 'tests/e2e/homepage/**/*Spec.js',
      search: ['tests/e2e/contact_search/**/*Spec.js',
         'tests/e2e/venue_search/**/*Spec.js']
   },

   // Options to be passed to Jasmine-node.
   jasmineNodeOpts: {
      showColors: true, // Use colors in the command line report.
   }
};

Şimdi, bir veya diğer test paketini çalıştırmak arasında kolayca geçiş yapabiliriz. Aşağıdaki komut, testin yalnızca ana sayfa bölümünü çalıştıracaktır -

protractor protractor.conf.js --suite homepage

Benzer şekilde, aşağıdaki komutla belirli test paketlerini çalıştırabiliriz -

protractor protractor.conf.js --suite homepage,search