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

⚠️ Oznámení o ukončení podpory: Protractor je zastaralé a archivovanéPodpora skončila v srpnu 2023 a Angular CLI zrušilo svou verzi Pro.tracTvůrce Tor po Angularu 15. Pick Dramatik, Cypress, WebdriverIO nebo TestCafe pro nové end-to-end testováníNíže uvedený návod platí i pro starší sady.

Proč potřebujeme profesionálytracFramework Tor?

JavaSkript se používá téměř ve všech webových aplikacích. S růstem aplikací, JavaScénář také se zvětšuje co do velikosti a složitosti. V takovém případě se pro testery stává obtížným úkolem testovat webovou aplikaci v různých scénářích.

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

ProtracTor je program napsaný v Node.js. 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í.

Co je tedy přesně aplikace AngularJS?

AngularJS Aplikace jsou webové aplikace, které používají rozšířenou syntaxi HTML k vyjádření webových komponent. Používá se hlavně pro dynamické webové aplikace. Tyto aplikace používají méně kódu a jsou flexibilnější ve srovnání s běžnými webovými aplikacemi. Upozorňujeme, že AngularJS 1.x ukončil dlouhodobou podporu k 31. prosinci 2021, takže tyto aplikace jsou dnes již starší.

Proč nemůžeme najít webové elementy AngularJS pomocí Normal? Selenium WebDriver?

Aplikace AngularJS mají některé další atributy HTML, jako například ng-repeater, ng-controller, ng-model atd., které nejsou zahrnuty v Selenium lokátory. Selenium není schopen identifikovat tyto webové prvky pomocí Selenium kód. Takže, Protractor na vrcholu Selenium dokáže tyto atributy zpracovávat a řídit ve webových aplikacích.

ProtracTor je end-to-end testovací framework pro aplikace založené na AngularJS. Zatímco většina frameworků se zaměřuje na provádění jednotkové testy pro aplikace AngularJS, ProtracTor se zaměřuje na testování skutečné funkčnosti aplikace.

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

1. Selenium: můžete najít Selenium kroky instalace v Selenium Průvodce instalací WebDriveru.
2. NPM (Node.js): Pro instalaci Pro musíme nainstalovat Node.jstractor. Tyto instalační kroky naleznete v Průvodce stažením a instalací Node.js.

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, jak je znázorněno níže.

Krok 2) Zkontrolujte instalaci a verzi pomocí „profesionál“tractor –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 WebDriver. Správce WebDriver 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 WebDriver 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

Binární soubory ovladače se stáhnou, jak je znázorněno níže.

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

Jakmile se test spustí, WebDriver jej automaticky načte do příslušného prohlížeče. Spusťte správce pomocí níže uvedeného příkazu.

webdriver-manager start

Konzole hlásí naslouchací adresu.

Nyní, pokud přejdete na následující URL (http://localhost:4444/wd/hub/static/resource/hub.html) ve vašem prohlížeči uvidíte správce WebDriverů spuštěný na pozadí.

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

Se spuštěným správcem ovladačů, 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 otevřít 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('Zadejte jméno GURU99', function() Syntaxe funkce describe je z Jasmínový rámecZde „describe“ ('Enter GURU99 Name') obvykle definuje komponenty aplikace, což může být třída nebo funkce atd. V sadě kódu s názvem „Enter GURU99“ se jedná pouze o řetězec, nikoli o 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 s uvedeným URL.
4. prvek(by.model('vašeJméno')).poslat klíče(„GURU99“) Zde hledáme webový element s použitím názvu modelu jako „yourName“, 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

Nejprve přejděte do složky, kde se nacházejí soubory conf.js a spec.js, a poté postupujte podle následujících kroků..

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

Krok 2) Ujistit se Selenium Správce WebDriverů je spuštěný. Zadejte příkaz „webdriver-manager start“ a stiskněte Enter..

(Li Selenium WebDriver není spuštěný, nemůžeme pokračovat v testování jako Pro.trac(tor nemůže najít webový ovladač pro zpracování webové aplikace)

Krok 3) Otevřete nový příkazový řádek a zadejte příkaz jako „profesionál“tractor conf.js spustit konfigurační soubor. Spuštění dokončí postup, jak je znázorněno níže.

Vysvětlení:

• Zde ProtracTor spustí konfigurační soubor, který obsahuje daný soubor se specifikací.
• Můžeme vidět Selenium server běžící na adrese „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.

Úspěšný výsledek byl ověřen. Dále se podívejte na neúspěšný výsledek.

Krok 1) Otevřete a změňte soubor spec.js na „'Hello change GURU99“, jak je uvedeno 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 chyb se vyskytlo při provádění kódu.

Můžeme dosáhnout stejného s Selenium WebDriver?

Někdy lze elementy AngularJS najít pomocí selektorů XPath nebo CSS z Selenium WebDriver. Tyto prvky se však generují a znovu načítají dynamicky, takže ProtracTor byl bezpečnější volbou pro sady AngularJS.

Generujte zprávy pomocí Jasmine Reporters

ProtracTor podporuje reportéry Jasmine. Tato sekce používá JUnitXmlReporter pro automatické generování zpráv o provedení testů ve formátu XML podle níže uvedených kroků.

Instalace Jasmine Reporter

Existují dvě možnosti, 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-reporters lokálně, do adresáře, kde je spuštěn.

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

Zde jsou reportéry instalovány 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 selhalo. Testovací případ selhal, protože očekávaný výsledek ze „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.

ProtracAlternativy k Tor vs. Moderní automatizaci testování

Od ProfesionálůtracProtože Tor již nedostává aktualizace, týmy plánující nové sady potřebují vědět, jak si vede v porovnání s frameworky, na které nyní migrují projekty Angularu. Níže uvedená tabulka porovnává Pro.tractor se třemi alternativami, které se nejčastěji objevují v níže uvedených častých dotazech.

Týmy se stávajícím profesionálemtracsady Tor se obecně nejrychleji přesouvají do WebdriverIO, protože jeho styl příkazů a Seleniumspráva ovladačů založená na technologii zůstává blízká tomu, co ProtracTesteři Toru to už vědí. Týmy, které začínají znovu nebo potřebují co nejrychlejší testovací běhy, si častěji vybírají Cypress nebo místo toho Dramatik.

Nejčastější dotazy