ProtracSamouczek testowania Tor: Framework narzędzi automatyzacji

Dlaczego potrzebujemy Protractor Framework?

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 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. Więc, Protractor na szczycie Selenium może obsługiwać i kontrolować te atrybuty w aplikacjach internetowych.

ProfesjonalistatracTor to kompleksowe środowisko testowe dla aplikacji opartych na AngularJS. Podczas gdy większość frameworków koncentruje się na przeprowadzaniu testów jednostkowych dla aplikacji AngularJS, ProtracTor koncentruje się na testowaniu faktycznej funkcjonalności aplikacji.

Zanim zaczniemy 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. Instalacja NodeJS (NPM) – aby zainstalować wersję Pro, musimy zainstalować NodeJStracTor. Instrukcję instalacji znajdziesz pod poniższym linkiem. ( https://www.guru99.com/download-install-node-js.html )

ProtracInstalacja Tora

Krok 1) Otwórz wiersz poleceń i wpisz „npm install –g protracsłup" i naciśnij Enter.

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

Krok 2) Sprawdź instalację i wersję za pomocą "Protractor – 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 w aplikacji internetowej Angular w określonej przeglądarce. Po wersji ProtracTor jest zainstalowany, należy zaktualizować menedżera sterowników internetowych 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 internetowych w tle i nasłuchiwanie testów uruchamianych przez program.tracsłup.

Kiedyś ProtracDo uruchomienia dowolnego testu używany jest Tor. Sterownik internetowy automatycznie załaduje i uruchomi test w odpowiedniej przeglądarce. Aby uruchomić menedżera sterowników internetowych, należy wykonać poniższe polecenie w wierszu poleceń.

webdriver-manager start

Teraz, jeśli przejdziesz do następującego 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 ProtracTor

ProtracDo uruchomienia Tora potrzebne są dwa pliki: specyfikacja pliku i konfiguracja plik.

1. plik konfiguracyjny:Ten plik pomaga profesjonalistomtractor do miejsca, w którym znajdują się pliki testowe (specs.js) i do komunikacji z Selenium serwer (Selenium Adres). Chrome jest domyślną przeglądarką dla wersji Protracsłup.

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 „Witaj” GuruWidziano 99 cali.

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

Code:

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

Code 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 z wymienionym 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']
};

Code Wyjaśnienie conf.js

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

Wykonanie Code

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 jako Protractor nie może znaleźć sterownika internetowego do obsługi aplikacji internetowej)

Krok 3) Otwórz nowy wiersz poleceń i wydaj polecenie as "zawodowiectrac„tor conf.js” aby uruchomić plik konfiguracyjny.

Wyjaśnienie:

• Tutaj Protractor uruchomi plik konfiguracyjny zawierający podany plik 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 „Wykonywanie Code" Sekcja

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. Więc ProtracTor jest lepszym rozwiązaniem do pracy z aplikacjami AngularJS.

Generuj raporty za pomocą Jasmine Reporters

ProtracTor obsługuje reportery Jasmine do generowania 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 dlatractor 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 zrobić niektóre rzeczy, które robi profesjonalistatractor robi, profesjonalistatracTor to standard branżowy i najlepsza praktyka testowania aplikacji AngularJS. ProfesjonalistatracTor może również zarządzać wieloma funkcjami i obsługiwać dynamiczne zmiany elementów sieciowych za pomocą model ng, ng-click.., itd.. (Czego selen nie potrafi).