Menú

Eina de proves de transportadors per a proves de punta a punta de les aplicacions AngularJS

protractor testing tool

Proveu El Nostre Instrument Per Eliminar Problemes

Què és Protractor?

El Protractor és una eina de proves d'automatització per a proves d'aplicacions web; combinant tecnologies potents com Jasmine, Selenium Webdriver, Node.js, etc.

L’eina de proves Protractor és un marc de proves de comportament de punta a punta dissenyat tenint en compte les aplicacions Angular JS. Tot i que pot semblar que Protractor no funcionarà amb aplicacions JS no angulars, sí.

Funciona amb aplicacions JS tant angulars com no angulars.

No dubteu a explorar el tota una sèrie de tutorials d'AngularJS . Al nostre tutorial anterior, la diferència entre les versions angulars es va explicar amb detall.

Tutorial de proves de transportadors

Què aprendreu:

Protractor vs Selenium WebDriver

El que fa que Protractor sigui diferent del tradicional Selenium WebDriver ?

Dediqueu un minut a respondre aquestes preguntes:

  • És difícil determinar quan es carrega exactament la pàgina web (tots els elements asíncrons estan preparats i processats)?
  • Esteu fart d'afegir esperes i son al vostre codi?
  • Voleu desfer-vos del feixuc esforç per localitzar els elements angulars?
  • Està frustrat amb elements de localització amb identificadors canviants?
  • Voleu crear el vostre propi localitzador?
  • Esteu escrivint un codi llarg fins i tot per a les afirmacions més senzilles?
  • Ets un entusiasta / fan de JavaScript?

Si heu respost que sí a aquestes preguntes, Transportador Puc ajudar.

És un embolcall construït a sobre de Selenium Webdriver i, per tant, proporciona totes les funcions de Selenium juntament amb moltes addicions útils. Ofereix:

Característiques

Ofereix:

1) WaitForAngular

descarregueu àudio d’alta qualitat des de youtube

A partir de la documentació:

' Demaneu a WebDriver que espereu fins que Angular hagi acabat de representar i no tingui trucades pendents de $ http o $ timeout abans de continuar. Tingueu en compte que Protractor aplica aquesta ordre automàticament abans de cada acció de WebDriver. '

Això vol dir que no cal afegir esperes manualment al vostre script i Protractor automàticament esperarà que es carreguin els elements web i només llavors executarà els passos següents.

2) Té la capacitat d’exportar una funció global element , que agafa un localitzador i retornarà un ElementFinder. Aquest ElementFinder té un conjunt de mètodes d'acció, com ara clic (), getText (), sendKeys (), etc. Aquest és el nucli de com interactuar amb l'element i obtenir-ne informació.

Aquesta funció global ajuda a reduir la sintaxi de localització dels elements. Mireu la declaració següent per localitzar l'element tant a Selenium WebDriver com a Protractor:

Selenium Webdriver :

driver.findElement(By.cssSelector('css selector'));

Transportador :

element(by.css('some-css'));

La sintaxi sembla compacta, oi?

3) Algunes noves estratègies i funcions de localització proporcionades per ajudar a localitzar els elements angulars són: By.binding, By.repeater, By.textarea, By.model, WebElement.all, WebElement.evaluate , Etc.

Com em pot ajudar Protractor?

Mireu les funcions destacades següents:

  • Sintaxi simple per escriure casos de prova
  • La possibilitat d'executar diversos navegadors alhora mitjançant Selenium Grid
  • Localitzadors angulars específics
  • Suport per al desenvolupament basat en el comportament, com ara Jasmine / Mocha
  • No cal afegir cap son / espera
  • Integració compatible amb Jenkins / Browser Stack / Grunt, etc.
  • Desfeu-vos de tractar problemes de sincronització als llocs web d'Angular JS
  • Suport per a diversos navegadors (Firefox, Chrome, Safari, Internet Explorer)
  • Possibilitat d'executar els mateixos scripts en navegadors mòbils també sense necessitat de canviar el codi

Quin marc utilitzar?

Admet dos marcs de proves de desenvolupament basat en el comportament (BDD) immediatament:

  • Gessamí: Gessamí és el marc de prova per defecte quan s'instal·la Protractor. Utilitzarem Jasmine en aquest article.
  • Mocha: Mocha és un marc de prova de JavaScript que s'executa a Node.js. Si voleu utilitzar Mocha com a marc de prova, haureu de configurar-lo amb el transportador i també haureu d’utilitzar la interfície de desenvolupament impulsat pel comportament i les afirmacions de Chai amb Chai com a promès (consulteu aquest enllaç per a més detalls ).

Com descarregar i configurar el transportador

Com que és un programa node.js, heu d’instal·lar node.js per executar-lo. Node.js es pot descarregar des d’aquest URL seleccionant el sistema operatiu: Baixada de Node.js

Amb node.js, també obtindreu Transportador sobre el nivell del mar package, que ara es pot utilitzar per instal·lar Protractor.

Ara que node.js està instal·lat a la vostra màquina, obriu el símbol del sistema (cmd) i premeu l'ordre següent per instal·lar-lo globalment:

npm install -g protractor

'-G' s'utilitza per instal·lar aquesta eina a nivell mundial. Traieu-lo si no voleu instal·lar-lo globalment. Aquesta ordre també instal·la l'API Protractor juntament amb un servidor de seleni predeterminat, cosa que significa que no necessàriament heu d'iniciar un servidor independent.

Ara, hem d’instal·lar el servidor de seleni i ChromeDriver. Utilitzeu l'ordre següent (també inclou Protractor) a cmd:

webdriver-manager update

Això és tot el que necessitem per començar amb la nostra primera redacció de casos de prova mitjançant aquest marc. Si ho desitgeu, podeu instal·lar qualsevol IDE / editor per escriure el vostre codi. Eclipse IDE és el popular, però també hi ha alguns editors més interessants a tenir en compte. Personalment, prefereixo l’editor ‘Atom’ per escriure el meu codi Protractor.

Esteu a punt per crear el vostre primer cas de prova?

Necessita 2 fitxers per executar-se:

  • Fitxer de configuració
  • Fitxer espec.

El Fitxer de configuració és el que indica a Protractor on trobar els fitxers de prova (especificacions) / quin navegador escollir / quin marc utilitzar (Jasmine / Mocha) / on parlar amb el vostre navegador Selenium i altres configuracions. Si no es defineix cap configuració als fitxers de configuració, utilitzarà els valors predeterminats.

El fitxer Spec és aquell on escrivim el nostre codi de prova real. Tots els nostres fluxos / assercions funcionals de prova es trobaran en aquest fitxer específic. Pot haver-hi diversos fitxers d’especificacions en funció del nombre de casos de prova, però només un fitxer d’especificacions podrà executar tot el conjunt de proves de diverses especificacions.

Exemple CAS DE PROVA:

Ara escriurem un cas de prova senzill on navegarem cap a un URL i comprovarem el títol de la pàgina.

Aquests són els passos següents:

  • Creeu una carpeta nova per al vostre conjunt de proves.
  • Creeu un fitxer nou amb el nom ' js (Qualsevol nom ho farà) Tots els fitxers d'especificació / configuració tindran l'extensió '.js'.
  • Creeu un fitxer nou amb el nom especificat com a ' js '.
//CheckTitleSpec.js describe('Protractor Demo', function() { it('to check the page title', function() { browser.ignoreSynchronization = true; browser.get('https://www.softwaretestinghelp.com/'); browser.driver.getTitle().then(function(pageTitle) { expect(pageTitle).toEqual('Software Testing Help - A Must Visit Software Testing Portal'); }); }); });

Ara ja estem preparats per començar amb la nostra codificació. Consulteu el codi següent del fitxer ‘testCaseNameSpec.js’.

A continuació s’explica el fitxer de configuració:

// conf.js exports.config = { framework: 'jasmine', capabilities: { browserName: 'chrome', }, specs: ('simpleTestSpec.js') };

Ara, deixeu de trencar aquests 2 fitxers i vegeu com funciona.

# 1) Spec.js

  • Totes les ordres del nivell del navegador seran gestionades per ' navegador ’, Un món creat per Protractor.
  • Mentre seguim el marc de Jasmine, ‘ descriu ' i ' això ’Són les sintaxis de Jasmine. Descriviu contindrà tot el final per acabar el flux del cas de prova, mentre que 'pot' contenir alguns passos / escenaris de prova, etc. Podeu tenir diversos ' això ’Bloqueja al vostre programa si ho desitgeu.
  • browser.get és una sintaxi simple de Selenium que indica a Protractor que toqui un URL específic al navegador.
  • Com que el lloc web al qual intentem accedir és un lloc web no angular, hem definit el fitxer ignoreSynchronization etiqueta a ' cert 'Tal com es mostra a la línia 4. Si no feu que aquesta etiqueta sigui certa, la prova fallarà amb l'error 'Angular no s'ha pogut trobar a la pàgina'. La raó d’això és que Protractor espera treballar de manera predeterminada amb llocs web angulars i, si estem utilitzant Protractor per validar el lloc web no angular, hem de comunicar-ho explícitament a Protractor. Tot i això, si esteu treballant en llocs web angulars, no cal que utilitzeu aquesta afirmació, ja que Protractor considerarà que la pàgina web és angular per defecte.
  • 'Esperar' no és res més que l'afirmació en què comparem el títol de la pàgina web per igualar algunes dades predefinides. Discutirem més afirmacions en detall.

# 2) conf.js

  • Com s'ha comentat anteriorment, el fitxer de configuració és el que indica a Protractor els detalls bàsics. Tal com es mostra al codi, el marc és 'Jasmine'.
  • A la secció de funcions, es configuren les configuracions del navegador. Podeu definir el nom del navegador, com ara Firefox / chrome, etc. També podeu definir les instàncies màximes dels navegadors perquè, alhora, pugueu executar diversos casos de prova en diferents finestres del navegador disponibles.
  • Al ' especificacions 'Secció, donem el camí del fitxer spec, és a dir, on es troba exactament el fitxer spec respecte del fitxer de configuració.
  • També hi ha moltes altres funcions interessants que podeu adjuntar al fitxer de configuració, com ara la funció d'informes / funció onPrepare / temps d'espera del llindar, etc. En tractarem algunes d'aquestes en aquest tutorial.

Com s'executen els casos de prova?

Hem escrit el codi i ara només necessitem una petita empenta per fer funcionar el nostre codi. Premeu l'ordre següent a cmd per executar el programa:

protractor conf.js

Aquesta ordre començarà a executar el servidor de seleni seguit d’executar el vostre script de prova. Podeu veure els registres al mateix cmd o, si ho desitgeu, també es poden capturar registres en un fitxer .txt (només afegir >> textFileName.txt després de l'ordre anterior i els registres es desaran al fitxer de text situat al mateix directori que el fitxer de configuració).

S'obrirà una finestra cromada, on SoftwareTestingHelp.com s'hauria d'obrir el lloc web. La sortida seria '1 spec, 0 failure' quan s'executa el codi. El que vol dir això és que teníem 1 blocs ‘it’, que s’executaven amb 0 fallades.

Ara, tingueu en compte el fitxer d’especificacions que es mostra a continuació, en què estem realitzant algunes accions en la creació d’una pàgina web a AngularJS, de manera que pugueu veure l’adopció de Selenium per part d’un transportador a l’hora de provar el lloc web Angular:

com reproduir un fitxer swf
// spec.js describe('Code to interact with Angular JS elements', function() { it('should multiply two integers', function() { browser.get('http://juliemr.github.io/protractor-demo/'); element(by.model('first')).sendKeys(5); element(by.model('second')).sendKeys(5); element(by.model('operator')).click(); element(by.xpath('.//option(@value= 'MULTIPLICATION')')).click(); element(by.id('gobutton')).click(); expect(element(by.binding('latest')) .getText()).toEqual('10'); //Incorrect expectation expect(element(by.binding('latest')) .getText()).toEqual('25'); //Correct expectation }); });

També podeu utilitzar el mateix conf.js per executar aquesta especificació. Assegureu-vos d'actualitzar el nom del fitxer d'especificació.

Ara, en aquest fitxer d’especificacions, estem jugant amb un lloc web angular de JS perquè pugueu veure de què és capaç exactament Protractor.

Si executeu aquest fitxer tal com vam fer anteriorment, s’obrirà una pàgina web amb 2 quadres de text, un menú desplegable, un botó i pocs altres elements web. Com ja haureu endevinat, és una pàgina de calculadores. Estem donant 2 enters com a entrada i realitzem una operació de multiplicació.

Com ja hem comentat, un dels majors avantatges d’utilitzar aquesta eina són les seves tècniques úniques per localitzar els elements angulars. 'Per model' és una d'aquestes maneres de localitzar elements. '.SendKeys ()' La sintaxi de seleni és habitual per enviar valors als quadres de text i '.Click ()' s'utilitza per fer clic als botons.

Com s’ha comentat anteriorment, 'Esperar' és una afirmació que demana a Protractor que capturi el resultat de la multiplicació de nombres i que el compare amb «10» i «25» de manera seqüencial. Les matemàtiques simples ens diuen que la sortida hauria de ser '25' i, per tant, la primera afirmació falla i la segona passa.

Com a resultat, obtindreu ‘ 1 Especificació, 1 Fallada ’Als registres quan executeu el codi, cosa que s’espera.

Algunes funcions més interessants de Protractor

# 1) Assercions i anotacions

Les afirmacions són una part important dels scripts d'automatització. Les anotacions també són molt útils per etiquetar eficaçment determinats mètodes d’una classe amb un significat especial.

Proporciona una varietat d'afirmacions i anotacions i, a més d'això, també proporciona la possibilitat de crear les vostres pròpies afirmacions.

Considereu l'exemple següent:

describe('Code to understand assertions/annotations', function() { beforeEach(function() { browser.get('http://juliemr.github.io/protractor-demo/'); }); afterEach(function() { browser.get('https://www.madewithangular.com/#/'); }); var multiplyNumbers = function(a, b) { element(by.model('first')).sendKeys(a); element(by.model('second')).sendKeys(b); element(by.model('operator')).click(); element(by.id('gobutton')).click(); }; it('should multiply two integers', function() { multiplyNumbers(2, 2); expect(element.all(by.repeater('result in memory')).count()).toEqual(2); multiplyNumbers(3, 3); expect(element.all(by.repeater('result in memory')).count()).toEqual(2); }); });

A l'exemple anterior, fem servir dues anotacions, 'Abans de cadascun' i 'AfterEach' . Aquestes anotacions també estan disponibles a TestNG (seleni tradicional). Aquestes anotacions asseguren que un fragment de codi concret s'executarà abans o després de l'execució del codi restant, respectivament.

Així doncs, aquí s’executarà l’execució del codi,

  1. El transportador arribarà a l’interior de la abansCada 'Bloqueja primer i tocarà' http://juliemr.github.io/protractor-demo/ 'URL al navegador.
  2. Ara, el flux es mourà al bloc 'it' i funcionarà ' multiplyNumbers ' es cridarà, que al seu torn realitzarà les accions especificades enviant el control cap a on es va cridar la funció.
  3. Per fi, l’afirmació farà la seva feina. Ara, si volem abordar diversos elements al mateix temps, podeu utilitzar 'element.all' una característica d'aquesta eina. Identificarà tots els elements disponibles amb el localitzador especificat (per repetidor en aquest cas). Depèn de vosaltres què vulgueu fer amb els elements identificats. En aquest cas, comparem l’historial de càlculs amb un nombre determinat.
  4. Com que, a la primera afirmació, comparem el recompte de l’historial de càlculs amb «2», tot i que hem realitzat el càlcul només una vegada, l’afirmació fracassarà. La segona afirmació, però, passarà ja que després del segon càlcul, el recompte de la història seria '2'.

Hi ha molts més tipus d’afirmacions disponibles. Alguns dels quals es donen a continuació:

a) Obteniu text d'un element web i compareu-lo amb un valor determinat:

element(by.locator('someLocator')).getText(text) .then(function() { expect(text).toEqual('someData'); expect(text).not.toEqual('someData'); expect(text).toContain('someOtherData'); });

b) Verifiqueu si es mostra o no un element web a la pàgina:

expect(browser.driver.findElement(by.locator(someLocator)) .isDisplayed()).toBe(true);

# 2) Gestió de diversos navegadors / finestres / pestanyes

Hi pot haver diversos casos a l’hora de gestionar el navegador. Alguns d'aquests casos es ressalten a continuació:

a) S'obre una nova pestanya fent clic a qualsevol enllaç

De vegades, quan feu clic a qualsevol enllaç, s'obre una nova pestanya i la resta d'accions han de tenir lloc a la finestra recentment oberta. En aquest cas, quan escriviu el codi al punt que s'obre una nova pestanya, heu d'implementar Window Handler de la manera següent:

//Get all of the opened windows and store the count in handles browser.getAllWindowHandles().then(function(handles) { //Now switch the control to the newly opened window browser.switchTo().window(handles(1)).then(function() { //Write the code which needs to be executed in the new tab }); });

Primer obteniu un recompte de totes les finestres disponibles i, a continuació, utilitzeu la indexació per canviar el control entre les finestres. La finestra original que va iniciar la nova finestra tindrà índex 0, mentre que les finestres posteriors tindran índexs creixents.

b) Obrir un navegador completament nou amb una nova sessió

Quan necessiteu fer algunes accions en un navegador i necessiteu fer altres accions en una sessió diferent del navegador, hem d’utilitzar el forkNewDriverInstance . En aquest cas, creem una nova instància del navegador amb un nom nou del navegador de la següent manera:

describe('Code to understand assertions/annotations', function() { //Create a new browser instance var newBrowser = browser.forkNewDriverInstance(); it('should should open multiple browsers instances', function() { //Opens a URL in the 1st browser instance browser.get('http://juliemr.github.io/protractor-demo/'); //Opens a URL in the 2nd browser instance newBrowser.get('https://www.madewithangular.com/#/'); newBrowser.driver.quit(); }); });

c) Execució del cas de prova en diversos navegadors:

Executar el cas de prova en dos navegadors alhora és una cosa que pot fer el vostre fitxer de configuració. Només cal que afegiu el codi següent al fitxer de configuració:

Tan bon punt hàgiu executat aquest fitxer de configuració, veureu proves que s’executen tant a Firefox com a Chrome simultàniament i els registres d’execució es mostraran a l’indicador d’ordres per separat.

// conf.js exports.config = { framework: 'jasmine', specs: ('SomeSpec.js'), multiCapabilities: ({ browserName: 'firefox' }, { browserName: 'chrome' }) }

# 3) Utilitzeu objectes de pàgina per millorar encara millor el vostre marc

Aquesta eina és bona per si sola, però es torna invencible quan es combina amb el Model d'objectes de pàgina (POM). La majoria de les seves deficiències (si n’hi ha) es superen amb el model d’objectes de pàgina. A més, POM també ajuda a mantenir el vostre projecte d’una manera més estructurada.

Si no sabeu què és POM, no us preocupeu. POM és una manera de separar el cas de prova en funció de les pàgines.

Preneu aquest exemple:

Hi ha un lloc web de compres. El cas de prova és seleccionar un producte, afegir-lo al carretó i després comprar-lo.

Ara hi ha dues maneres de gestionar el codi de l'script de prova:

  1. Escriviu un cas de prova senzill amb tots els localitzadors de la mateixa pàgina en què està escrita la vostra lògica,
  2. Escriviu tot el vostre flux de casos de prova, la vostra lògica al fitxer de especificacions i segregueu els vostres localitzadors i dades de prova en diferents fitxers. Cada pàgina web tindrà un fitxer de pàgina .js equivalent. D’aquesta manera, el vostre codi s’estructurarà i, si hi ha algun altre cas de prova que requereixi el mateix localitzador, no cal que torneu a escriure aquests identificadors, només cal que importeu aquest fitxer de localització i utilitzeu-lo segons les vostres necessitats.

Mantenir els casos de prova pot ser un veritable dolor. Si utilitzeu POM, el vostre codi estarà molt més estructurat.

com veure fitxers XML en word

Aquí teniu un exemple d’utilització del model d’objectes de pàgina:

model d

Aquest és el flux que es troba a la instantània anterior:

  1. Hi ha un cas de prova que compra l’ordinador portàtil. El codi per al flux i la lògica es trobarà a la compraLaptopSpec.js.
  2. Totes les pàgines que es trobin per comprar l’ordinador portàtil tindran 1 fitxer ‘.js’ amb el títol adequat. Tots els elements que cal utilitzar per comprar l’ordinador portàtil i els seus localitzadors es trobaran dins del fitxer de pàgina respectiu.
  3. Les dades necessàries per a aquest cas de prova es poden desar a la carpeta TestData en format ‘.json’ o en format Excel.
  4. Un cop hàgiu acabat amb les pàgines i els localitzadors, només cal que importeu aquests fitxers al fitxer d'especificacions per utilitzar les dades de localització / prova i ja estareu preparats amb el cas de prova.

# 4) Informes

NPM (Node Package Manager) proporciona diversos paquets d'informes, amb els quals es pot capturar la captura de pantalla de cada pas de prova i, a més, un cop finalitzada la prova, us generarà un informe HTML. Tot el que heu de fer és instal·lar aquests paquets obrint un indicador d’ordres i prement les ordres següents:

npm install -g protractor-jasmine2-html-reporter npm install protractor-jasmine2-screenshot-reporter --save-dev

Un cop instal·lats aquests paquets, cada vegada que executeu el fitxer de configuració, es desaran totes les captures de pantalla dels casos de prova i també es generarà un informe HTML que mostrarà el resultat de superació / error del cas de prova.

# 5) Integreu-vos amb altres eines poderoses com Git / Jenkins / Browserstack / Grunt

Hi ha diverses eines disponibles al mercat per ajudar a millorar encara més els casos de prova. Git / Jenkins / BrowserStack / Grunt són algunes d'aquestes eines que afegeixen un valor significatiu als scripts de prova normals de Protractor. I el millor és que no haureu de tocar el fitxer d’especificacions per integrar el Protractor amb cap d’aquestes eines. És el vostre fitxer de configuració, que us prendrà totes aquestes coses.

Vaja és una eina de control de versions molt potent. Sempre és una bona pràctica mantenir el vostre codi a Git si hi ha diversos desenvolupadors implicats.

Jenkins és una eina d'integració contínua amb la qual podeu programar els casos de prova i executar-los segons les vostres necessitats. Els scripts Protractor també es poden configurar amb Jenkins. El millor ús d’executar els vostres casos de prova a Jenkins és que és molt ràpid i també podeu executar diversos casos de prova alhora.

BrowserStack és una eina de proves entre navegadors que també es pot utilitzar per provar les vostres aplicacions en diferents navegadors. També es pot integrar amb Protractor afegint les credencials browserStack al fitxer de configuració.

Terra és un corredor de tasques JavaScript. T’ofereix la possibilitat de realitzar diverses tasques per a tu. El seu aspecte impressionant és que hi ha més de 4000 tasques i podeu crear encara més tasques segons el vostre requisit. A continuació es detallen algunes de les tasques d’ús importants diàries per a les quals podem utilitzar Grunt:

  1. Enumereu totes les pràctiques recomanades de codificació i informeu-les immediatament quan infringiu alguna d'aquestes.
  2. Per crear diversos fitxers d'especificacions en temps d'execució. Per exemple , si hi ha algun cas de prova que vulgueu executar diverses vegades (des de l'1 fins a qualsevol número). Això pot semblar innecessari en aquest moment, però penseu a executar qualsevol flux de compra de llocs web de compres que s'executi a tots els països disponibles. Seria tediós crear diverses especificacions manualment. Per tant, deixeu que Grunt ho faci per vosaltres.
  3. La funció de rellotge. Escriviu un cas de prova i, cada vegada que deseu el codi després de fer-hi algun canvi, voleu que el cas de prova s’executi, Grunt ho té.
  4. Concatenació de diversos fitxers.

Proveu-ho i us encantarà.

Conclusió

Podeu fer que el seleni funcioni com un transportador, però per què reinventar la roda? Si Google s’ha esforçat tant perquè Protractor funcioni com un encant, deixeu-lo utilitzar al màxim. Almenys per als llocs web d’AngularJS, us facilitarà la vida.

A més, aquest article no tracta només de Protractor. Hi ha un gran món de Protractor i hi ha centenars de paquets disponibles al mercat que ofereix NPM per afegir més funcions a la prova, a més d’escenaris de prova senzills. No dubteu a utilitzar aquests paquets i millorar-los encara.

Sobre l'autor: Aquesta és una publicació de Deshansh. Treballa com a enginyer de desenvolupament de programari en proves amb un dels centres multinacionals més importants. Té una àmplia experiència treballant en proves d'automatització de seleni i transportador.

El nostre proper tutorial us ajudarà a esborrar qualsevol entrevista d'AngularJS amb èxit.

PREV Tutorial | NEXT Tutorial

Lectura recomanada

^