ProtracTutoriál pro testování Tor: Rámec automatizačních nástrojů

Proč potřebujeme profesionálytracFramework Tor?

JavaSkript se používá téměř ve všech webových aplikacích. Jak aplikace rostou, JavaScénář také se zvětšuje velikost a složitost. V takovém případě se pro testery stává obtížným úkolem otestovat webovou aplikaci pro různé scénáře.

Někdy je obtížné zachytit webové prvky v aplikacích AngularJS pomocí JUnit or Selenium WebDriver.

ProtracTor je program napsaný v NodeJS. JavaSkript a běží s Node k identifikaci webových prvků v aplikacích AngularJS a také používá WebDriver k ovládání prohlížeče pomocí uživatelských akcí.

Dobře, teď pojďme diskutovat o tom, co přesně je aplikace AngularJS?

Aplikace AngularJS jsou webové aplikace, které používají rozšířenou syntaxi HTML k vyjádření komponent webových aplikací. Používá se především pro dynamické webové aplikace. Tyto aplikace používají méně a flexibilní kód ve srovnání s normálními webovými aplikacemi.

Proč nemůžeme najít webové prvky Angular JS pomocí Normal Selenium Webový ovladač?

Aplikace Angular JS mají některé další atributy HTML, jako je ng-repeater, ng-controller, ng-model.., atd., které nejsou součástí Selenium lokátory. Selenium není schopen identifikovat tyto webové prvky pomocí Selenium kód. Takže, Protractor na vrcholu Selenium dokáže zpracovat a ovládat tyto atributy ve webových aplikacích.

ProfesionáltracTor je end-to-end testovací framework pro aplikace založené na Angular JS. Zatímco většina frameworků se zaměřuje na provádění jednotkových testů pro aplikace Angular JS, Pro...tracTor se zaměřuje na testování skutečné funkčnosti aplikace.

Než začneme s Profesionálytractor, musíme nainstalovat následující:

1. SeleniumNajdete Selenium Postup instalace v následujících odkazech, (https://www.guru99.com/installing-selenium-webdriver.html )
2. Instalace NPM (Node.js) NodeJS, pro instalaci Pro je potřeba nainstalovat NodeJStractor. Postup instalace naleznete na následujícím odkazu. ( https://www.guru99.com/download-install-node-js.html )

ProtracInstalace Toru

Krok 1) Otevřete příkazový řádek a zadejte „npm install –g pro“tractor" a stiskněte klávesu Enter.

Výše uvedený příkaz stáhne potřebné soubory a nainstaluje Pro.tractor na klientském systému.

Krok 2) Zkontrolujte instalaci a verzi pomocí "Protractor –verze. " Pokud bude úspěšný, zobrazí se verze jako na obrázku níže. Pokud ne, proveďte krok 1 znovu.

(Kroky 3 a 4 jsou volitelné, ale doporučené pro lepší praxi)

Krok 3) Aktualizujte správce webových ovladačů. Správce webových ovladačů se používá ke spouštění testů webové aplikace Angular v konkrétním prohlížeči. Po verzi ProtracJe-li nainstalován Tor, je třeba aktualizovat správce webových ovladačů na nejnovější verzi. To lze provést spuštěním následujícího příkazu v příkazovém řádku.

webdriver-manager update

Krok 4) Spusťte správce webových ovladačů. Tento krok spustí správce webových ovladačů na pozadí a bude naslouchat všem testům, které běží přes Pro.tracfotbalová branka.

Kdysi profesionáltracPokud se ke spuštění jakéhokoli testu používá Tor, webový ovladač se automaticky načte a spustí test v příslušném prohlížeči. Chcete-li spustit správce webových ovladačů, je třeba z příkazového řádku spustit následující příkaz.

webdriver-manager start

Pokud nyní přejdete na následující adresu URL (http://localhost:4444/wd/hub/static/resource/hub.html) ve vašem prohlížeči skutečně uvidíte správce webových ovladačů spuštěný na pozadí.

Ukázkové testování aplikace AngularJS pomocí ProtracTor

ProtracTor potřebuje ke spuštění dva soubory, jeden spec souboru a konfigurace soubor.

1. Konfigurační souborTento soubor pomáhá profesionálůmtractor, kde jsou umístěny testovací soubory (specs.js) a s nimiž lze komunikovat Selenium server (Selenium Adresa). Chrome je výchozí prohlížeč pro verzi Protracfotbalová branka.

2. Spec soubor: Tento soubor obsahuje logiku a lokátory pro interakci s aplikací.

Krok 1) Musíme se přihlásit https://angularjs.org a zadejte text jako „GURU99“ do textového pole „Sem zadejte jméno“.

Krok 2) V tomto kroku,

1. Zadáno jméno „Guru99 "
2. Ve výstupním textu „Ahoj“ GuruJe vidět 99″.

Krok 3) Nyní musíme zachytit text z webové stránky po zadání názvu a musíme jej ověřit s očekávaným textem.

Code:

Musíme připravit konfigurační soubor (conf.js) a soubor spec (spec.js) jak je zmíněno výše.

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 Vysvětlení souboru spec.js:

1. popsat('Enter GURU99 Name', function()Syntaxe description pochází z frameworku Jasmine. Zde „describe“ ('Enter GURU99 Name') typicky definuje komponenty aplikace, což může být třída nebo funkce atd. V kódové sadě s názvem „Enter GURU99“, je to pouze řetězec, nikoli kód.
2. it('má přidat název jako GURU99', function()
3. browser.get('https://angularjs.org')Jako v Selenium Webdriver browser.get otevře novou instanci prohlížeče se zmíněnou URL.
4. prvek(by.model('vašeJméno')).poslat klíče('GURU99') Zde nacházíme webový prvek pomocí názvu modelu jako „vašeJméno“, což je hodnota „ng-model“ na webové stránce. Podívejte se na snímek obrazovky níže -

5. var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1')) Zde najdeme webový prvek pomocí XPath a uložit jeho hodnotu do proměnné „guru“.
6. očekávat(guru.getText()).toEqual('Ahoj GURU99!') Nakonec ověřujeme text, který jsme získali z webové stránky (pomocí gettext() ) s očekávaným textem.

Logika conf.js:

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

Code Vysvětlení conf.js

1. seleniumAddress: 'http://localhost:4444/wd/hub'Konfigurační soubor informuje Protracpro umístění Selenium Adresa, se kterou chcete mluvit Selenium WebDriver.
2. specifikace: ['spec.js']Tento řádek říká Protracpro umístění testovacích souborů spec.js

Provedení Code

Zde nejprve změníme cestu k adresáři nebo přejdeme do složky, kde jsou v našem systému umístěny confi.js a spec.js.

Postupujte podle následujícího kroku.

Krok 1) Otevřete příkazový řádek.

Krok 2) Ujistěte se, že je spuštěn správce webových ovladačů selenu. Za tímto účelem zadejte příkaz jako „webdriver-manager start“ a stiskněte Enter.

(Pokud není ovladač Selenium Web spuštěný, nemůžeme pokračovat v testu jako Pro)tracTor nemůže najít webový ovladač pro správu webové aplikace)

Krok 3) Otevřete nový příkazový řádek a zadejte příkaz jako „profesionál“tractor conf.js ke spuštění konfiguračního souboru.

Vysvětlení:

• Zde ProtracTor spustí konfigurační soubor, který obsahuje daný soubor se specifikací.
• Můžeme vidět selenový server běžící na „http://localhost:4444/wd/hub” který jsme uvedli v souboru conf.js.
• Zde je také vidět výsledek, kolik prošlo a selhání jako na výše uvedeném snímku obrazovky.

Fajn, ověřili jsme výsledek, když prošel nebo podle očekávání. Nyní se podíváme také na výsledek selhání.

Krok 1) Otevřete a očekávejte, že změna povede ke spec.js na „'Hello change GURU99“ jako níže.

Po změně ve 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) Uložte soubor spec.js a opakujte výše uvedené kroky z části „Spuštění Code”

Nyní proveďte výše uvedené kroky.

Výsledek:

Výsledek vidíme jako neúspěšný označený „F“ na snímku obrazovky s důvodem jako "Očekávané "Ahoj GURU99!" rovná se 'Hello change GURU99!'. Také ukazuje, kolik selhání bylo zjištěno při provádění kódu.

Můžeme dosáhnout stejného s Selenium webový ovladač?

Někdy můžeme identifikovat webové prvky aplikací AngularJS pomocí XPath nebo CSS selector from Selenium webový ovladač. Ale v aplikacích AngularJS budou prvky generovány a měněny dynamicky. Takže ProtracTor je lepší postup pro práci s aplikacemi AngularJS.

Generujte zprávy pomocí Jasmine Reporters

ProtracTor podporuje Jasmine Reporters pro generování testovacích reportů. V této části použijeme JunitXMLReporter k automatickému generování reportů o provedení testů ve formátu XML.

Chcete-li generovat zprávy ve formátu XML, postupujte podle následujících kroků.

Instalace Jasmine Reporter

Existují dva způsoby, jak to udělat, lokálně nebo globálně

1. Otevřete příkazový řádek a spusťte následující příkaz pro místní instalaci

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

Výše uvedený příkaz nainstaluje jasmine reporty node-modules lokálně znamená z adresáře, kde spouštíme příkaz v příkazovém řádku.

2. Otevřete příkazový řádek spusťte následující příkaz pro globální instalaci

npm install –g jasmine-reporters@^2.0.0

V tomto tutoriálu nainstalujeme reportéry jasmine lokálně.

Krok 1) Proveďte příkaz.

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

z příkazového řádku, jak je uvedeno níže.

Krok 2) Zkontrolujte instalační složky v adresáři. „Node_modules“ by měl být dostupný, pokud je úspěšně nainstalován, jako na níže uvedeném snímku.

Krok 3) Přidejte následující barevný kód do existujícího souboru 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)
          );
     }
   };

Vysvětlení kódu:

V kódu generujeme sestavu „JUnitXmlReporter“ a zadáním cesty, kam se má zpráva uložit.

Krok 4) Otevřete příkazový řádek a spusťte příkaz Protractor conf.js.

Krok 5) Když spustíte výše uvedený kód, ve zmíněné cestě se vygeneruje junitresults.xml.

Krok 6) Otevřete XML a ověřte výsledek. Zpráva o selhání se ve výsledném souboru zobrazí jako naše Testovací případ selhal. Testovací případ selhal, protože očekávaný výsledek z „spec.js“ neodpovídá skutečnému výsledku z webové stránky

Krok 7) Pro důkazy nebo soubory výsledků použijte soubor junitresult.xml.

Shrnutí

Ačkoli Selenium může dělat některé věci, které profesionáltracTor dělá, profesionáltracTor je průmyslový standard a osvědčený postup pro testování aplikací AngularJS. Profesionál.tracTor dokáže také spravovat více funkcí a zpracovávat dynamické změny webových prvků pomocí ng-model, ng-click.. atd.. (Což selen neumí).