Kątomierz - obiekty

W tym rozdziale omówiono szczegółowo obiekty w Kątomierz.

Co to są obiekty strony?

Obiekt strony to wzorzec projektowy, który stał się popularny do pisania testów e2e w celu usprawnienia obsługi testów i ograniczenia powielania kodu. Może być zdefiniowana jako klasa zorientowana obiektowo służąca jako interfejs do strony Twojego AUT (testowanej aplikacji). Ale zanim zagłębimy się w obiekty stron, musimy zrozumieć wyzwania związane z automatycznym testowaniem interfejsu użytkownika i sposoby radzenia sobie z nimi.

Wyzwania związane z automatycznym testowaniem interfejsu użytkownika

Oto kilka typowych wyzwań związanych z automatycznym testowaniem interfejsu użytkownika -

Zmiany interfejsu użytkownika

Bardzo częstymi problemami podczas pracy z testowaniem interfejsu użytkownika są zmiany zachodzące w interfejsie użytkownika. Na przykład zdarza się, że w większości przypadków przyciski lub pola tekstowe itp. Zwykle ulegają zmianie i stwarza problemy podczas testowania interfejsu użytkownika.

Brak obsługi DSL (Domain Specific Language)

Innym problemem związanym z testowaniem interfejsu użytkownika jest brak obsługi DSL. W tej kwestii bardzo trudno jest zrozumieć, co jest testowane.

Wiele powtórzeń / duplikatów kodu

Kolejnym częstym problemem w testowaniu interfejsu użytkownika jest to, że występuje dużo powtórzeń lub duplikatów kodu. Można to zrozumieć za pomocą następujących linii kodu -

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

Ciężka konserwacja

Ze względu na powyższe wyzwania, konserwacja staje się bólem głowy. Dzieje się tak, ponieważ musimy znaleźć wszystkie instancje, zastąpić nową nazwą, selektorem i innym kodem. Musimy również spędzać dużo czasu, aby testy były zgodne z refaktoryzacją.

Zepsute testy

Kolejnym wyzwaniem w testowaniu interfejsu użytkownika jest występowanie wielu błędów w testach.

Sposoby radzenia sobie z wyzwaniami

Widzieliśmy kilka typowych wyzwań związanych z testowaniem interfejsu użytkownika. Oto niektóre sposoby radzenia sobie z takimi wyzwaniami -

Ręczna aktualizacja odwołań

Pierwszą opcją radzenia sobie z powyższymi wyzwaniami jest ręczna aktualizacja odniesień. Problem z tą opcją polega na tym, że musimy ręcznie zmienić kod, a także nasze testy. Można to zrobić, gdy masz jeden lub dwa pliki testowe, ale co, jeśli masz setki plików testowych w projekcie?

Korzystanie z obiektów strony

Inną opcją radzenia sobie z powyższymi wyzwaniami jest użycie obiektów strony. Obiekt strony to w zasadzie zwykły JavaScript, który zawiera właściwości szablonu Angular. Na przykład następujący plik specyfikacji jest zapisywany bez obiektów strony i z nimi, aby zrozumieć różnicę -

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

Aby napisać kod z obiektami strony, pierwszą rzeczą, którą musimy zrobić, jest utworzenie obiektu strony. Dlatego obiekt strony w powyższym przykładzie mógłby wyglądać następująco -

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();

Organizowanie testów za pomocą obiektów stron

W powyższym przykładzie widzieliśmy użycie obiektów strony w celu sprostania wyzwaniom związanym z testowaniem interfejsu użytkownika. Następnie omówimy, w jaki sposób możemy ich użyć do zorganizowania testów. W tym celu musimy zmodyfikować skrypt testowy bez modyfikowania funkcjonalności skryptu testowego.

Przykład

Aby zrozumieć tę koncepcję, bierzemy powyższy plik konfiguracyjny z obiektami strony. Musimy zmodyfikować skrypt testowy w następujący sposób -

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!');
   });
});

W tym miejscu zwróć uwagę, że ścieżka do obiektu strony będzie zależna od Twojej specyfikacji.

Z tego samego powodu możemy również podzielić nasz zestaw testów na różne zestawy testów. Plik konfiguracyjny można następnie zmienić w następujący sposób

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.
   }
};

Teraz możemy łatwo przełączać się między uruchomieniem jednego lub drugiego zestawu testów. Następujące polecenie uruchomi tylko sekcję strony głównej testu -

protractor protractor.conf.js --suite homepage

Podobnie możemy uruchomić określone zestawy testów za pomocą polecenia w następujący sposób -

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