Voel je Zen met Protractor

Met testtools zoals Protractor hou je tijd over voor het testen van interessante edge-cases.

Oké, vertel me eens of dit je bekend voorkomt: je hebt een contactformulier gebouwd en om te kijken of het werkt, open je het formulier in je browser. Je vult alle velden behalve het verplichte veld ‘Onderwerp’ in en drukt op ‘Versturen’ om te checken of er een foutmelding verschijnt. Dit controleer je regelmatig tijdens het ontwikkelen en veel later als je de code aanpast, check je het nog een paar keer. Als je het niet vergeet tenminste.

Kijk nu eens naar de volgende code:

describe('Het contactformulier', () => {

it('checkt dat het onderwerp ingevuld is', () => {
browser.get('/contact');

const onderwerp = element(by.css('input[name="onderwerp"]'));
const foutmelding = element(by.id('onderwerp-fout'));

expect(onderwerp.getAttribute('value')).toBe('');
expect(foutmelding.isPresent()).toBe(false);

element(by.css('input[type="submit"]')).click();
expect(foutmelding.isPresent()).toBe(true);
expect(foutmelding.getText()).toBe('Onderwerp is verplicht');
});
});

Stel je eens voor dat je deze code één keer schrijft en dat je daarna de test zo vaak kunt uitvoeren als je wilt. Je hoeft alleen maar een commando te geven. Dan opent het systeem automatisch je browser, laadt de contactpagina, klikt op de verstuurknop en kijkt of de foutmelding verschijnt. Zo niet, dan krijg je een foutmelding, met het regelnummer waar in de test iets niet was zoals verwacht. In een fractie van de tijd dat het je kost om hetzelfde met de hand te doen.

De code in dit voorbeeld is geschreven voor Protactor. Protractor is een testtool die oorspronkelijk ontwikkeld was voor AngularJS, maar geschikt is voor alle soorten webapps. Het is gebouwd op Selenium, maar met een wat toegankelijkere API en vriendelijkere documentatie. De installatie is enkel een kwestie van een paar NPM-modules installeren en wat configuratie schrijven. Er staan prima voorbeelden in de Protractor-documentatie op protractortest.org.

Wat ik nou zo mooi aan deze code vind, is dat je direct kunt lezen wat er precies gebeurt. Je zou deze test met de hand kunnen nadoen, wat heel handig is als je een test moet debuggen. Gelukkig komt dat niet vaak voor.

En dat is alleen nog maar als je de Protractor API direct in je test aanroept. Om het nog mooier te maken, kun je er zelf een extra laag code tussen schrijven. De Protractor-documentatie noemt zo’n laag ‘Page Objects’. Hierin kun je implementatiedetails wegstoppen zoals selectors voor het vinden van elementen in je UI, of verschillende variaties van de URL waarmee de pagina geladen kan worden. Het voordeel van zo’n tussenlaag is dat de test zelf nog schoner, beter leesbaar en makkelijker te onderhouden wordt. Bij Vevida hebben we hier intussen aardig wat ervaring mee en we hebben wat tips gepubliceerd op onze website.

Nu het testen toch al zo veel makkelijker is, kun je ook wat tijd investeren in de interessante edge-cases die je met de hand bijna nooit test. Wat gebeurt er bijvoorbeeld als het insturen van je formulier mislukt? Gaat de hele pagina stuk? Of verschijnt er een behulpzame foutmelding? Een test hiervoor is zo geschreven en als die eenmaal slaagt, kun je er rustig van uitgaan dat alles werkt zoals je wilt.

Er gebeurt iets met je wanneer je het merendeel van je website op deze manier test. Het is een gevoel waarover ik eerder las in verhalen van backend programmeurs die goede dekking hadden gehaald met hun unit-tests. Het is een gevoel van zelfverzekerdheid. Van niet meer hoeven aarzelen voor ingrijpende wijzigingen.

Soms heb je namelijk van die grote, ingrijpende aanpassingen waarvan je weet dat ze je codebase op de lange termijn veel beter maken, maar waar je nooit aan wilt beginnen omdat je gewoon wéét dat er in de tussentijd dingen stuk gaan. Herken je dat? Ik heb net een van die grote wijzigingen gedaan. En ik maakte me geen enkele zorgen. Want na elke aanpassing kon ik gewoon de Protractor-tests opnieuw draaien en zag ik direct dat er niets stuk was. Of als er wel iets stuk was, dan wist ik direct dat dat door mijn laatste wijziging kwam en kon ik kijken waarom het daar stuk van ging.

Ja, het kost je in het begin wat extra tijd om Protractor in te stellen en je tests netjes op te schrijven. Doe het toch. Niet alleen omdat het je uiteindelijk alleen maar meer tijd oplevert. Doe het voor je gemoedsrust.

Romke van der Meulen
Romke van der Meulen, Developer bij Vevida

“Protractor is ontwikkeld voor AngularJS, maar je kunt er alle soorten webapps mee testen”

Webdesigner 97: CSS4 en HTML5.1, Sketch, Responsive lay-outs

Webdesign en -ontwikkeling zijn constant in beweging. Specificaties van standaarden worden bijgewerkt met nieuwe functies die je meer ontwerpmogelijkheden dan ooit geven. Houd je deze ontwikkelingen niet bij, dan loop je achter de feiten aan en mis je heel veel moois. In Webdesigner 97 bespreken we onder andere de nieuwe standaarden CSS4 en HTML5.1, leggen we uit wanneer je voor jQuery of JavaScript kiest en vertellen we je de best practices voor JavaScript.

Koop direct in onze webshop!

Deel dit artikel of reageer