Samouczek dotyczący testowania kątomierza: Framework narzędzi automatyzacji

Spisie treści:

Anonim

Co to jest testowanie kątomierza?

PROTRACTOR to narzędzie do automatyzacji i kompleksowego testowania opartego na zachowaniu, które odgrywa ważną rolę w testowaniu aplikacji AngularJS i działa jako integrator rozwiązań, łącząc zaawansowane technologie, takie jak Selenium, Jasmine, sterownik sieciowy itp. Cel Testowania kątomierza to nie tylko testowanie aplikacji AngularJS, ale także pisanie automatycznych testów regresji dla zwykłych aplikacji internetowych.

W tym samouczku dla początkujących nauczysz się:

  • Dlaczego potrzebujemy platformy Protractor?
  • Instalacja kątomierza
  • Przykładowe testowanie aplikacji AngularJS przy użyciu kątomierza
  • Wykonanie Kodeksu
  • Generuj raporty za pomocą Jasmine Reporters

Dlaczego potrzebujemy platformy Protractor?

JavaScript jest używany w prawie wszystkich aplikacjach internetowych. Wraz z rozwojem aplikacji rośnie również rozmiar i złożoność JavaScript. W takim przypadku testerom trudno jest przetestować aplikację internetową pod kątem różnych scenariuszy.

Czasami trudno jest uchwycić elementy sieciowe w aplikacjach AngularJS za pomocą JUnit lub Selenium WebDriver.

Protractor to program NodeJS, który jest napisany w JavaScript i działa z Node w celu identyfikacji elementów internetowych w aplikacjach AngularJS, a także używa WebDriver do kontrolowania przeglądarki za pomocą działań użytkownika.

Ok, dobrze, teraz omówmy, czym dokładnie jest aplikacja AngularJS?

Aplikacje AngularJS to aplikacje internetowe, które używają rozszerzonej składni HTML do wyrażania składników aplikacji internetowych. Jest używany głównie w dynamicznych aplikacjach internetowych. Te aplikacje używają mniej elastycznego kodu w porównaniu ze zwykłymi aplikacjami internetowymi.

Dlaczego nie możemy znaleźć elementów sieciowych Angular JS przy użyciu sterownika Normal Selenium Web?

Angularowe aplikacje JS mają dodatkowe atrybuty HTML, takie jak ng-repeater, ng-controller, ng-model…, itp., Które nie są zawarte w lokalizatorach Selenium. Selenium nie jest w stanie zidentyfikować tych elementów sieci za pomocą kodu Selenium. Tak więc Protractor na szczycie Selenium może obsługiwać i kontrolować te atrybuty w aplikacjach internetowych.

Kątomierz to kompleksowe środowisko testowe dla aplikacji opartych 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 faktycznej funkcjonalności aplikacji.

Zanim zaczniemy Kątomierz, musimy zainstalować:

  1. Selen

    Kroki instalacji Selenium można znaleźć pod następującymi linkami (https://www.guru99.com/installing-selenium-webdriver.html)

  2. NPM (Node.js)

    Instalacja NodeJS, musimy zainstalować NodeJS, aby zainstalować Protractor. Możesz znaleźć te kroki instalacji 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 klienta.

Krok 2) Sprawdź instalację i wersję za pomocą „ Protractor --version ”. Jeśli się powiedzie, pokaże 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 sieci Web. Menedżer sterowników sieciowych służy do uruchamiania testów z kątową aplikacją internetową w określonej przeglądarce. Po zainstalowaniu Protractor należy zaktualizować menedżera sterowników sieciowych do najnowszej wersji. Można to zrobić, uruchamiając następujące polecenie w wierszu polecenia.

webdriver-manager update

Krok 4) Uruchom menedżera sterowników sieciowych. Ten krok uruchomi menedżera sterowników sieciowych w tle i nasłuchuje wszystkich testów, które są uruchamiane przez kątomierz.

Gdy Protractor zostanie użyty 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 wiersza polecenia.

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 sieci Web działającego w tle.

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

Protractor potrzebuje dwóch plików do uruchomienia, pliku specyfikacji i pliku konfiguracyjnego .

  1. Plik konfiguracyjny : ten plik pomaga kątomierzowi w określeniu miejsca umieszczenia plików testowych (specs.js) i rozmowie z serwerem Selenium (adres Selenium). Chrome to domyślna przeglądarka dla Protractor.
  1. Plik specyfikacji: ten plik zawiera logikę i lokalizatory do interakcji z aplikacją .

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

Krok 2) Na tym etapie

  1. Wpisano nazwę „Guru99”
  2. W wynikowym tekście widać „Hello Guru99”.

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

Kod:

Musimy przygotować plik konfiguracyjny (conf.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 specyfikacji js:

  1. opisać ('Wpisz nazwę GURU99', funkcja ()

    Składnia opisu pochodzi z frameworka Jasmine. Tutaj „opisz” („Wprowadź nazwę GURU99”) zazwyczaj definiuje komponenty aplikacji, które mogą być klasą lub funkcją itp. W zestawie kodów o nazwie „Wprowadź GURU99” jest to tylko ciąg znaków, a nie kod.

  2. it ('należy dodać nazwę jako GURU99', function ()
  3. browser.get („https://angularjs.org”)

    Podobnie jak w Selenium Webdriver browser.get otworzy nową instancję przeglądarki ze wspomnianym adresem URL.

  4. element (wg.model ('twojaNazwa')). sendKeys ('GURU99')

    W tym miejscu znajdujemy element sieci Web używający nazwy modelu jako „yourName”, co jest wartością „ng-model” na stronie internetowej. Sprawdź zrzut ekranu poniżej-

  1. 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 przechowujemy jego wartość w zmiennej „guru” .

  2. oczekiwać (guru.getText ()). toEqual ('Witaj GURU99!')

    Na koniec weryfikujemy tekst, który otrzymaliśmy ze strony (za pomocą funkcji gettext ()) z oczekiwanym tekstem.

Logika conf.js:

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

Kod Objaśnienie conf.js

  1. seleniumAddress: „http: // localhost: 4444 / wd / hub”

    Plik konfiguracyjny informuje Protractor o lokalizacji Selenium Address do rozmowy z Selenium WebDriver.

  2. specyfikacje: ['spec.js']

    Ta linia informuje Protractor o lokalizacji plików testowych spec.js

Wykonanie Kodeksu

Oto pierwsze, będziemy zmienić ścieżkę lub przejdź do folderu, w którym confi.js i spec.js są umieszczone w naszym systemie .

Wykonaj następujący krok.

Krok 1) Otwórz wiersz polecenia.

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

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

Krok 3) Otwórz nowy wiersz polecenia i wprowadź polecenie jako „kątomierz conf.js”, aby uruchomić plik konfiguracyjny.

Wyjaśnienie:

  • Tutaj Protractor wykona plik konfiguracyjny z podanym plikiem specyfikacji.
  • Widzimy serwer selenium działający pod adresem „ http: // localhost: 4444 / wd / hub ”, który podaliśmy w pliku conf.js.
  • Tutaj również możesz zobaczyć wynik, ile z nich zostało zaliczonych i niepowodzenia, jak na powyższym zrzucie ekranu .

Dobrze, zweryfikowaliśmy wynik, gdy został pozytywny lub zgodnie z oczekiwaniami. Przyjrzyjmy się teraz również wynikowi niepowodzenia.

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

Po zmianie specyfikacji 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:

Widzimy, że wynik nie powiódł się, oznaczony jako „F” na zrzucie ekranu z przyczyną „Oczekiwano 'Hello GURU99!' jest równe „Hello change GURU99!”. Pokazuje również, ile błędów napotkano podczas wykonywania kodu.

Czy możemy osiągnąć to samo ze sterownikiem sieciowym Selenium?

Czasami możemy zidentyfikować elementy sieciowe aplikacji AngularJS za pomocą XPath lub selektora CSS ze sterownika sieciowego Selenium. Ale w aplikacjach AngularJS elementy będą generowane i zmieniane dynamicznie. Zatem Protractor jest lepszą praktyką do pracy z aplikacjami AngularJS.

Generuj raporty za pomocą Jasmine Reporters

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

Wykonaj poniższe czynności, aby wygenerować raporty w formacie XML.

Instalacja Jasmine Reporter

Możesz to zrobić na dwa sposoby, lokalnie lub globalnie

  1. Otwórz wiersz polecenia, 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ń.

  1. Otwórz wiersz polecenia, wykonaj następujące polecenie w przypadku instalacji globalnej
npm install -g jasmine-reporters@^2.0.0

W tym samouczku zainstalujemy lokalnie reporterzy jaśminu .

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 . "Node_modules" powinno być dostępne, jeśli zostało 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 „ JUnitXmlReporter ” i podajemy ścieżkę do miejsca przechowywania raportu.

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

Krok 5) Po wykonaniu powyższego kodu, plik junitresults.xml zostanie wygenerowany we wspomnianej ścieżce.

Krok 6) Otwórz XML i sprawdź wynik. Komunikat o błędzie jest wyświetlany w pliku wyników, ponieważ nasz przypadek testowy nie powiódł się. Przypadek testowy nie powiódł się, ponieważ oczekiwany wynik z pliku „spec.js” nie jest dopasowany do rzeczywistego wyniku ze strony internetowej

Krok 7) Użyj pliku junitresult.xml dla dowodów lub plików wynikowych.

Podsumowanie:

Chociaż Selen może zrobić niektóre rzeczy, które robi kątomierz, kątomierz jest standardem przemysłowym i najlepszą praktyką do testowania aplikacji AngularJS. Protractor może również zarządzać wieloma możliwościami w nim i obsługiwać dynamiczne zmiany elementów sieci za pomocą ng-model, ng-click…, itd… (czego selen nie może zrobić).

Ten artykuł jest autorstwa Ranjitha Kumara Enishetti