Introductie testtooling Wink SYSQA B.V. Almere Datum : 10-04-2013 Status : 1.0 Opgesteld door :
Organisatie SYSQA B.V. Pagina 2 van 16 Inhoudsopgave 1 Inleiding... 3 1.1 Opbouw... 3 2 Wink... 4 2.1 Wat is Wink... 4 2.2 Wanneer te gebruiken (entry-strategy)... 4 2.3 Voor- en nadelen... 4 2.4 Links voor verdere informatie... 4 3 Installatie uitleg... 5 4 Quick reference... 8 4.1 Iconen... 8 4.2 New project wizard... 8 4.3 Render instellingen... 9 5 Case Wink... 11 5.1 Opnemen...11 5.2 Bewerken...13 5.3 Afspelen...15
Organisatie SYSQA B.V. Pagina 3 van 16 1 Inleiding Dit document dient als introductie voor de medewerkers die kennis willen opdoen van Wink. Wink is een applicatie voor het opnemen, bewerken en afspelen van series van screenshots. Bij testen kan Wink nuttig zijn omdat de testsessie opgenomen kan worden en later afgespeeld kan worden. Zowel ontwikkelaar als de opdrachtgever kunnen zonder uitleg zien wat de tester heeft uitgevoerd en welke volgorde van handelingen de bug/bevinding heeft veroorzaakt. 1.1 Opbouw document Deze introductie heeft tot doel om Wink toe te lichten. Het document dient als basis bij installatie en initieel gebruik. Deze introductie biedt handvaten om aan de slag te gaan met de beginselen van de testtool. Hoofdstuk 2 geeft een korte inleiding op wat Wink is en kan, in welke omgeving het gebruikt kan worden, wat de voor- en nadelen zijn en links voor verdere informatie In hoofdstuk 3 wordt stap voor stap de installatie beschreven. In hoofdstuk 4 wordt aan de hand van een quick reference de belangrijkste functionaliteiten en mogelijkheden aangestipt. In hoofdstuk 5 wordt een case uitgewerkt, vooral bedoeld om alvast een kijkje te nemen in de werking van de tool.
Organisatie SYSQA B.V. Pagina 4 van 16 2 Wink 2.1 Wat is Wink Wink is van oorsprong ontwikkeld als een open-source tool voor het opnemen, bewerken en afspelen van series van screenshots. Screenshots worden op basis van acties (keyboard input en/of mouseclicks) of op basis van het ingestelde aantal shots per uur/minuut/seconde gemaakt. Indien gewenst kan er op ieder moment een extra screenshot gemaakt worden. Vervolgens kan men de screenshots bewerken door vormen, tekstvakken, audio en/of URL s toe te voegen. Nadat het opnemen en bewerken klaar is, kan men de screenshots renderen tot een videoclip. Deze eigenschappen zorgen ervoor dat Wink goed te gebruiken is voor het opnemen, bewerken en afspelen van een testsessie. 2.2 Wanneer te gebruiken (entry-strategy) Wink is het beste te gebruiken in een Agile omgeving, waarbij getest wordt volgens de Exploratory testing methode. De opnames kunnen direct doorgenomen worden met de relevante personen, zodat zij een duidelijk en helder beeld hebben van hoe het systeem reageert op bepaalde handelingen. 2.3 Voor- en nadelen 2.3.1 Voordelen Gratis (Open source). Makkelijk te installeren op diverse platformen (Windows / Linux). De mogelijkheid om de opgenomen dia s te renderen naar een videoclip zorgt ervoor dat de tester heel makkelijk kan laten zien wat hij/zij heeft gedaan. 2.3.2 Nadelen Het openen van de applicatie en renderen van dia s kost verwerkingstijd. 2.4 Links voor verdere informatie Officiële website: http://www.debugmode.com/wink/ Uitgebreide tutorial: http://www.youtube.com/watch?v=9kzcaszdrim
Organisatie SYSQA B.V. Pagina 5 van 16 3 Installatie uitleg Dit hoofdstuk beschrijft het download- en installatieproces van Wink. Ga naar de website van de ontwikkelaar van Wink; Debugmode: http://www.debugmode.com/wink/download.htm Selecteer Download direct from Het volgende scherm verschijnt. Klik op [OK].
Organisatie SYSQA B.V. Pagina 6 van 16 Kies de gewenste locatie van de Wink applicatie. Dubbelklik op het gedownloade bestand wink20.exe. Klik op [I Agree]
Organisatie SYSQA B.V. Pagina 7 van 16 Selecteer de locatie waar Wink geinstalleerd moet worden en click [Install] Na het installeren zullen de volgende schermen verschijnen: Als het gewenst is dat Wink in het Start menu verschijnt klik [Ja]. Zo niet, klik [Nee]. Indien gewenst kan de Readme file gelezen worden. Wink is geïnstalleerd en klaar voor gebruik.
Organisatie SYSQA B.V. Pagina 8 van 16 4 Quick reference Bij het gebruik van Wink zijn er bepaalde elementen die vaak voor zullen komen. Deze elementen zullen hieronder toegelicht worden. 4.1 Iconen Icoon Beschrijving Open nieuw project Instellingen Toevoegen van audio bij geselecteerde frame Toevoegen van afbeelding bij geselecteerde frame Toevoegen van vorm(en) bij geselecteerde frame Toevoegen van tekstvak bij geselecteerde frame Toevoegen van terug naar eerste dia knop bij geselecteerde frame Toevoegen van ga naar volgende dia knop bij geselecteerde frame Toevoegen van ga naar URL knop bij geselecteerde frame Toevoegen van ga naar dia X knop bij geselecteerde frame Renderen van frames Bekijken van gerenderde output 4.2 New project wizard 1. De opname laten starten met een screenshot j/n 2. Audio ook opnemen j/n 3. Wink venster verbergen j/n 4. Dropdown menu waarin opname bereik wordt gekozen
Organisatie SYSQA B.V. Pagina 9 van 16 5. In deze velden staan de coördinaten op het beeldscherm waarbinnen het opnamegebied valt. Met deze instellingen kan behalve het hele scherm, ook een gedeelte van het beeldscherm worden opgenomen. Het opnamegebied is een rechthoek waarvan de locatie wordt berekend van linksboven. Wanneer bijvoorbeeld een rechthoek van 500 pixels breed en 400 pixels hoog in de linkerbovenhoek moet worden opgenomen, dan is region gevuld met 0 (links) en 0 (boven) x 500 (pixels naar rechts) en 400 (pixels naar beneden). 6. Hier moet aangegeven worden hoeveel screenshots per seconde, minuut of uur gemaakt worden. 7. Bij iedere mouseclick een screenshot j/n 8. Iedere keer dat een keyboard / muisknop wordt gebruikt een screenshot j/n 9. Als de muisknop is ingedrukt (bijvoorbeeld bij klikken & slepen): screenshots op basis van tijdsinterval (zie 6) j/n 4.3 Render instellingen Links Boven Rechts Onder 1. Naam bestand en gewenste locatie van bestand 2. Soort bestand (kleinste output is Macromedia Flash) 3. Wel of niet een preloader en welke preloader. Een preloader is een voortgangsbalkje die wordt getoond gedurende de laadtijd van het filmpje.
Organisatie SYSQA B.V. Pagina 10 van 16 4. Wel of niet een control bar en welke control bar 5. Instelling voor beweging van cursor 6. Snelheid van frames
Organisatie SYSQA B.V. Pagina 11 van 16 5 Case Wink In deze case zullen de belangrijkste functionaliteiten van Wink behandeld worden. Als eerste zal gekeken worden naar de handelingen voor de opnames. 1 Vervolgens komen een paar mogelijkheden langs m.b.t. het bewerken van de opgenomen dia s. Dit zijn de functionaliteiten Toevoegen van terug naar eerste dia knop, Toevoegen van ga naar volgende dia knop en Toevoegen van ga naar dia X knop. Indien gewenst kan de lezer van dit document ook andere bewerk-functionaliteiten gebruiken. Als laatste wordt er gekeken naar de render- en afspeelmogelijkheden van de opgenomen frames. Ook hier wordt de exacte invulling aan de lezer overgelaten. 5.1 Opnemen De case begint met het opnemen van een serie screenshots. Ga hiervoor naar de applicatie Wink. Klik op om een nieuw project op te starten. Het venster hieronder verschijnt. Klik op [OK] nadat de gewenste instellingen zijn doorgevoerd. 1 De lezer van dit document moet zelf bepalen welke vorm wordt gegeven aan de opname. Voor het opstellen van dit document zijn www.sysqa.nl, intranet.sysqa.nl en Word opgenomen met een totaal aantal screenshots van 42.
Organisatie SYSQA B.V. Pagina 12 van 16 Het venster hieronder verschijnt. Er kan gekozen worden voor Timed capture waarbij er per seconde/minuut/uur een X aantal screenshots worden gemaakt. Bij Input-driven capture worden er screenshots gemaakt bij het klikken van de muis en/of bij het gebruiken van het toetsenbord. Voor deze case is er gekozen voor Timed capture. Zoals eerder aangegeven is het aan de lezer van dit document hoe lang de opname gemaakt wordt en wat er opgenomen wordt. Toets Shift+Pause in om de opname te starten. Open browser en vul www.sysqa.nl in adresbalk. Ga naar diensten pagina. Open nieuw tabblad en vul intranet.sysqa.nl. Ga naar nieuws pagina. Open een Word en toets een aantal regels tekst. Toets pause in om tijdens de opname een extra screenshot te maken. Toets de eerder gekozen toetsen combinatie (Shift+Pause) in om opname te stoppen. Klik op.
Organisatie SYSQA B.V. Pagina 13 van 16 De screenshots worden als dia s getoond. 5.2 Bewerken Teneinde screenshots te bewerken moeten de buttons in het rode kader worden gebruikt. Klik op om een ga naar eerste dia knop toe te voegen. Videoclip zal stoppen op frame(s) waar deze functionaliteit is toegevoegd. Klik op om een ga naar volgende dia knop toe te voegen. Videoclip zal stoppen op frame(s) waar deze functionaliteit is toegevoegd. Klik op om een koppeling naar een dia toe te voegen. Videoclip zal stoppen op frame(s) waar deze functionaliteit is toegevoegd.
Organisatie SYSQA B.V. Pagina 14 van 16 Klik op [Insert Frames] om extra frame(s) in te voegen Het venster hieronder verschijnt. Kies de gewenste opties.
Organisatie SYSQA B.V. Pagina 15 van 16 5.3 Afspelen Nu de screenshots zijn bewerkt, kan er een filmpje van gemaakt worden. Klik in de Toolbar op om de dia s te renderen. Het venster hieronder verschijnt. Kies de gewenste instellingen en klik op [OK]. De dia s worden gerenderd. Klik op om gerenderde output te bekijken in standaardbrowser Het.swf bestand kan in elke browser met de Macromedia Flash plugin afgespeeld worden. Indien deze plugin niet geïnstalleerd is kan het hier 2 gedownload worden. 2 http://www.adobe.com/nl/shockwave/download/triggerpages_mmcom/flash.html
Organisatie SYSQA B.V. Pagina 16 van 16 Het bestand wordt afgespeeld in de standaardbrowser en stopt bij frame(s) waar 1 of meer van de volgende knoppen is geplaatst: (Zie rode kader op afbeelding hieronder). Klik op de gewenste actie om videoclip verder af te spelen. De belangrijkste functionaliteiten van Wink zijn hiermee behandeld.