Samouczek testowania kątomierza: Struktura narzędzi automatyzacji

Dlaczego potrzebujemy platformy kątomierza?

JavaSkrypt jest używany w niemal wszystkich aplikacjach internetowych. W miarę rozwoju aplikacji, JAVASCRIPT również zwiększa rozmiar i złożoność. W takim przypadku testowanie aplikacji internetowej w różnych scenariuszach staje się trudnym zadaniem dla Testerów.

Czasami trudno jest przechwycić elementy internetowe w aplikacjach AngularJS za pomocą JUnit or Selenium Sterownik sieciowy.

Protractor to program NodeJS napisany w języku JavaSkrypt działa z Node w celu identyfikacji elementów internetowych w aplikacjach AngularJS, a także używa WebDriver do sterowania przeglądarką za pomocą działań użytkownika.

Ok, dobrze, porozmawiajmy teraz o tym, czym dokładnie jest aplikacja AngularJS?

Aplikacje AngularJS to aplikacje internetowe, które wykorzystują rozszerzoną składnię HTML do wyrażania komponentów aplikacji internetowych. Stosowany jest głównie w dynamicznych aplikacjach internetowych. Aplikacje te wykorzystują mniej i bardziej elastycznego kodu w porównaniu ze zwykłymi aplikacjami internetowymi.

Dlaczego nie możemy znaleźć elementów internetowych Angular JS przy użyciu Normal Selenium Sterownik sieciowy?

Aplikacje Angular JS mają kilka dodatkowych atrybutów HTML, takich jak ng-repeater, ng-controller, ng-model.. itp., które nie są uwzględnione w Selenium lokalizatory. Selenium nie jest w stanie zidentyfikować tych elementów sieciowych za pomocą Selenium kod. A więc kątomierz na górze Selenium może obsługiwać i kontrolować te atrybuty w aplikacjach internetowych.

Kątomierz to kompleksowy framework testujący aplikacje oparte na Angular JS. Podczas gdy większość frameworków koncentruje się na przeprowadzaniu testów jednostkowych dla aplikacji Angular JS, Protractor koncentruje się na testowaniu rzeczywistej funkcjonalności aplikacji.

Zanim uruchomimy Protractor, musimy zainstalować następujące elementy:

1. SeleniumMożesz znaleźć Selenium Kroki instalacji znajdują się w poniższych linkach, (https://www.guru99.com/installing-selenium-webdriver.html )
2. NPM (Node.js) Instalacja NodeJS, musimy zainstalować NodeJS, aby zainstalować Protractor. Kroki instalacji można znaleźć w poniższym linku. ( https://www.guru99.com/download-install-node-js.html )

Instalacja kątomierza

Krok 1) Otwórz wiersz poleceń i wpisz „npm install –g kątomierz” i naciśnij Enter.

Powyższe polecenie pobierze niezbędne pliki i zainstaluje Protractor w systemie klienckim.

Krok 2) Sprawdź instalację i wersję za pomocą "Kątomierz – wersja". Jeśli się powiedzie, wyświetli wersję jak na poniższym zrzucie ekranu. Jeśli nie, wykonaj ponownie krok 1.

(Kroki 3 i 4 są opcjonalne, ale zalecane dla lepszej praktyki)

Krok 3) Zaktualizuj menedżera sterowników internetowych. Menedżer sterowników internetowych służy do uruchamiania testów względem aplikacji internetowej Angular w określonej przeglądarce. Po zainstalowaniu programu Protractor menedżer sterowników internetowych musi zostać zaktualizowany do najnowszej wersji. Można to zrobić, uruchamiając następujące polecenie w wierszu poleceń.

webdriver-manager update

Krok 4) Uruchom menedżera sterowników internetowych. Ten krok spowoduje uruchomienie menedżera sterowników sieciowych w tle i nasłuchiwanie wszelkich testów przeprowadzanych za pomocą kątomierza.

Po użyciu Protractor do uruchomienia dowolnego testu, sterownik sieciowy automatycznie załaduje i uruchomi test w odpowiedniej przeglądarce. Aby uruchomić menedżera sterowników sieciowych, należy wykonać następujące polecenie z poziomu wiersza poleceń.

webdriver-manager start

Teraz, jeśli przejdziesz do następującego adresu URL (http://localhost:4444/wd/hub/static/resource/hub.html) w przeglądarce, zobaczysz menedżera sterowników sieciowych działającego w tle.

Przykładowe testowanie aplikacji AngularJS przy użyciu kątomierza

Protractor potrzebuje do uruchomienia dwóch plików, a specyfikacja pliku i konfiguracja plik.

1. plik konfiguracyjny: Ten plik pomaga kątomierzowi zlokalizować miejsce umieszczenia plików testowych (specs.js) i porozmawiać Selenium serwer (Selenium Adres). Chrome jest domyślną przeglądarką dla Kątomierza.

2. Plik specyfikacji: Ten plik zawiera logikę i lokalizatory umożliwiające interakcję z aplikacją.

Krok 1) Musimy się zalogować https://angularjs.org i wpisz tekst „GURU99” w polu tekstowym „Wpisz tutaj nazwę”.

Krok 2) W tym etapie,

1. Wprowadzono nazwę „Guru99”
2. W tekście wyjściowym widać „Hello Guru99”.

Krok 3) Teraz musimy przechwycić tekst ze strony internetowej po wpisaniu nazwy i zweryfikować go z oczekiwanym tekstem.

Kod:

Musimy przygotować plik konfiguracyjny (konf.js) i plik specyfikacji (spec.js) jak wspomniano powyżej.

Logika spec.js:

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

Kod Wyjaśnienie spec.js:

1. opisać(„Wprowadź nazwę GURU99”, funkcja() Składnia opisu pochodzi ze środowiska Jasmine. Tutaj „opisz” („Wprowadź nazwę GURU99”) zazwyczaj definiuje komponenty aplikacji, którymi może być klasa, funkcja itp. W pakiecie kodów nazywany „Wprowadź GURU99” jest po prostu ciągiem znaków, a nie kodem.
2. it(„należy dodać nazwę jako GURU99”, funkcja ()
3. przeglądarka.get('https://angularjs.org')Jak w Selenium Webdriver Browser.get otworzy nową instancję przeglądarki ze wspomnianym adresem URL.
4. element(by.model('twoje imię')).wyślij klucze(„GURU99”) Tutaj znajdujemy element sieciowy, używając nazwy modelu jako „yourName”, która jest wartością „ng-model” na stronie internetowej. Sprawdź zrzut ekranu poniżej-

5. var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1')) Tutaj znajdujemy element sieciowy za pomocą XPath i zapisz jego wartość w zmiennej „guru”.
6. oczekiwać(guru.getText()).doRówne(„Witaj GURU99!”) Na koniec weryfikujemy tekst, który otrzymaliśmy ze strony internetowej (za pomocą gettext() ) z oczekiwanym tekstem.

Logika conf.js:

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

Kod Objaśnienie pliku conf.js

1. seleniumAddress: 'http://localhost:4444/wd/hub'Plik konfiguracyjny informuje program Protractor o lokalizacji Selenium Adres, z którym można porozmawiać Selenium Sterownik sieciowy.
2. specs: ['spec.js']Ta linia informuje Kątomierz o lokalizacji plików testowych spec.js

Wykonanie Kodeksu

Tutaj najpierw zmienimy ścieżkę katalogu lub przejdziemy do folderu, w którym w naszym systemie umieszczone są pliki confi.js i spec.js.

Wykonaj następujące kroki.

Krok 1) Otwórz wiersz polecenia.

Krok 2) Upewnij się, że menedżer sterowników internetowych selenium jest uruchomiony i działa. W tym celu podaj polecenie „webdriver-manager start” i naciśnij Enter.

(Jeśli sterownik sieciowy Selenium nie jest uruchomiony i nie działa, nie możemy kontynuować testu, ponieważ Protractor nie może znaleźć sterownika sieciowego do obsługi aplikacji sieciowej)

Krok 3) Otwórz nowy wiersz poleceń i wydaj polecenie as „konf. kątomierza.js” aby uruchomić plik konfiguracyjny.

Wyjaśnienie:

• Tutaj Kątomierz wykona plik konfiguracyjny z podanym plikiem specyfikacji.
• Możemy zobaczyć serwer selenu działający w trybie „http://localhost:4444/wd/hub”, który podaliśmy w pliku conf.js.
• Tutaj można również zobaczyć wynik liczby zaliczonych i niepowodzeń, jak na powyższym zrzucie ekranu.

Dobrze, zweryfikowaliśmy wynik, gdy został zaliczony lub zgodnie z oczekiwaniami. Przyjrzyjmy się teraz także wynikowi niepowodzenia.

Krok 1) Otwórz i zmień oczekiwany wynik w pliku spec.js na „Witajcie, zmień GURU99”, jak poniżej.

Po zmianie w spec.js :

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

Krok 2) Zapisz plik spec.js i powtórz powyższe kroki z sekcji „Wykonanie kodu”.

Teraz wykonaj powyższe kroki.

Wynik:

Na zrzucie ekranu widzimy, że wynik nie powiódł się, co jest oznaczone literą „F” i powodem jest: „Oczekiwano „Witajcie GURU99!” równa się „Witaj, zmień GURU99!”. Pokazuje także, ile błędów wystąpiło podczas wykonywania kodu.

Czy możemy osiągnąć to samo z Selenium sterownik sieciowy?

Czasami możemy zidentyfikować elementy internetowe aplikacji AngularJS za pomocą selektora XPath lub CSS Selenium sterownik sieciowy. Ale w aplikacjach AngularJS elementy będą generowane i zmieniane dynamicznie. Dlatego kątomierz jest lepszą praktyką do pracy z aplikacjami AngularJS.

Generuj raporty za pomocą Jasmine Reporters

Protractor wspiera reporterów Jasmine w generowaniu raportów testowych. W tej sekcji użyjemy JunitXMLReporter do automatycznego generowania raportów wykonania testów w formacie XML.

Wykonaj poniższe kroki, aby wygenerować raporty w formacie XML.

Instalacja Jasmine Reporter

Można to zrobić na dwa sposoby: lokalnie lub globalnie

1. Otwórz wiersz poleceń i wykonaj następujące polecenie, aby zainstalować lokalnie

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

Powyższe polecenie zainstaluje moduły węzłów raportów jasmine lokalnie, czyli z katalogu, w którym uruchamiamy polecenie w wierszu poleceń.

2. Otwórz wiersz poleceń i wykonaj następujące polecenie w celu globalnej instalacji

npm install –g jasmine-reporters@^2.0.0

W tym samouczku zainstalujemy lokalnie reportery jasmine.

Krok 1) Wykonaj polecenie.

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

z wiersza poleceń, jak poniżej.

Krok 2) Sprawdź foldery instalacyjne w katalogu. „Moduły_węzła” powinny być dostępne, jeśli zostaną pomyślnie zainstalowane, jak na poniższej migawce.

Krok 3) Dodaj następujący kolorowy kod do istniejącego pliku conf.js

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

Wyjaśnienie kodu:

W kodzie generujemy raport „JUnitReporter Xml” i podając ścieżkę, w której ma być przechowywany raport.

Krok 4) Otwórz wiersz poleceń i wykonaj polecenie kątomierz conf.js.

Krok 5) Po wykonaniu powyższego kodu w podanej ścieżce zostanie wygenerowany plik junitresults.xml.

Krok 6) Otwórz plik XML i sprawdź wynik. Komunikat o błędzie jest wyświetlany w pliku wynikowym jako nasz Przypadek testowy kończy się niepowodzeniem. Przypadek testowy zakończył się niepowodzeniem, ponieważ oczekiwany wynik z pliku „spec.js” nie jest zgodny z rzeczywistym wynikiem ze strony internetowej

Krok 7) Użyj pliku junitresult.xml w celu uzyskania dowodów lub plików z wynikami.

Podsumowanie

Chociaż Selenium może robić niektóre rzeczy, które robi kątomierz, kątomierz jest standardem przemysłowym i najlepszą praktyką do testowania aplikacji AngularJS. Kątomierz może również zarządzać wieloma funkcjami i obsługiwać dynamiczne zmiany elementów internetowych za pomocą model ng, ng-click.., itd.. (Czego selen nie potrafi).