In dit document hebben we een aantal aanvullende opdrachten gezet om je verder bekend te laten worden met Cypress. Tijdens het spreekuur van maandag 12 november zijn we beschikbaar voor extra hulp hiermee. Op maandag 19 november zullen we er ook nog een keer gezamenlijk doorheen lopen. Tussendoor kun je natuurlijk ook altijd een mail sturen naar [email protected] en [email protected].

Begin met het downloaden van het voorbeeldproject.

Pak de zip uit op schijf en open een commandline in de map cypress-intro-master die je net gemaakt hebt. Installeer de benodigde afhankelijkheden met:

> npm install

Start vervolgens de testrunner met:

> npm run test

Om in een bekende omgeving te wennen aan Cypress gaan we wat simpele tests doen op de website van Squerist. Er is een beginnetje gemaakt in squerist.spec.js, de eerste stap is er al. Binnen de it gaan we de test aanvullen, doe dit door telkens 1 handeling en 1 controle toe te voegen en niet alle stappen in 1x, zodat het goed te volgen is.

• Navigeer naar de website van Squerist
• Klik op Testen
• Verifieer dat de titel Onze aanpak bevat.
• Klik op het linker menu Doelgericht (hint: dit element heeft id 2)
• Verifieer dat de tekst Volgens Squerist kunnen er met testen verschillende doelen behaald worden aanwezig is op de pagina.
• Klik op het linker menu Flexibel
• Verifieer dat er nergens squerist geschreven wordt, dat moet tenslotte met een hoofdletter.

Mocht je er niet uitkomen een aantal tips:

• Naar een pagina navigeren doen we met cy.visit. Zie de documentatie.
• Een element op de pagina opvragen (zodat we er iets mee kunnen doen) doen we met cy.get. Zie de documentatie.
• Soms is het lastig om de selector van een element te vinden. De Selector Playground kan dan van pas komen. Deze tool levert vaak niet de mooiste (kortste) selectors op dus het advies is om dit niet als primaire aanpak te gebruiken.
• Klikken op een element: .click Zie de documentatie.
• Eigenschappen van een element verifiëren kan met .should, zie de documentatie voor het gebruik. Should gebruikt assertions, kijk eens naar de common assertions.
• De FAQ van Cypress kan ook van pas komen als je op de bovenstaande pagina's niet vindt wat je zoekt.
• Van de genoemde technieken zijn ook simpele voorbeelden te zien in home.spec.js.

Bonus: Op de Onze aanpak pagina staan in de tekst ook linkjes naar de subpagina's. Maak een nieuwe test waarmee je test of die linkjes werken en naar dezelfde pagina leiden.

Open google.spec.js in de testrunner en in een tekst editor.

De test bevat een fout en faalt. Herstel de fout en zorg dat de test op groen komt.

Maak nu ook tests die verifiëren dat de zoekmachines DuckDuckGo en WolframAlpha het juiste antwoord ook kennen.

Tip: In tegenstelling tot Google gebruiken deze zoekmachines allebei een duidelijk id attribuut voor het zoekveld. Je kunt deze dus makkelijk met cy.get('#id') selecteren in de test.

Maak tot slot een test die checkt dat ook Bing het antwoord in de zoekresultaten heeft staan.

We gebruiken voor het testen van een formulier een site met een voorbeeld van formuliervalidatie.

Open formulier.spec.js in de testrunner en in een tekst editor.

Het navigeren naar de voorbeeldpagina is al geïmplementeerd. Je ziet ook al een drietal tests staan, maak deze af.

Gebruik hiervoor de volgende commando's:

• type('stukje tekst') om een stukje tekst te typen
• select('optie') om optie te selecteren in een dropdown
• check('optie') om optie aan te vinken
• click() om op een knop te klikken

Vul tot slot de tests aan totdat alle velden die foutmeldingen kunnen opleveren getest zijn.