Protractor - Protractor and Selenium Server

Jak wspomniano wcześniej, Protractor to kompleksowe środowisko testowe typu open source dla aplikacji Angular i AngularJS. Jest to program Node.js. Z drugiej strony Selenium to platforma automatyzacji przeglądarki, która obejmuje Selenium Server, interfejsy API WebDriver i sterowniki przeglądarki WebDriver.

Kątomierz z selenem

Jeśli mówimy o połączeniu Protractor i Selenium, Protractor może współpracować z serwerem Selenium, aby zapewnić zautomatyzowaną infrastrukturę testową. Infrastruktura może symulować interakcję użytkownika z aplikacją kątową działającą w przeglądarce lub na urządzeniu mobilnym. Połączenie Protractor i Selenium można podzielić na trzy partycje, a mianowicie test, serwer i przeglądarkę, jak pokazano na poniższym diagramie -

Procesy Selenium WebDriver

Jak widzieliśmy na powyższym diagramie, test przy użyciu Selenium WebDriver obejmuje następujące trzy procesy -

Skrypty testowe
Serwer
Przeglądarka

W tej sekcji omówimy komunikację między tymi trzema procesami.

Komunikacja między skryptami testowymi a serwerem

Komunikacja pomiędzy dwoma pierwszymi procesami - skryptami testowymi a serwerem zależy od działania Selenium Server. Innymi słowy, możemy powiedzieć, że sposób działania serwera Selenium nada kształt procesowi komunikacji między skryptami testowymi a serwerem.

Serwer Selenium może działać lokalnie na naszej maszynie jako samodzielny serwer Selenium (selenium-server-standalone.jar) lub może działać zdalnie za pośrednictwem usługi (Sauce Labs). W przypadku samodzielnego serwera Selenium byłaby komunikacja http między Node.js a serwerem Selenium.

Komunikacja między serwerem a przeglądarką

Jak wiemy, serwer jest odpowiedzialny za przekazywanie poleceń do przeglądarki po ich zinterpretowaniu ze skryptów testowych. Dlatego serwer i przeglądarka również wymagają medium komunikacyjnego i tutaj komunikacja odbywa się za pomocąJSON WebDriver Wire Protocol. Przeglądarka rozszerzona o sterownik przeglądarki, który służy do interpretowania poleceń.

Powyższą koncepcję dotyczącą procesów Selenium WebDriver i ich komunikacji można zrozumieć za pomocą poniższego diagramu -

Podczas pracy z Protractorem pierwszy proces, czyli skrypt testowy, jest uruchamiany za pomocą Node.js, ale przed wykonaniem jakiejkolwiek akcji w przeglądarce wyśle dodatkowe polecenie, aby upewnić się, że testowana aplikacja jest ustabilizowana.

Konfigurowanie serwera Selenium

Serwer Selenium działa jak serwer proxy pomiędzy naszym skryptem testowym a sterownikiem przeglądarki. Zasadniczo przekazuje polecenie z naszego skryptu testowego do WebDriver i zwraca odpowiedzi z WebDriver do naszego skryptu testowego. Istnieją następujące opcje konfiguracji serwera Selenium, które są zawarte wconf.js plik skryptu testowego -

Samodzielny serwer Selenium

Jeśli chcemy uruchomić serwer na naszej lokalnej maszynie, musimy zainstalować samodzielny serwer selenium. Warunkiem koniecznym do zainstalowania samodzielnego serwera selenium jest JDK (Java Development Kit). Musimy mieć JDK zainstalowany na naszej lokalnej maszynie. Możemy to sprawdzić, uruchamiając następujące polecenie z wiersza poleceń -

java -version

Teraz mamy możliwość zainstalowania i uruchomienia Selenium Server ręcznie lub ze skryptu testowego.

Ręczne instalowanie i uruchamianie serwera Selenium

Aby ręcznie zainstalować i uruchomić serwer Selenium, musimy użyć narzędzia wiersza poleceń WebDriver-Manager, które jest dostarczane z Protractor. Kroki instalacji i uruchomienia serwera Selenium są następujące -

Step 1- Pierwszym krokiem jest instalacja serwera Selenium i ChromeDriver. Można to zrobić za pomocą polecenia -

webdriver-manager update

Step 2- Następnie musimy uruchomić serwer. Można to zrobić za pomocą polecenia -

webdriver-manager start

Step 3- W końcu musimy ustawić seleniumAddress w pliku konfiguracyjnym na adres działającego serwera. Domyślny adres tohttp://localhost:4444/wd/hub.

Uruchamianie serwera Selenium ze skryptu testowego

Aby uruchomić serwer Selenium ze skryptu testowego, musimy ustawić następujące opcje w naszym pliku konfiguracyjnym -

Location of jar file - Musimy ustawić lokalizację pliku jar dla samodzielnego serwera Selenium w pliku konfiguracyjnym, ustawiając seleniumServerJar.
Specifying the port- Musimy również określić port, który ma być używany do uruchomienia samodzielnego serwera Selenium. Można to określić w pliku konfiguracyjnym, ustawiając seleniumPort. Domyślny port to 4444.
Array of command line options- Musimy również ustawić tablicę opcji wiersza poleceń, które mają być przekazywane do serwera. Można to określić w pliku konfiguracyjnym, ustawiając seleniumArgs. Jeśli potrzebujesz pełnej listy poleceń, uruchom serwer z rozszerzeniem-help flaga.

Praca ze zdalnym serwerem Selenium

Inną opcją uruchomienia naszego testu jest zdalne użycie serwera Selenium. Warunkiem wstępnym zdalnego korzystania z serwera jest posiadanie konta w usłudze, która obsługuje serwer. Współpracując z Protractorem mamy wbudowaną obsługę następujących usług hostujących serwer -

TestObject

Aby używać TestObject jako zdalnego serwera Selenium, musimy ustawić testobjectUser, nazwę użytkownika naszego konta TestObject i testobjectKey, klucz API naszego konta TestObject.

BrowserStack

Aby używać BrowserStack jako zdalnego serwera Selenium, musimy ustawić browserstackUser, nazwę użytkownika naszego konta BrowserStack i browserstackKey, klucz API naszego konta BrowserStack.

Sauce Labs

Aby używać Sauce Labs jako zdalnego serwera Selenium, musimy ustawić sauceUser, nazwę użytkownika naszego konta Sauce Labs i SauceKey, klucz API naszego konta Sauce Labs.

Kobiton

Aby używać Kobiton jako zdalnego serwera Selenium, musimy ustawić kobitonUser, nazwę użytkownika naszego konta Kobiton i kobitonKey, klucz API naszego konta Kobiton.

Bezpośrednie połączenie ze sterownikiem przeglądarki bez korzystania z serwera Selenium

Kolejną opcją uruchomienia naszego testu jest bezpośrednie połączenie ze sterownikiem przeglądarki bez korzystania z serwera Selenium. Protractor może testować bezpośrednio, bez użycia Selenium Server, przeciwko Chrome i Firefox, ustawiając directConnect: true w pliku konfiguracyjnym.

Konfigurowanie przeglądarki

Przed skonfigurowaniem i skonfigurowaniem przeglądarki musimy wiedzieć, które przeglądarki są obsługiwane przez Protractor. Poniżej znajduje się lista przeglądarek obsługiwanych przez Protractor -

ChromeDriver
FirefoxDriver
SafariDriver
IEDriver
Appium-iOS/Safari
Appium-Android/Chrome
Selendroid
PhantomJS

Aby ustawić i skonfigurować przeglądarkę, musimy przejść do pliku konfiguracyjnego Protractor, ponieważ konfiguracja przeglądarki odbywa się w ramach obiektu możliwości pliku konfiguracyjnego.

Konfiguruję Chrome

Aby skonfigurować przeglądarkę Chrome, musimy ustawić obiekt możliwości w następujący sposób

capabilities: {
   'browserName': 'chrome'
}

Możemy również dodać opcje specyficzne dla Chrome, które są zagnieżdżone w chromeOptions, a ich pełną listę można zobaczyć pod adresem https://sites.google.com/a/chromium.org/chromedriver/capabilities.

Na przykład, jeśli chcesz dodać licznik FPS w prawym górnym rogu, możesz to zrobić w następujący sposób w pliku konfiguracyjnym -

capabilities: {
   'browserName': 'chrome',
   'chromeOptions': {
      'args': ['show-fps-counter=true']
   }
},

Konfigurowanie Firefoksa

Aby skonfigurować przeglądarkę Firefox, musimy ustawić obiekt możliwości w następujący sposób -

capabilities: {
   'browserName': 'firefox'
}

Możemy również dodać opcje specyficzne dla Firefoksa, które są zagnieżdżone w obiekcie moz: firefoxOptions, a ich pełną listę można zobaczyć pod adresem https://github.com/mozilla/geckodriver#firefox-capabilities.

Na przykład, jeśli chcesz uruchomić swój test w przeglądarce Firefox w trybie awaryjnym, możesz to zrobić w następujący sposób w pliku konfiguracyjnym -

capabilities: {
   'browserName': 'firefox',
   'moz:firefoxOptions': {
     'args': ['—safe-mode']
   }
},

Konfiguruję inną przeglądarkę

Aby skonfigurować inną przeglądarkę niż Chrome lub Firefox, musimy zainstalować osobny plik binarny z https://docs.seleniumhq.org/download/.

Konfigurowanie PhantonJS

W rzeczywistości PhantomJS nie jest już obsługiwany z powodu problemów z awariami. Zamiast tego zaleca się używanie bezgłowego Chrome lub bezgłowego Firefoksa. Można je skonfigurować w następujący sposób -

Aby skonfigurować przeglądarkę bezgłową, musimy uruchomić Chrome z flagą bezgłową w następujący sposób -

capabilities: {
   'browserName': 'chrome',
   'chromeOptions': {
      'args': [“--headless”, “--disable-gpu”, “--window-size=800,600”]
   }
},

Aby skonfigurować przeglądarkę bezgłową, musimy uruchomić przeglądarkę Firefox z rozszerzeniem –headless flaga w następujący sposób -

capabilities: {
   'browserName': 'firefox',
   'moz:firefoxOptions': {
      'args': [“--headless”]
   }
},

Konfigurowanie wielu przeglądarek do testów

Możemy również testować na wielu przeglądarkach. W tym celu musimy użyć opcji konfiguracji multiCapabilities w następujący sposób -

multiCapabilities: [{
   'browserName': 'chrome'
},{
   'browserName': 'firefox'
}]

Które ramy?

Dwie platformy testowe BDD (rozwój oparty na zachowaniu), Jasmine i Mocha, są obsługiwane przez Protractor. Obie frameworki są oparte na JavaScript i Node.js. Te frameworki zapewniają składnię, raport i tworzenie szkieletów wymagane do pisania testów i zarządzania nimi.

Następnie zobaczymy, jak możemy zainstalować różne frameworki -

Ramy Jasmine

Jest to domyślna platforma testowa dla Protractor. Kiedy zainstalujesz Protractor, otrzymasz z nim wersję Jasmine 2.x. Nie musimy go instalować osobno.

Ramy mokka

Mocha to kolejna platforma testowa JavaScript działająca głównie na Node.js. Aby używać Mocha jako naszego frameworka testowego, musimy użyć interfejsu BDD (programowanie oparte na zachowaniu) i asercji Chai z Chai As Promised. Instalację można przeprowadzić za pomocą następujących poleceń -

npm install -g mocha
npm install chai
npm install chai-as-promised

Jak widać, opcja -g jest używana podczas instalacji mokki, dzieje się tak dlatego, że zainstalowaliśmy Protractor globalnie, używając opcji -g. Po zainstalowaniu musimy wymagać i skonfigurować Chai w naszych plikach testowych. Można to zrobić w następujący sposób -

var chai = require('chai');
var chaiAsPromised = require('chai-as-promised');
chai.use(chaiAsPromised);
var expect = chai.expect;

Następnie możemy używać Chai zgodnie z obietnicą -

expect(myElement.getText()).to.eventually.equal('some text');

Teraz musimy ustawić właściwość frameworka na mocha pliku konfiguracyjnego, dodając framework: „mocha”. Opcje takie jak „reporter” i „slow” dla mokki można dodać w pliku konfiguracyjnym w następujący sposób -

mochaOpts: {
   reporter: "spec", slow: 3000
}

Cucumber Framework

Aby używać Cucumber jako naszego środowiska testowego, musimy zintegrować go z opcją Protractor z frameworkiem custom. Instalację można przeprowadzić za pomocą następujących poleceń

npm install -g cucumber
npm install --save-dev protractor-cucumber-framework

Jak widać, opcja -g jest używana podczas instalacji Cucumber, dzieje się tak dlatego, że zainstalowaliśmy Kątomierz globalnie, tj. Z opcją -g. Następnie musimy ustawić właściwość frameworka nacustom pliku konfiguracyjnego, dodając framework: „custom” i frameworkPath: „Protractor-cucumber-framework” do pliku konfiguracyjnego o nazwie cucumberConf.js.

Przykładowy kod pokazany poniżej to podstawowy plik cucumberConf.js, którego można użyć do uruchamiania plików funkcji ogórka za pomocą Protractor -

exports.config = {
   seleniumAddress: 'http://localhost:4444/wd/hub',

   baseUrl: 'https://angularjs.org/',

   capabilities: {
      browserName:'Firefox'
   },

   framework: 'custom',

   frameworkPath: require.resolve('protractor-cucumber-framework'),

   specs: [
      './cucumber/*.feature'
   ],

   // cucumber command line options
   cucumberOpts: {
      require: ['./cucumber/*.js'],
      tags: [],
      strict: true,
      format: ["pretty"],
      'dry-run': false,
      compiler: []
   },
   onPrepare: function () {
      browser.manage().window().maximize();
   }
};