Verander CodedUI spaghetti in een ordelijke lasagne

Ben je ook zo’n fan van lekker eten als ik? Heerlijk om weer eens naar Toscane te gaan en daar een simpele maar o-zo-lekkere pasta te eten. Spaghetti met een lekker glaasje Pinot Grigio. Heeeerlijk!! Iets minder lekker is het om na je vakantie te zien, dat er in Visual Studio opeens óók een bord spaghetti op je ligt te wachten. Dit keer is de liefde van de Italiaanse kok in geen enkele classfile meer terug te vinden, maar is deze vervangen door koude in elkaar gedraaide code. Je was begin dit jaar begonnen met het opzetten van een CodedUI project. Zoals beschreven op de Microsoft website http://msdn.microsoft.com/en-us/library/dd380782.aspx heb je netjes UIMaps aangemaakt en ben je zo verder gegaan. Het leek allemaal zo goed te gaan. Totdat er op een gegeven moment een nieuw team aan de software zat en de hele boel op zijn kop zette. Je moest alles weer opnieuw opnemen en nu heb je een bulk aan UIObjects die allemaal onduidelijke benamingen hebben. Je hebt wat testcases gefixt maar bent niet blij met het resultaat. Het lijkt er ook op dat je testscripts ontzettend langzaam zijn geworden. Basta! Je bent er klaar mee. Je wilt orde, structuur en netheid. Zoals in een lasagne, laagje voor laagje opgebouwd.

Als tester ben je geen developer, maar als je agile/scrum omhelst kan het geen kwaad om van je eiland af te komen en te gaan denken als een developer. Vraag hen wellicht om hulp en collaboreer om het probleem van slecht gestructureerde en onderhoudbare testscripts te tackelen.

Zet een laagstructuur op door gebruik te maken van Page Objects!

Het recept dat ik vervolgens heb gevolgd en ten zeerste kan aanraden, bestaat uit de volgende stappen:

1. Als je begint met een nieuw CodedUI project vraagt Visual Studio direct om je testcase op te nemen. Kies voor annuleren. Laat de UIMaps en de action recordings voor wat ze zijn en laat ze uiterst links liggen. Ik doe nog wel ‘iets’ met de opname functionaliteit. Hier ga ik in stap 3 op in.
   
2. Vervolgens ga je op basis van een pattern een nieuw project opzetten. Jullie kennen misschien wel het MVC pattern, wat staat voor Model-View-Contoller en wat veel wordt gebruikt op het moment, om goed onderhoudbare software te ontwikkelen. Het pattern wat ik heb omarmd is het Page Object Hierbij zet je het project op volgens OOP (Object Oriented Programming). Van elke pagina maak je een klasse en er wordt een klasse gemaakt voor de navigatie elementen en andere gemeenschappelijke elementen en acties. Elke pagina die het navigatiemenu deelt kan zo bij deze links komen of bijvoorbeeld bij een logout knop of shoppingcart. Zie hieronder hoe dat er in een diagram uit zou kunnen zien.
3. In deze klassen klik je dus op buttons, linkjes, geef je lijstjes terug ed. Om deze objecten te vinden zoals CodedUI ze herkent gebruik ik nog wel de record functionaliteit. Dus voeg een UIMap toe door Add > New Item… > Coded UI Test Map in je testproject uit te voeren. Hernoem dit naar UseOnlyForFindingObjects.uimap zodat iedereen weet waar je het voor gebruikt. Vervolgens start je de recorder en kun je mbv de crosshairs de elementen herkennen. Dit wil zeggen ik herken ze maar neem ze niet op als UIObject in mijn UIMap. Dit kun je ook doen met diverse development tools in browsers, maar dit is direct hoe Microsoft ze herkent. Zo heet een input veld bijvoorbeeld ControlType = HtmlEdit. Dat je vervolgens in je code kunt gebruiken om de control te vinden en er op te klikken.
   
   HtmlEdit NameEdit = new HtmlEdit(_browserWindow)
   NameEdit.SearchProperties
   .Add(HtmlEdit.SearchProperties.Id, "customerName")
   SendKeys(NameEdit, "Michelle")
   
   
4. Vervolgens is het laatste klusje gemakkelijk. Je maakt een TestClass aan via Add > CodedUiTest. Vanuit die klasse instantieer je de pagina waar je testcase begint en roep je de methodes aan die je daarop uit kunt voeren. Hierbij is het mooi als de methode, de pagina waar je bent nadat je actie is uitgevoerd Dit creëert namelijk heerlijk overzichtelijke testcases. Zoals hieronder in het voorbeeld. Smakelijk!
   
   HomePage HomePage = new HomePage();
   
   HomePage
   .AddProductToCart("camera" )
   .NavigateCheckOutPage()
   .RemoveProductFromCart("camera")
   .GetProductsFromCart().Should().Be(0);
   

NB: laatste regel is een assertion en checked of de waarde die je verwacht terugkomt. Ik gebruik hiervoor FluentAssertions. Download het pakket hier: https://www.nuget.org/packages/FluentAssertions/

Tot slot aftoppen met bechamelsaus en opdienen aan de business!

Om alles nog mooier te maken kun je uiteraard de parameters die je doorgeeft in je methodes vanuit een Excelsheet of Microsoft Test Manager laten komen. Dan heb je eigenlijk al een lasagne die je voor kunt schotelen aan business vertegenwoordigers ter acceptatie! Dan mogen zij een product opvoeren wat toegevoegd wordt aan een winkelkarretje en daarna weer wordt verwijderd.