Goniometro - Oggetti

Questo capitolo discute in dettaglio sugli oggetti in Goniometro.

Cosa sono gli oggetti pagina?

L'oggetto Page è un modello di progettazione diventato popolare per la scrittura di test e2e al fine di migliorare la manutenzione dei test e ridurre la duplicazione del codice. Può essere definita come una classe orientata agli oggetti che funge da interfaccia per una pagina del tuo AUT (applicazione sotto test). Ma, prima di immergerci in profondità negli oggetti della pagina, dobbiamo comprendere le sfide con i test automatizzati dell'interfaccia utente e i modi per gestirli.

Sfide con i test automatizzati dell'interfaccia utente

Di seguito sono riportate alcune sfide comuni con i test automatizzati dell'interfaccia utente:

Modifiche all'interfaccia utente

I problemi molto comuni durante il lavoro con i test dell'interfaccia utente sono i cambiamenti che avvengono nell'interfaccia utente. Ad esempio, la maggior parte delle volte accade che pulsanti o caselle di testo ecc. Di solito vengano modificati e creino problemi per i test dell'interfaccia utente.

Mancanza di supporto DSL (Domain Specific Language)

Un altro problema con i test dell'interfaccia utente è la mancanza di supporto DSL. Con questo problema, diventa molto difficile capire cosa viene testato.

Molte ripetizioni / duplicazione del codice

Il prossimo problema comune nei test dell'interfaccia utente è che ci sono molte ripetizioni o duplicazioni del codice. Può essere compreso con l'aiuto delle seguenti righe di codice:

element(by.model(‘event.name’)).sendKeys(‘An Event’);
element(by.model(‘event.name’)).sendKeys(‘Module 3’);
element(by.model(‘event.name’));

Manutenzione difficile

A causa delle sfide di cui sopra, diventa mal di testa per la manutenzione. È perché dobbiamo trovare tutte le istanze, sostituirle con il nuovo nome, selettore e altro codice. Abbiamo anche bisogno di dedicare molto tempo per mantenere i test in linea con il refactoring.

Test interrotti

Un'altra sfida nei test dell'interfaccia utente è il verificarsi di molti errori nei test.

Modi per gestire le sfide

Abbiamo visto alcune sfide comuni del test dell'interfaccia utente. Alcuni dei modi per gestire tali sfide sono i seguenti:

Aggiornamento manuale dei riferimenti

La prima opzione per gestire le sfide di cui sopra è aggiornare i riferimenti manualmente. Il problema con questa opzione è che dobbiamo fare la modifica manuale del codice così come i nostri test. Questo può essere fatto quando hai uno o due file di test, ma cosa succede se hai centinaia di file di test in un progetto?

Utilizzo di oggetti pagina

Un'altra opzione per gestire le sfide di cui sopra è utilizzare gli oggetti della pagina. Un oggetto pagina è fondamentalmente un semplice JavaScript che incapsula le proprietà di un modello angolare. Ad esempio, il seguente file di specifiche viene scritto senza e con gli oggetti pagina per comprendere la differenza:

Without Page Objects

describe('angularjs homepage', function() {
   it('should greet the named user', function() {
      browser.get('http://www.angularjs.org');
      element(by.model('yourName')).sendKeys('Julie');
      var greeting = element(by.binding('yourName'));
      expect(greeting.getText()).toEqual('Hello Julie!');
   });
});

With Page Objects

Per scrivere il codice con gli oggetti pagina, la prima cosa che dobbiamo fare è creare un oggetto pagina. Quindi, un oggetto pagina per l'esempio precedente potrebbe essere simile a questo:

var AngularHomepage = function() {
   var nameInput = element(by.model('yourName'));
   var greeting = element(by.binding('yourName'));

   this.get = function() {
      browser.get('http://www.angularjs.org');
   };

   this.setName = function(name) {
      nameInput.sendKeys(name);
   };
   
   this.getGreetingText = function() {
      return greeting.getText();
   };
};
module.exports = new AngularHomepage();

Utilizzo di oggetti pagina per organizzare i test

Abbiamo visto l'uso di oggetti pagina nell'esempio precedente per gestire le sfide del test dell'interfaccia utente. Successivamente, discuteremo di come utilizzarli per organizzare i test. Per questo abbiamo bisogno di modificare lo script di test senza modificare la funzionalità dello script di test.

Esempio

Per comprendere questo concetto stiamo prendendo il file di configurazione sopra con oggetti di pagina. Dobbiamo modificare lo script di test come segue:

var angularHomepage = require('./AngularHomepage');
describe('angularjs homepage', function() {
   it('should greet the named user', function() {
      angularHomepage.get();

      angularHomepage.setName('Julie');
   
      expect(angularHomepage.getGreetingText()).toEqual
      ('Hello Julie!');
   });
});

Tieni presente che il percorso dell'oggetto pagina sarà relativo alla tua specifica.

Sulla stessa nota, possiamo anche separare la nostra suite di test in varie suite di test. Il file di configurazione può quindi essere modificato come segue

exports.config = {
   // The address of a running selenium server.
   seleniumAddress: 'http://localhost:4444/wd/hub',

   // Capabilities to be passed to the webdriver instance.
   capabilities: {
      'browserName': 'chrome'
   },
   // Spec patterns are relative to the location of the spec file. They may
   // include glob patterns.
   suites: {
      homepage: 'tests/e2e/homepage/**/*Spec.js',
      search: ['tests/e2e/contact_search/**/*Spec.js',
         'tests/e2e/venue_search/**/*Spec.js']
   },

   // Options to be passed to Jasmine-node.
   jasmineNodeOpts: {
      showColors: true, // Use colors in the command line report.
   }
};

Ora possiamo facilmente passare dall'esecuzione dell'una all'altra suite di test. Il seguente comando eseguirà solo la sezione della homepage del test:

protractor protractor.conf.js --suite homepage

Allo stesso modo, possiamo eseguire specifiche suite di test con il comando come segue:

protractor protractor.conf.js --suite homepage,search