frontend testing tips

Protractor, test su tab multiple

Nell’ambito dello sviluppo di test funzionali capita di dover verificare l’apertura di nuove tab nel browser ed eseguire i test da lì.

Oltre a dover gestire la nuova tab è necessario assicurarsi che una volta completato il test le tab aperte vengano richiuse e la situazione venga ripristinata per non creare problemi ai test successivi.

frontend testing tips

Note

Questo articolo fa parte di una serie di pubblicazioni che ha come obiettivo conoscere ed approfondire con alcuni casi concreti riscontrati nello sviluppo quotidiano il testing funzionale di applicazioni Angular 2 eseguito tramite Protractor.

Repository di riferimento

Un esempio funzionante del progetto angular base su cui  girano i test di cui parleremo è reperibile presso: https://github.com/mzuccaroli/angular-cli-tests-example, si tratta di un semplice progetto angular2 generato con angular CLI col comando “ng new”. Per maggiori informazioni vedere il quickstart di un progetto angular2.

Protractor multiple tabs

Ecco un breve esempio di come ho risolto il problema basandomi sulle funzioni di windowhandle dell’oggetto browser fornito fa Protractor

Come fare

Nota: questo esempio fa uso di page object, un design pattern di cui ho già parlato in questo articolo.

Creiamo un nuovo test

$ touch e2e/multipleTabs.e2e-spec.ts

La versione più “semplice” di questo test (che successivamente rifattorizzeremo nel page object) è la seguente:

import {AppPage} from './app.po';
import {browser} from 'protractor';

describe('angular-cli-tests-example App', () => {
 let page: AppPage;

 it('should open a new tab with app homepage after clicking on "newtab" link', () => {
  page.navigateTo();
  page.getNewTabLink().click();

  browser.getAllWindowHandles().then(function (handles) {
   expect(handles.length).toEqual(2);
   browser.switchTo().window(handles[1]).then(function () {
    expect(page.getParagraphText()).toEqual('Welcome to app!');
   });
  });
 });
});

la parte rilevante è browser.getAllWindowHandles() che restituisce di fatto un array con le tab e la chiamata browser.switchTo().window(handles[1]) che fa cambiare tab al nostro browser di test dandoci la certezza di testare gli expect successivi nella tab desiderata

siamo pronti per eseguire la prima versione del test con

$ ng e2e --specs=e2e/multipleTabs.e2e-spec.ts

non vogliamo lasciare tab aperte dopo l’esecuzione di questo test e per sicurezza vogliamo accertarci che anche prima dell’esecuzione del test singolo non ci siano altre tab aperte, magari lasciate da test precedenti, ad interferire con quelle che vogliamo verificare, scriviamo quindi la seguente funzione che per comodità potremo aggiungere ad una nuova classe TestUtils

closeOpenedTabs() {
 browser.getAllWindowHandles().then(function (handles) {
  for (let i = 1; i < handles.length; i++) {
   if (handles[i]) {
    console.log('** testutils - closing tab: ' + i + ' **');
    browser.driver.switchTo().window(handles[i]);
    browser.driver.close();
   }
  }
 browser.driver.switchTo().window(handles[0]);
 });
}

questa funzione potrà essere chiamata nei afterEach e beforeAll per assicurarci di avere controllo pieno sullo stato delle tab, dopo un po di refactoring, spostando le funzioni riutilizzabili in TestUtils e modificando il resto per rispettare il pattern Page Object il risultato finale sarà il seguente:

describe('angular-cli-tests-example App', () => {
 let page: AppPage;

 beforeAll(() => {
  page = new AppPage();
  testUtils.closeOpenedTabs();
 });

 afterEach(() => {
  testUtils.closeOpenedTabs();
 });

 it('should open a new tab with app homepage after clicking on "newtab" link', () => {
  page.navigateTo();
  page.getNewTabLink().click();

  page.getOpenedTabs().then(function (tabs) {
   expect(tabs.length).toEqual(2);
   testUtils.goToTab(tabs[1]).then(function () {
    expect(page.getParagraphText()).toEqual('Welcome to app!');
   });
  });
 });
});

Come sempre un esempio funzionante è reperibile nella repository di riferimento, in dettaglio il page object e il test su tab multiple.

0 commenti

Lascia un Commento

Vuoi partecipare alla discussione?
Fornisci il tuo contributo!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *