pertracTor tesztelési oktatóanyag: Automatizálási eszköz keretrendszer

⚠️ Elavulási értesítés: pertractor van elavult és archiváltA támogatás 2023 augusztusában megszűnt, és az Angular CLI elvetette a Pro verzióját.tracTor Builder az Angular 15 után. Válasszon Drámaíró, Cypress, WebdriverIO vagy TestCafe új végpontok közötti tesztelésAz alábbi útmutató a korábbi csomagokra vonatkozik.

Miért van szükségünk profikra?tractor keretrendszer?

JavaA szkripteket szinte minden webes alkalmazásban használják. Ahogy az alkalmazások növekednek, JavaForgatókönyv mérete és összetettsége is megnő. Ilyen esetben a tesztelők számára nehéz feladattá válik a webes alkalmazás tesztelése különböző forgatókönyvek esetén.

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

pertracA tor egy Node.js program, amely a következő nyelven íródott: 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.

Szóval, mi is pontosan egy AngularJS alkalmazás?

AngularJS Az alkalmazások olyan webalkalmazások, amelyek kiterjesztett HTML szintaxist használnak webalkalmazás-komponensek kifejezésére. Főként dinamikus webalkalmazásokhoz használják. Ezek az alkalmazások kevesebb és rugalmasabb kódot használnak a normál webalkalmazásokhoz képest. Vegye figyelembe, hogy az AngularJS 1.x 2021. december 31-én kilépett a hosszú távú támogatásból, így az ilyen alkalmazások ma már örököltnek számítanak.

Miért nem találunk AngularJS webes elemeket Normal használatával Selenium WebDriver?

Az AngularJS alkalmazásoknak vannak néhány extra HTML attribútumai, mint például az ng-repeater, ng-controller, ng-model... stb., amelyek nem szerepelnek a Selenium lokátorok. Selenium segítségével nem tudja azonosítani azokat a webes elemeket Selenium kód. Szóval, Protractetején lévő tor Selenium képes kezelni és vezérelni ezeket az attribútumokat a webalkalmazásokban.

pertracA tor egy teljes körű tesztelési keretrendszer AngularJS alapú alkalmazásokhoz. Míg a legtöbb keretrendszer a tesztelésre összpontosít egység tesztek AngularJS alkalmazásokhoz, ProtracA tor az alkalmazás tényleges funkcionalitásának tesztelésére összpontosít.

Mielőtt elkezdenénk a Pro-ttractorhoz, a következőket kell telepítenünk:

1. Selenium: megtalálhatja a Selenium telepítési lépések a Selenium WebDriver telepítési útmutató.
2. NPM (Node.js): Telepítenünk kell a Node.js-t a Pro telepítéséheztractor. Ezeket a telepítési lépéseket a következő helyen találja: Node.js letöltési és telepítési útmutató.

pertracTor telepítése

Step 1) Nyissa meg a parancssort, és írja be „npm install -g pro”tractor” és nyomja meg az Enter billentyűt.

A fenti parancs letölti a szükséges fájlokat és telepíti a Pro programottractor a kliens rendszeren, az alábbiak szerint.

Step 2) Ellenőrizze a telepítést és a verziót a használatával „profi”tractor – verzió. " 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 WebDriver kezelőt. A WebDriver kezelőt az Angular webalkalmazáson futtatott tesztek futtatására használják egy adott böngészőben. After ProtracA tor telepítve van, a WebDriver 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

Az illesztőprogram binárisai az alábbiak szerint töltődnek le.

Step 4) Indítsd el a WebDriver kezelőt. Ez a lépés a háttérben futtatja a WebDriver kezelőt, és figyeli a Pro-n keresztül futó teszteket.tracthor.

A teszt lefutása után a WebDriver automatikusan betölti azt a megfelelő böngészőbe. Indítsa el a kezelőt az alábbi paranccsal.

webdriver-manager start

A konzol jelenti a figyelési címet.

Most, ha a következőre térsz át URL (http://localhost:4444/wd/hub/static/resource/hub.html) a böngésződben, akkor valójában a WebDriver kezelőjét fogod látni a háttérben futni.

Példa az AngularJS alkalmazás tesztelésére Pro használatávaltractor

Amikor a driver manager fut, a ProtracA tor futtatásához két fájlra van szükség, egy spec fájlt, és konfigurációs fájlt.

1. Konfigurációs fájlEz a fájl segít a profiknaktractor oda, ahová a tesztfájlok kerülnek (specs.js), és hogy kommunikáljon vele Selenium szerver (Selenium Cím). A Chrome a Pro alapértelmezett böngészője.tracthor.
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) Ki kell nyitnunk 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 nevet „Guru99 "
2. A kimeneti szövegben a „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.

Code:

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

Code A spec.js magyarázata:

1. leírni('Írja be a GURU99 nevét', function()A leíró szintaxis a következőből származik: Jázmin keretrendszerItt a „describe” ('GURU99 név megadása') jellemzően egy alkalmazás összetevőit definiálja, amelyek lehetnek osztályok vagy függvények stb. Az „Enter GURU99” nevű kódkészletben ez csak egy karakterlánc, nem pedig 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 parancs egy új böngészőpéldányt nyit meg a megemlített értékkel. URL.
4. elem(by.model('yourName')).sendKeys('GURU99') Itt a webes elemet a Modellnév „yourName”-ként használja, ami a „ng-modell„a weboldalon”. Tekintse 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']
};

Code A conf.js magyarázata

1. seleniumAddress: 'http://localhost:4444/wd/hub' A konfigurációs fájl jelzi a Pro számáratraca helyszínre Selenium Cím a beszélgetéshez Selenium WebDriver.
2. specifikációk: ['spec.js']Ez a sor jelzi a Pro-naktraca spec.js tesztfájlok helyére

A végrehajtás Code

Először navigálj abba a mappába, ahová a conf.js és a spec.js fájlok kerülnek, majd kövesd az alábbi lépéseket..

Step 1) Nyissa meg a parancssort.

Step 2) Győződjön meg róla, Selenium A WebDriver manager fut. Ehhez add ki a „webdriver-manager start” parancsot, és nyomd meg az Enter billentyűt..

(Ha Selenium A WebDriver nem fut, ezért nem folytathatjuk a tesztelést Pro verzióban.trac(A tor nem találja a webes alkalmazás kezeléséhez szükséges WebDrivert)

Step 3) Nyisson meg egy új parancssort, és adja ki a parancsot mint „profi”tractor conf.js” a konfigurációs fájl futtatásához. A futtatás az alábbiak szerint fejeződik be.

Magyarázat:

• Itt ProtracA tor végrehajtja a konfigurációs fájlt a megadott spec fájllal.
• Láthatjuk a Selenium szerver fut a következő címen: „http://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.

A sikeres eredményt most ellenőriztük. Ezután tekintse meg a sikertelen eredményt.

Step 1) Nyitás és módosítás: A spec.js fájl várhatóan a következőre fog változni: „Hello change GURU99”, ahogy az alább látható.

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 fenti lépéseket a „A parancs végrehajtása” részben. Code”Szakasz

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 mutatja, hogy hány hiba merül fel a kód futtatása során.

El tudjuk-e érni ugyanezt azzal Selenium WebDriver?

Az AngularJS elemek néha XPath vagy CSS szelektorokkal is megtalálhatók a következő helyen: Selenium WebDriver. Azonban ezek az elemek dinamikusan generálódnak és jelennek meg, így a ProtracA tor volt a biztonságosabb megoldás az AngularJS csomagokhoz.

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

pertraca tor támogatja a Jasmine riportereket. Ez a szakasz a következőket használja JUnitAz XmlReporter segítségével automatikusan generálhat tesztvégrehajtási jelentéseket XML formátumban az alábbi lépéseket követve.

A Jasmine Reporter telepítése

Két lehetőség van, lokális vagy globális

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 helyileg telepíti a jasmine-reporters programot, abba a könyvtárba, ahol fut.

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

Itt a riporterek helyben vannak telepítve.

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 merttractor 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 azért sikertelen, mert 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.

pertractor vs. modern tesztautomatizálási alternatívák

Mivel a ProtracMivel a tor már nem kap frissítéseket, az új csomagokat tervező csapatoknak tudniuk kell, hogyan viszonyul azokhoz a keretrendszerekhez, amelyekre az Angular projektek most átállnak. Az alábbi táblázat összehasonlítja a Pro-ttractor a három leggyakrabban előforduló alternatívával az alábbi GYIK-ben.

Csapatok meglévő profi taggaltraca tor csomag általában a leggyorsabban mozog ide: WebdriverIO, mivel a parancsstílusa és Selenium-alapú vezetőkezelés, maradj közel ahhoz, amit a Protraca tor tesztelők már tudják. Az újonnan kezdő vagy a leggyorsabb tesztfuttatásokra szoruló csapatok gyakrabban választanak Cypress vagy inkább Drámaíró.

GYIK