ProtracSamouczek testowania Tor: Framework narzędzi automatyzacji

⚠️ Informacja o wycofaniu: Protractor jest przestarzałe i zarchiwizowaneWsparcie zakończyło się w sierpniu 2023 r., a Angular CLI porzucił wersję Protractor builder po Angular 15. Wybierz Dramaturg, Cypress, WebdriverIO lub TestCafe dla nowych testy end-to-endPoniższy opis dotyczy również starszych wersji pakietów.

Dlaczego potrzebujemy Protractor Framework?

JavaSkrypt jest używany w niemal wszystkich aplikacjach internetowych. Wraz z rozwojem aplikacji, JAVASCRIPT Zwiększa się również rozmiar i złożoność. W takim przypadku testowanie aplikacji webowej 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 Node.js 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.

Czym właściwie jest aplikacja AngularJS?

angularjs Aplikacje to aplikacje internetowe, które wykorzystują rozszerzoną składnię HTML do wyrażania komponentów aplikacji internetowych. Jest ona używana głównie w dynamicznych aplikacjach internetowych. Aplikacje te wykorzystują mniej elastycznego kodu w porównaniu ze standardowymi aplikacjami internetowymi. Należy pamiętać, że AngularJS 1.x zakończył długoterminowe wsparcie techniczne 31 grudnia 2021 r., więc takie aplikacje są już przestarzałe.

Dlaczego nie możemy znaleźć elementów internetowych AngularJS za pomocą polecenia Normal Selenium Sterownik sieciowy?

Aplikacje AngularJS mają pewne dodatkowe atrybuty HTML, takie 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.

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

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

1. Selenium: możesz znaleźć Selenium kroki instalacji w Selenium Instrukcja instalacji WebDriver.
2. NPM (Node.js): musimy zainstalować Node.js, aby zainstalować Protractor. Instrukcje instalacji znajdziesz w Przewodnik pobierania i instalacji Node.js.

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 klienta, jak pokazano poniżej.

Krok 2) Sprawdź instalację i wersję za pomocą "zawodowiectractor – 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 WebDriver. Menedżer WebDriver służy do uruchamiania testów w aplikacji internetowej Angular w określonej przeglądarce. Po wersji ProtracPo zainstalowaniu Tora należy zaktualizować menedżera WebDriver do najnowszej wersji. Można to zrobić, uruchamiając następujące polecenie w wierszu poleceń.

webdriver-manager update

Pliki binarne sterownika należy pobrać w sposób pokazany poniżej.

Krok 4) Uruchom menedżera WebDriver. Ten krok uruchomi menedżera WebDriver w tle i będzie nasłuchiwał testów uruchamianych przez program.tracsłup.

Po uruchomieniu testu WebDriver automatycznie załaduje go w odpowiedniej przeglądarce. Uruchom menedżera za pomocą poniższego polecenia.

webdriver-manager start

Konsola raportuje adres nasłuchiwania.

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

Przykładowe testowanie aplikacji AngularJS przy użyciu ProtracTor

Po uruchomieniu menedżera sterowników 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 otworzyć https://angular.dev/ 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://angular.dev/');
 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', function()Składnia opisu pochodzi z Struktura JasmineW tym przypadku polecenie „describe” („Wprowadź nazwę GURU99”) zazwyczaj definiuje komponenty aplikacji, którymi mogą być klasa, funkcja itp. W pakiecie kodu o nazwie „Wprowadź nazwę GURU99” jest to po prostu ciąg znaków, a nie kod.
2. it(„należy dodać nazwę jako GURU99”, funkcja ()
3. przeglądarka.get(‘https://angular.dev/’)As like in 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 „twojaNazwa”, która jest wartością „model ng„na stronie internetowej. Sprawdź poniższy zrzut ekranu-

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

Najpierw przejdź do folderu, w którym znajdują się pliki conf.js i spec.js, a następnie wykonaj poniższe kroki.

Krok 1) Otwórz wiersz polecenia.

Krok 2) Upewnij się, Selenium Menedżer WebDriver jest uruchomiony i działa. W tym celu wpisz polecenie „webdriver-manager start” i naciśnij Enter..

(Gdyby Selenium WebDriver nie jest uruchomiony i nie możemy kontynuować testu jako ProtracTor nie może znaleźć sterownika WebDriver do obsługi aplikacji internetowej)

Krok 3) Otwórz nowy wiersz poleceń i wydaj polecenie as "zawodowiectrac„tor conf.js” Aby uruchomić plik konfiguracyjny. Uruchomienie kończy się w sposób pokazany poniżej.

Wyjaśnienie:

• Tutaj Protractor uruchomi plik konfiguracyjny zawierający podany plik specyfikacji.
• Widzimy Selenium serwer działa z prędkością „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.

Wynik pozytywny został zweryfikowany. Teraz przyjrzyjmy się wynikowi negatywnemu.

Krok 1) Oczekuje się, że otwarcie i zmiana spowodują, że spec.js będzie wyglądał tak: „Hello change 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://angular.dev/');
 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 również liczbę błędów napotkanych podczas wykonywania kodu.

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

Czasami elementy AngularJS można zlokalizować za pomocą selektorów XPath lub CSS Selenium WebDriver. Jednak te elementy są generowane i odbudowywane dynamicznie, więc Protractor był bezpieczniejszą opcją dla pakietów AngularJS.

Generuj raporty za pomocą Jasmine Reporters

ProtracTor wspiera reporterów Jasmine. Ta sekcja używa JUnitXmlReporter umożliwia automatyczne generowanie raportów wykonania testów w formacie XML, postępując zgodnie z poniższymi krokami.

Instalacja Jasmine Reporter

Istnieją dwie opcje: lokalna i globalna

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 instaluje jasmine-reporters lokalnie, w katalogu, w którym jest uruchamiany.

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

npm install –g jasmine-reporters@^2.0.0

Tutaj reporterzy są zainstalowani lokalnie.

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 Test zakończył się niepowodzeniem. Przypadek testowy zakończył się niepowodzeniem, ponieważ oczekiwany wynik ze „spec.js” nie zgadza się z rzeczywistym wynikiem ze strony internetowej.

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

ProtracTor kontra alternatywy dla nowoczesnych automatyzacji testów

Od ProtracTor nie otrzymuje już aktualizacji, dlatego zespoły planujące nowe pakiety muszą wiedzieć, jak wypada on na tle frameworków, do których migrują obecnie projekty Angular. Poniższa tabela porównuje wersję Pro.tractor z trzema alternatywami, które najczęściej pojawiają się w poniższych FAQ.

Zespoły z istniejącym Protracpakiet Tor Suite zazwyczaj porusza się najszybciej Sterownik sieciowyIO, ponieważ jego styl dowodzenia i Seleniumzarządzanie sterownikami oparte na technologii Pro pozostaje zbliżone do tego, co oferuje ProtracTesterzy Tor już wiedzą. Zespoły, które zaczynają od nowa lub potrzebują najszybszych przebiegów testów, częściej wybierają Cypress lub dramatopisarza.

FAQ