Szögmérő tesztelési útmutató: Automatizálási eszköz keretrendszer

Tartalomjegyzék:

Anonim

Mi az a szögmérő teszt?

A PROTRACTOR egy automatizálási és végpontok közötti viselkedésvezérelt tesztelő eszköz, amely fontos szerepet játszik az AngularJS alkalmazások tesztelésében, és olyan megoldásintegrátorként működik, amely olyan erős technológiákat ötvöz, mint a szelén, a jázmin, a webes illesztőprogram stb. nem csak az AngularJS alkalmazások tesztelésére szolgál, hanem automatizált regressziós tesztek írására a normál webalkalmazások számára is.

Ebben a kezdő oktatóanyagban megtanulod-

  • Miért van szükség szögmérőre?
  • Szögmérő telepítése
  • Minta AngularJS alkalmazás tesztelés Protractor segítségével
  • A kódex végrehajtása
  • Jelentéseket generálhat a Jasmine Reporters segítségével

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

A JavaScriptet szinte minden webalkalmazásban használják. Az alkalmazások növekedésével a JavaScript mérete és összetettsége is növekszik. Ebben az esetben a tesztelők számára nehéz feladat lesz a webalkalmazás különböző forgatókönyvek tesztelése.

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

A Protractor egy NodeJS program, amelyet JavaScript-ben írtak, és a Node-szal együtt futtatja az AngularJS alkalmazások webelemeinek azonosításához, és a WebDriver segítségével a böngészőt felhasználói műveletekkel is vezérli.

Ok, jó, most beszéljük meg, mi is az 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 webalkalmazásokhoz használják. Ezek az alkalmazások kevesebb és rugalmas kódot használnak, mint a normál webalkalmazások.

Miért nem találunk Angular JS webes elemeket a Normal Selenium Web illesztőprogram használatával?

A szögletes JS alkalmazások tartalmaznak néhány extra HTML attribútumot, például ng-repeater, ng-controller, ng-model ... stb., Amelyek nem szerepelnek a Selenium lokátorokban. A Selenium nem képes azonosítani azokat a webes elemeket a Selenium kód használatával. Tehát a szelén tetején lévő szögmérő 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égtesztjeinek végrehajtására összpontosít, a Protractor az alkalmazás tényleges funkcionalitásának tesztelésére összpontosít.

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

  1. Szelén

    A Selenium telepítési lépéseit a következő linkeken találja meg: (https://www.guru99.com/installing-selenium-webdriver.html)

  2. NPM (Node.js)

    NodeJS telepítése, telepítenünk kell a NodeJS-t a Protractor telepítéséhez. Ezeket a telepítési lépéseket a következő linken találja meg. (https://www.guru99.com/download-install-node-js.html)

Szögmérő telepítése

1. lépés: Nyissa meg a parancssort, írja be az „npm install -g protractor” parancsot, é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.

2. lépés: Ellenőrizze a telepítést és a verziót a " Protractor --version " paranccsal . Ha sikeres lesz, akkor az alábbi képernyőképen megjelenő verzió jelenik meg. Ha nem, hajtsa végre újra az 1. lépést.

(A 3. és 4. lépés opcionális, de ajánlott a jobb gyakorlat érdekében)

3. lépés: Frissítse a webillesztő-kezelőt. A webillesztő-kezelőt a szögletes webalkalmazás elleni tesztek futtatására használják egy adott böngészőben. A Protractor telepítése után a webillesztő-kezelőt frissíteni kell a legújabb verzióra. Ezt úgy teheti meg, hogy a következő parancsot futtatja a parancssorban.

webdriver-manager update

4. lépés: Indítsa el a webillesztő-kezelőt. Ez a lépés a webes illesztőprogram-kezelőt futtatja a háttérben, és meghallgatja a szögmérőn keresztül futó teszteket.

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

webdriver-manager start

Most, ha a böngészőben a következő URL-re megy ( http: // localhost: 4444 / wd / hub / static / resource / hub.html ), akkor a háttérben futó web-illesztőprogram-kezelőt látja.

Minta AngularJS alkalmazás tesztelés Protractor segítségével

A szögmérő futtatásához két fájlra van szükség, egy specifikációs fájlra és a konfigurációs fájlra.

  1. Konfigurációs fájl : Ez a fájl elősegíti a szögmérőt a tesztfájlok helyén (specs.js) és a Selenium szerverrel (Selenium Address) való beszélgetéshez. A Chrome a Protractor alapértelmezett böngészője.
  1. Spec fájl: Ez a fájl tartalmazza az alkalmazással való kommunikáció logikáját és lokátorait .

1. lépés: Be kell jelentkeznünk a https://angularjs.org webhelyre, és a "Gépeljen be egy nevet ide" szövegmezőbe írja be a szöveget "GURU99" néven.

2. lépés) Ebben a lépésben

  1. Írta be a "Guru99" nevet
  2. A kimeneti szövegben a "Hello Guru99" látható.

3. lépés) Most meg kell ragadnunk a szöveget a weboldalról, miután megadtuk a nevet, és igazolnunk kell a várt szöveggel .

Kód:

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

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

Kód A spec.js magyarázata:

  1. írják le ( 'Enter GURU99 neve', function ()

    A leíró szintaxis a jázmin keretrendszerből származik. Itt a "description" ('Írja be a GURU99 nevet') tipikusan meghatározza az alkalmazás összetevőit, amelyek lehetnek osztályok vagy függvények stb. Az "Enter GURU99" nevű kódkészletben ez csak egy karakterlánc, és nem kód.

  2. it ('hozzá kell adnia egy nevet GURU99 néven', function ()
  3. browser.get ('https://angularjs.org')

    A Selenium Webdriver böngészőhöz hasonlóan a browser.get új böngészőpéldányt nyit meg az említett URL-címmel.

  4. elem (by.model ('a te neved')). sendKeys ('GURU99')

    Itt találjuk azt a webelementet, amely a Model nevet használja "yourName" néven, ami a weboldalon az "ng-model" értéke. Ellenőrizze az alábbi képernyőképet-

  1. var guru = elem (by.xpath ('html / body / div [2] / div [1] / div [2] / div [2] / div / h1'))

    Itt találjuk meg a web elemet az XPath segítségével, és az értékét egy "guru" változóban tároljuk .

  2. várható (guru.getText ()). toEqual ('Helló GURU99!')

    Végül ellenőrizzük a weblapról kapott szöveget (a gettext () használatával) 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. szeléncím: "http: // localhost: 4444 / wd / hub"

    A konfigurációs fájl megmondja a szögmérőnek a Selenium Address helyét, hogy beszéljen a Selenium WebDriver programmal.

  2. specifikációk: ['spec.js']

    Ez a sor megadja a szögmérőnek 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 arra a mappára, ahol a confi.js és spec.js a rendszerünkben található .

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

1. lépés: Nyissa meg a parancssort.

2. lépés: Győződjön meg arról, hogy a szelén web-illesztőprogram-kezelő működik és működik. Ehhez adja meg a parancsot "webdriver-manager start" néven, és nyomja meg az Enter billentyűt .

(Ha a szelén web-illesztőprogram nem működik és fut, akkor nem folytathatunk tesztet, mivel a szögmérő nem találja a web-illesztőprogramot a webalkalmazás kezeléséhez)

3. lépés: Nyisson meg egy új parancssort, és adja meg a parancsot "protractor conf.js" néven a konfigurációs fájl futtatásához.

Magyarázat:

  • Itt a Protractor végrehajtja a konfigurációs fájlt, benne megadott specifikációs fájllal.
  • Láthatjuk a " http: // localhost: 4444 / wd / hub " címen futó szelén szervert, amelyet a conf.js fájlban adtunk meg.
  • Itt láthatja az eredményt, hogy hány túllépett és meghibásodott, mint a fenti képernyőképen .

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

1. lépés: Nyissa meg és változtassa meg a spec.js-t a "'Hello change GURU99" -re.

A spec.js változá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!');});});

2. lépés: Mentse 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:

Láthatjuk, hogy az eredmény sikertelen, és a képernyőn 'F' jelzéssel szerepel, és ennek oka: "Várható" Hello GURU99! " egyenlő „Hello change GURU99!”. Ez azt is megmutatja, hogy hány hiba történt a kód futtatásakor.

Elérhetjük ugyanezt a Selenium web-illesztőprogrammal?

Néha azonosítani tudjuk az AngularJS alkalmazások webelemeit a Selenium web-illesztőprogramból származó XPath vagy CSS választóval. De az AngularJS alkalmazásokban az elemeket dinamikusan generálják és megváltoztatják. Tehát a szögmérő a jobb gyakorlat az AngularJS alkalmazásokkal való együttműködéshez.

Jelentéseket generálhat a Jasmine Reporters segítségével

A szögmérő támogatja a Jasmine újságírókat tesztjelentések készítésében. Ebben a szakaszban a JunitXMLReporter segítségével fogjuk létrehozni a tesztfuttatási jelentéseket automatikusan XML formátumban.

Kövesse az alábbi lépéseket a jelentések XML formátumban történő létrehozásához.

A Jasmine Reporter telepítése

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

  1. Nyissa meg a parancssort, 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 jázmin jelentéseket. A csomópont-modulok lokálisan azt a könyvtárat jelentik, ahonnan a parancsot a parancssorban futtatjuk.

  1. Nyissa meg a parancssort, 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ázmin riportereket helyben telepítjük .

1. lépés: Hajtsa végre a parancsot.

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

a parancssorból, mint alább.

2. lépés: Ellenőrizze a telepítési mappákat a könyvtárban . A "Node_modules" elérhetőnek kell lennie, ha sikeresen telepítve van, mint az alábbi pillanatképben.

3. lépés: Adja hozzá a következő színes 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:

Kódban generáljuk a " JUnitXmlReporter " jelentést, és megadjuk az elérési utat, ahol a jelentést tárolni kell.

4. lépés: Nyissa meg a parancssort, és hajtsa végre a conf.js szögmérőt.

5. lépés: A fenti kód végrehajtásakor a junitresults.xml generálódik az említett útvonalon.

6. lépés: Nyissa meg az XML-t, és ellenőrizze az eredményt. A hibaüzenet az eredményfájlban jelenik meg, mivel a tesztesetünk sikertelen. A teszteset sikertelen volt, mivel a "spec.js" várható eredménye nem egyezik a weboldal tényleges eredményével

7. lépés: Használja a junitresult.xml fájlt bizonyítékokra vagy eredményfájlokra.

Összegzés:

Noha a szelén képes elvégezni a szögmérő néhány dolgát, a szögmérő az ipari szabvány és a legjobb gyakorlat az AngularJS alkalmazások tesztelésére. A szögmérő számos képességet kezelhet benne, és kezelheti a webes elemek dinamikus változását az ng-model, ng-click… stb. Használatával (amely a szelén nem képes).

A cikket Ranjith Kumar Enishetti készítette