Výukový program pro testování úhloměru: Rámec nástrojů pro automatizaci

Proč potřebujeme rámec pro úhloměr?

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 NodeJS, který je napsán v 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, úhloměr nahoře Selenium dokáže zpracovat a ovládat tyto atributy ve webových aplikacích.

Úhloměr je komplexní testovací rámec 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, Protractor se zaměřuje na testování skutečné funkčnosti aplikace.

Než spustíme Protractor, 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, k instalaci Protractor potřebujeme nainstalovat NodeJS. Tento postup instalace naleznete v následujícím odkazu. ( https://www.guru99.com/download-install-node-js.html )

Instalace úhloměru

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

Výše uvedený příkaz stáhne potřebné soubory a nainstaluje Protractor do klientského systému.

Krok 2) Zkontrolujte instalaci a verzi pomocí "Úhloměr – 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á pro spouštění testů proti úhlové webové aplikaci v konkrétním prohlížeči. Po instalaci Úhloměru 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 poslouchat všechny testy, které běží přes úhloměr.

Jakmile je Protractor použit ke spuštění jakéhokoli testu, 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 provést 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í aplikací AngularJS pomocí Protractor

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

1. Konfigurační soubor: Tento soubor pomáhá úhloměru tam, kde jsou umístěny testovací soubory (specs.js) a mluvit s nimi Selenium server (Selenium Adresa). Chrome je výchozí prohlížeč pro Protractor.

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 je vidět „Ahoj Guru99“.

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.

Kód:

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!');
  });
});

Vysvětlení kódu 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']
};

Vysvětlení kódu pro conf.js

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

Provádění kodexu

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 webový ovladač selenu není spuštěn a neběží, nemůžeme pokračovat v testu, protože Protractor nemůže najít webový ovladač pro práci s webovou aplikací)

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

Vysvětlení:

• Zde Protractor spustí konfigurační soubor s daným spec souborem v něm.
• 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 v části „Spuštění kódu“.

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ší praxe pro práci s aplikacemi AngularJS.

Generujte zprávy pomocí Jasmine Reporters

Protractor podporuje reportéry Jasmine při generování testovacích zpráv. V této části použijeme JunitXMLReporter k automatickému generování zpráv o provedení testu 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 úhloměr 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é z věcí, které dělá úhloměr, je úhloměr průmyslovým standardem a osvědčeným postupem pro testování aplikací AngularJS. Úhloměr v něm může také spravovat více funkcí a zvládat dynamické změny prvků webu pomocí ng-model, ng-click.. atd.. (Což selen neumí).