Hvordan bruke Microsoft Coded UI Test til å teste komplisert innlogging

 

Microsoft Visual Studio har mange nyttige verktøy for testing av applikasjoner. Blant disse finner du Microsoft Coded UI Test. Dette er et nyttig verktøy for testing av brukergrensesnitt. Verktøyet kan brukes til å recorde et sett med handlinger og så spille disse av ved å kjøre testen etterpå. Underveis er det muligheter til å foreta sjekker på innholdet i brukergrensesnittet. For eksempel om tittelen på en artikkel er riktig eller at den innloggede brukerens navn vises når man har logget inn.

I denne introduksjonen vil jeg bruke innlogging til Altinn-portalen som et eksempel på hva man kan bruke Coded UI Test til. Innloggingen krever personnummer og 2 pinkoder, den andre pinkoden vet man ikke på forhånd. Dette gjør det hele litt mer komplisert å teste, men med Coded UI Test kan man redigere en recording i etterkant for å hente ut riktig pinkode. Hva en recording er vil gi mer mening lenger ned i artikkelen.

Jeg bruker Microsoft Visual Studio Premium.

 

1.       Oppretter nytt Test prosjekt

Jeg oppretter et nytt c# testprosjekt og gir prosjektet navnet MyFirstCodedUITestProject og trykker på OK.

createProject

 

2.       Legger til en Coded UI Test

For å legge til en test i prosjektet høyreklikker jeg  på prosjektet i solution explorer og velger Add->New Test…
Jeg velger så Coded UI Test og gir testen navnet “AltinnLoginCodedUITest.cs”.

 

 

3.       Record actions

Visual studio oppretter så filene du trenger i prosjektet og du får valget mellom å spille inn en recording eller å bruke en eksisterende. Jeg  velger Record actions da det ikke finnes noen recording fra før. Da starter Coded UI Test Builderen.

Jeg trykker så på record knappen. Alle stegene jeg gjør vil lagres etter hvert som de utføres. Det lønner seg å lagre recordingen i en metode hver gang man har utført en handling som kan være nyttig å gjenbruke.  Dette gjør man ved å trykke på generate code ikonet lengst til høyre nederst i Test Builderen. På forhånd har jeg satt Internett Explorer til å ha en blank start side “about:blank”.

Recordingen er nå startet og jeg trykker på start knappen->alle programmer->Internet Explorer. Du kan se at test builderen registrerte at en ny browser ble åpnet til en blank side. Denne recordingen kan være nyttig å bruke om igjen så jeg lagrer den ved å trykke på generate code knappen i Test Builderen. Jeg gir metoden navnet OpenNewBrowser og trykker på add and generate knappen. I bakgrunnen blir det generert kode.

 

I solution explorer kan du se en fil som heter UIMap.uitest og AltinnLoginCodedUITest.cs. Trykker du på + tegnet ved uitest filen kan man se to .cs filer, UIMap.cs og UIMap.Designer.cs. Den genererte koden ligger i designer klassen og metoden OpenNewBrowser blir lagret her.

Denne metoden blir kjørt fra en testmetode i AltinnLoginCodedUITest.cs

I denne metoden kan du høyreklikke og trykke run test for å spille av recordingen. Det er viktig å ikke røre musen eller tastaturet mens testen kjører. Testen vil fullføre uten feil om den klarer å åpne en ny browser til blank:about uten problemer.

 

4.       Legger til flere recorded action metoder

Jeg bruker så samme metode for å legge til noen flere recordinger til jeg kommer til innloggings siden som jeg vil teste. Rocordingene består av:

GoToAltinnWebPage
ClickLoginButton
ClickTilFlereInnloggingsMetoder

Jeg recorder første del av innloggingen ved å skrive inn fødselsnummer og pinkode 1 og trykker på continue. Pinkoden jeg får beskjed om å skrive inn leser jeg fra et pinkode ark.

Så kommer andre del av innloggins skjemaet hvor jeg får en random pinkode som må tastes inn. Jeg taster inn pinkoden og lagrer recordingen som FillInLoginFormPartTwoAndPressEnter. Problemet oppstår nå når man skal prøve å spille av denne recordingen. Pinkoden vil være forskjellig for hver gang man logger på.  Hvordan løser man så dette?

Ved litt nærmere undersøkelse ser man at det er en label som refererer til hvilken pinkode som skal skrives inn. Dette kan brukes ved at man sjekker labelen for hvilken pinkode det spørres etter og så hente ut denne i koden.

 

5.       Redigerer recording

Øverst i UIMap.Designer.cs står det at koden i fila blir autogenerert og at den ikke må endres. Dette betyr at jeg må redigere recordingen på en annen måte. Jeg kopier hele metoden og limer den inn i UIMap.cs og endrer navnet på metoden til FillInLoginFormPartTwoAndPressEnterModified. I tillegg endrer jeg metoden som blir kalt på i CodedUITestMethod1 i AltinnLoginCodedUITest.cs filen.

Jeg har nå en recording som kan modifiseres ved å endre koden. Vi skal nå gå igjennom hvordan recordingen kan redigeres til å hente ut riktig pinkode.

 

6.       Får tak i referanse til  pincode labelen

Det har ikke blitt generert noen referanse til labelen som inneholder hvilken pin som skal brukes. Dette kan løses ved å legge til en Assertion metode som sjekker labelen bare for å få generert denne referansen.

Jeg trykker og holder på crosshair ikonet på test builderen og drar den over labelen som inneholder teksten med informasjon om hvilken pinkode som skal brukes. Det vil komme en blå ramme rundt valg element før knappen slippes. Når dette er gjort kommer det opp et nytt vindu. Her velger jeg hvilken del av html elementet det skal legges en assertion på.

Jeg ser at InnerText  inneholder innholder nummeret på pinkoden jeg er ute etter. Jeg markerer InnerText ved å klikke på den og klikker så på Add Assertion.

Et nytt vindu spretter opp hvor jeg kan velge hvilken sjekk som skal utføres og hva det skal sjekkes mot. Jeg velger Contains i Comparator dropdown listen og i Comparison Value skriver jeg inn “Code” og trykker OK .

Når jeg klikker på generate code ikonet i Test Builderen kan jeg lagre sjekken som en metode akkuratt som recordingene jeg gjorde istad. Jeg gir metoden navnet “CheckThatPinCodeLabelContainsString”. Metoden vil bli generert på samme sted som de andre genererte metodene. Ved å se i denne metoden får jeg et hint til hvordan man kan få tak i referansen til teksten i labelen.

At det står tallet 12 i referansen til HtmlLabelen har ingen betydning. Dette er bare på grunn av hvordan navnene til variabler og referanser blir generert når recordinger lagres. Denne vil referere til riktig html element.

Jeg kan bruke samme framgangsmåte i FillInLoginFormPartTwoAndPressEnterModified recordingen for å få tak i teksten på labelen og deretter hente ut riktig pinkode.

Jeg sjekker om labelen innholder strengen “Code 1”, “Code 2”…… “Code <pin nummer>” og henter deretter opp riktig pinkode.

Nå kan jeg kjøre testen igjennom uten feil og kan fortsette å lage tester som sjekker funksjonalitet til en innlogget bruker.

 

7.       Konklusjon

Jeg mener Microsoft Coded UI Test er et kraftig og nyttig verktøy for å teste brukergrensesnitt, spesielt med tanke på regresjonstesting. Testene kan også kjøres automatisk på en testserver med jevne mellomrom. Dette fører til en bedre sikkerhet og selvtillit på at brukergrensesnittet til enhver tid fungerer som det skal.

Synes du dette var interessant og spennende? Kunne du tenkt deg å bruke dette til noe spesielt eller har spørsmål til innlegget? Legg igjen en kommentar under.

 

Det finnes mer informasjon om Coded UI Test og hvordan man kan automatisere slike tester på msdn: https://msdn.microsoft.com/en-us/library/dd286681.aspx.

 

 

Jan er konsulent i Visma Consulting. Han er utdannet Ingeniør i Simulering og Spillutvikling på Høgskolen i Buskerud. Primært jobber Jan med utvikling og testing.
Kontakt Jan: