Szögmérő tesztelési oktatóanyag: Automation Tool Framework

Miért van szükségünk szögmérő keretrendszerre?

JavaA szkriptet szinte minden webalkalmazásban használják. Ahogy nőnek az alkalmazások, JavaForgatókönyv méretében és összetettségében is növekszik. Ilyen esetben nehéz feladattá válik a tesztelők számára a webalkalmazás tesztelése különböző forgatókönyvekre.

Néha nehéz rögzíteni a webes elemeket az AngularJS alkalmazásokban JUnit or Selenium WebDriver.

A Protractor egy NodeJS program, amelybe bele van írva JavaScript és fut a Node-dal, hogy azonosítsa a webes elemeket az AngularJS alkalmazásokban, és a WebDriver segítségével vezérli a böngészőt felhasználói műveletekkel.

Rendben, most beszéljük meg, mi is az AngularJS alkalmazás?

Az AngularJS alkalmazások olyan webalkalmazások, amelyek kiterjesztett HTML szintaxist használnak a webalkalmazás-összetevők kifejezésére. Főleg dinamikus webes alkalmazásokhoz használják. Ezek az alkalmazások kevesebb és rugalmas kódot használnak a normál webalkalmazásokhoz képest.

Miért nem találunk Angular JS webelemeket a Normal használatával? Selenium Web driver?

Az Angular JS alkalmazásoknak van néhány extra HTML attribútuma, mint például az ng-repeater, ng-controller, ng-model stb., amelyeket nem tartalmaz Selenium lokátorok. Selenium segítségével nem tudja azonosítani azokat a webes elemeket Selenium kód. Szóval, szögmérő a tetején Selenium képes kezelni és vezérelni ezeket az attribútumokat a webalkalmazásokban.

A szögmérő egy végpontok közötti tesztelési keretrendszer az Angular JS alapú alkalmazásokhoz. Míg a legtöbb keretrendszer az Angular JS-alkalmazások egységtesztjére összpontosít, a Protractor az alkalmazások tényleges működésének tesztelésére összpontosít.

A Protractor elindítása előtt telepítenünk kell a következőket:

1. SeleniumItt található a Selenium A telepítés lépései az alábbi linkeken, (https://www.guru99.com/installing-selenium-webdriver.html )
2. NPM (Node.js)NodeJS telepítés, a Protractor telepítéséhez telepítenünk kell a NodeJS-t. A telepítési lépéseket az alábbi linken találja. ( https://www.guru99.com/download-install-node-js.html )

Szögmérő felszerelése

Step 1) Nyissa meg a parancssort, és írja be „npm install –g szögmérő” és nyomja meg az Enter billentyűt.

A fenti parancs letölti a szükséges fájlokat, és telepíti a Protractort az ügyfélrendszerre.

Step 2) Ellenőrizze a telepítést és a verziót a használatával "Szögmérő – változat. " Ha sikeres, az alábbi képernyőképen látható verziót jeleníti meg. Ha nem, hajtsa végre újra az 1. lépést.

(A 3. és 4. lépés nem kötelező, de a jobb gyakorlat érdekében ajánlott)

Step 3) Frissítse a webillesztőprogram-kezelőt. A web-illesztőprogram-kezelő a tesztek futtatására szolgál a szögletes webalkalmazással szemben egy adott böngészőben. A Protractor telepítése után a webillesztőprogram-kezelőt frissíteni kell a legújabb verzióra. Ezt a következő parancs futtatásával teheti meg a parancssorban.

webdriver-manager update

Step 4) Indítsa el a webillesztőprogram-kezelőt. Ez a lépés a webes illesztőprogram-kezelőt futtatja a háttérben, és meghallgat minden olyan tesztet, amely a szögmérőn keresztül fut.

Miután a Protractort bármilyen teszt futtatására használták, a web-illesztőprogram automatikusan betölti és futtatja a tesztet a megfelelő böngészőben. A webillesztőprogram-kezelő elindításához a következő parancsot kell végrehajtani a parancssorból.

webdriver-manager start

Most, ha a következő URL-re lép (http://localhost:4444/wd/hub/static/resource/hub.html) a böngészőben, valójában a webes illesztőprogram-kezelőt fogja látni a háttérben.

Példa az AngularJS alkalmazás tesztelésére a Protractor használatával

A Protractor futtatásához két fájlra van szüksége, a spec fájlt, és konfigurációs fájlt.

1. Konfigurációs fájl: Ez a fájl segít a szögmérő meghatározásában, hogy hol vannak a tesztfájlok (specs.js), és hogyan beszélhet velük Selenium szerver (Selenium Cím). A Chrome a Protractor alapértelmezett böngészője.

2. Spec fájl: Ez a fájl tartalmazza az alkalmazással való interakcióhoz szükséges logikát és helymeghatározókat.

Step 1) Be kell jelentkeznünk https://angularjs.org és írja be a szöveget „GURU99”-ként az „Írja be ide a nevet” szövegmezőbe.

Step 2) Ebben a lépésben a

1. Beírta a „Guru99” nevet
2. A kimeneti szövegben „Hello Guru99” látható.

Step 3) Most a név megadása után le kell rögzítenünk a szöveget a weboldalról, és ellenőriznünk kell a várt szöveggel.

Kód:

El kell készítenünk a konfigurációs fájlt (conf.js) és spec fájl (spec.js) fent említett.

A spec.js logikája:

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

A spec.js kód magyarázata:

1. leírni('Írja be a GURU99 nevet', function()A leírás szintaxisa a Jasmine keretrendszerből származik. Itt a "describe" ('Írja be a GURU99 nevet') általában egy alkalmazás összetevőit határozza meg, amelyek lehetnek osztályok vagy függvények stb. A kódkészletben „Enter GURU99”-nek hívják, ez csak egy karakterlánc és nem egy kód.
2. it('hozzá kell adni egy nevet GURU99-ként', function()
3. browser.get("https://angularjs.org") Ahogyan itt Selenium A Webdriver browser.get megnyit egy új böngészőpéldányt az említett URL-lel.
4. elem(by.model('yourName')).sendKeys('GURU99') Itt azt a webelemet találjuk, amely a Modell nevét használja „yourName”-ként, ami az „ng-model” értéke a weboldalon. Nézze meg az alábbi képernyőképet -

5. var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1')) Itt találjuk meg a webelemet XPath és tárolja az értékét egy „guru” változóban.
6. vár(guru.getText()).toEqual('Hello GURU99!') Végül ellenőrizzük a weboldalról kapott szöveget (gettext() ) a várt szöveggel.

A conf.js logikája:

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

Kód A conf.js magyarázata

1. seleniumAddress: 'http://localhost:4444/wd/hub'A konfigurációs fájl megmondja a Protractornak a Selenium Cím a beszélgetéshez Selenium WebDriver.
2. spec.js: ['spec.js']Ez a sor jelzi a Protractornak a spec.js tesztfájlok helyét

A kódex végrehajtása

Itt először megváltoztatjuk a könyvtár elérési útját, vagy navigálunk abba a mappába, ahol a confi.js és spec.js a rendszerünkben található..

Kövesse a következő lépést.

Step 1) Nyissa meg a parancssort.

Step 2) Győződjön meg arról, hogy a szelén web-illesztőprogram-kezelő működik és fut. Ehhez adja ki a „webdriver-manager start” parancsot, és nyomja meg az Enter billentyűt.

(Ha a szelén web-illesztőprogram nincs beállítva és fut, nem tudjuk folytatni a tesztet, mivel a Protractor nem találja a webes illesztőprogramot a webalkalmazás kezelésére)

Step 3) Nyisson meg egy új parancssort, és adja ki a parancsot mint „szögmérő conf.js” a konfigurációs fájl futtatásához.

Magyarázat:

• Itt a Protractor végrehajtja a konfigurációs fájlt a megadott specifikációs fájllal.
• Láthatjuk, hogy a szelén szerver a következő helyen futhttp://localhost:4444/wd/hub” amit a conf.js fájlban adtunk meg.
• Ezenkívül itt látható az eredménye, hogy hány sikeres és hibás, mint a fenti képernyőképen.

Rendben, ellenőriztük az eredményt, amikor sikeres volt, vagy a vártnak megfelelően. Most nézzük meg a sikertelen eredményt is.

Step 1) Nyissa meg, és módosítsa a spec.js-t a „Hello change GURU99” értékre, az alábbiak szerint.

A spec.js módosítása után :

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

Step 2) Mentse el a spec.js fájlt, és ismételje meg a „Kód végrehajtása” szakasz fenti lépéseit

Most hajtsa végre a fenti lépéseket.

Eredmény:

Az eredményt sikertelenként láthatjuk, és a képernyőképen „F” jelzéssel jelzi az okot: „Várva: Hello GURU99! 'Hello change GURU99!'. Azt is megmutatja, hogy hány hiba történt a kód végrehajtása során.

El tudjuk-e érni ugyanezt azzal Selenium web driver?

Néha az AngularJS alkalmazások webes elemeit XPath vagy CSS szelektor segítségével azonosíthatjuk Selenium web-illesztőprogram. Az AngularJS alkalmazásokban azonban az elemek dinamikusan generálódnak és módosulnak. Tehát a Protractor a jobb gyakorlat az AngularJS alkalmazásokkal való munkavégzéshez.

Készítsen jelentéseket a Jasmine Reporters segítségével

A Protractor támogatja a Jasmine riportereket tesztjelentések készítésében. Ebben a részben a JunitXMLReportert fogjuk használni a tesztvégrehajtási jelentések automatikus generálására XML formátumban.

Kövesse az alábbi lépéseket XML formátumú jelentések készítéséhez.

A Jasmine Reporter telepítése

Ezt kétféleképpen teheti meg: lokálisan vagy globálisan

1. Nyissa meg a parancssort, és hajtsa végre a következő parancsot a helyi telepítéshez

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

A fenti parancs telepíti a jasmine reports csomópont-modulokat helyileg abból a könyvtárból, ahol a parancsot futtatjuk a parancssorban.

2. Nyissa meg a parancssort, és hajtsa végre a következő parancsot a globális telepítéshez

npm install –g jasmine-reporters@^2.0.0

Ebben az oktatóanyagban a jázminriportereket helyben telepítjük.

Step 1) Hajtsa végre a parancsot.

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

a parancssorból az alábbiak szerint.

Step 2) Ellenőrizze a telepítési mappákat a könyvtárban. A "Node_modules"-nak elérhetőnek kell lennie, ha sikeresen telepítette, mint az alábbi pillanatképen.

Step 3) Adja hozzá a következő színű kódot egy létező conf.js fájlhoz

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

A kód magyarázata:

A kódban elkészítjük a „jelentést”JUnitXmlReporter” és megadja az elérési utat, ahol a jelentést tárolni kell.

Step 4) Nyissa meg a parancssort, és hajtsa végre a parancsot szögmérő conf.js.

Step 5) Amikor végrehajtja a fenti kódot, a junitresults.xml az említett útvonalon generálódik.

Step 6) Nyissa meg az XML-t, és ellenőrizze az eredményt. A hibaüzenet a miénkként jelenik meg az eredményfájlban Teszt eset sikertelen. A teszteset meghiúsult, mivel a „spec.js” várt eredménye nem egyezik a weboldal tényleges eredményével

Step 7) Használja a junitresult.xml fájlt bizonyítékok vagy eredményfájlok számára.

Összegzésként

Bár Selenium A szögmérő ipari szabvány és legjobb gyakorlat az AngularJS alkalmazások tesztelésére. A Protractor több funkciót is kezelhet benne, és kezelheti a webes elemek dinamikus változásait ng-modell, ng-click.. stb.. (Amire a szelén nem képes).