Testen van progressive enhancement

Auteur
Maarten Groeneweg
Datum

Hoe test je progressive enhancement?

Progressive enhancement (PE) is een werkwijze waarbij de website in lagen opgebouwd wordt. Als een browser ondersteuning biedt voor een laag, dan zal die getoond worden. De basis laag is een HTML-pagina met de content. Buiten de semantische structuur zit er geen styling in. Het grote voordeel: deze werkt in iedere browser.

Maar wat verandert er voor een test engineer op het moment dat deze werkwijze gebruikt wordt? In dit artikel leg ik uit hoe ik dit in de praktijk aanpak. Mocht je nog niet zo bekend zijn met deze techniek dan raad ik je aan dit artikel van GOV.UK eerst even door te nemen.

Black vs. white box testen

Er zijn wat mij betreft twee manieren om met PE om te gaan als tester:

  1. Behandel de site als een black box. Verdiep je er niet in hoe de site technisch werkt. Je test op veel gebruikte browsers en devices en zo voorkom je het belangrijkste deel van de bugs.
  2. De white box benadering. Hiervoor moet je snappen uit welke lagen de site bestaat en hoe de feature detection werkt. Je test dan specifiek of de enhancements correct werken.

Zelf ben ik in het algemeen een groot voorstander van de white box aanpak. Door meer technische kennis van je testobject te hebben kan je namelijk efficiƫnter testen. Zo ook bij PE. Het simpel testen van een site in vijf browsers is namelijk niet genoeg. Want hoe werkt de site dan als iemand een extern ingeladen font blokkeert?

White box aanpak

De eerste laag bij progressive enhancement is de kale HTML. De rest is een nieuwe laag ofwel enhancement. Eigenlijk iedere site heeft de volgende enhancements: JavaScript, CSS, afbeeldingen en fonts. Maar vaak zijn er nog veel extra lagen. Bijvoorbeeld de ondersteuning van een specifieke CSS3 styling.

Om de enhancements goed te kunnen testen moet ik eerst weten welke er zijn. Daarnaast wil ik weten bij welke condities de laag getoond worden. Dit laatste wordt ook wel feature detection genoemd.

Daarom is het belangrijk om vooraf goed te overleggen met de frontend developer. Zo weet ik in ieder geval wat er getest moet worden.

Hoe test ik de lagen

Het liefst test ik iedere laag los van elkaar. Door te weten hoe de feature detection werkt kan ik op zoek naar een browser die de feature niet ondersteund. Een handige site daarbij is caniuse.com, die geeft een duidelijk overzicht van de browserondersteuning per functionaliteit.

Geen bugs meer?

Nee, helaas niet. Hoewel het met de moderne browsers steeds minder voorkomt, zijn er nog steeds verschillen tussen browsers. Ondanks dat progressive enhancement correct is toegepast en getest, kunnen er dus nog steeds problemen ontstaan.

Het is daarom verstandig om alsnog een korte test te doen in de browsers die samen goed zijn voor 80% van je bezoekers. Ja dat is wat dubbel werk maar voorkomt potentieel een hoop narigheid.

Moeilijk?

Progressive enhancement testen is in eerste instantie best lastig. Je hebt namelijk best veel kennis van frontend technieken nodig. Ook moet je begrijpen hoe de lagen in de te testen site zijn opgebouwd. Dat allemaal zelf uitzoeken kost inderdaad veel tijd. Daarom zorg ik ervoor dat ik nauw samenwerk met de frontenders. Ze helpen mij met hoe ik de site kan testen. En ik help hen door een kritische review van hoe de lagen opgebouwd gaan worden. En dat laatste kan al voordat er een regel code geschreven is.

Dus: Duik in de materie, zoek je frontender op en ga er mee aan de slag!

Tags

progressive enhancement Kwaliteit