In deze tutorial zullen we het Cypress Automation Framework in detail bespreken. We zullen in dit artikel bespreken wat Cypress is, hoe het verschilt van andere testkaders, de architectuur van Cypress en de installatieprocedure. Cypress is een spannend onderwerp en ook leuk om te leren. Laten we beginnen!

Cypress-automatiseringskader

Cypress Automation Framework is een pure op Javascript gebaseerde testtool die zich voornamelijk richt op front-end testen in moderne webapplicaties. Met Cypress zijn applicaties eenvoudig te testen met de visuele interface om getuige te zijn van de testuitvoering. Cypress is dus een zegen voor zowel ontwikkelaars als QA-engineers door het schrijven van scripts en het uitvoeren van tests eenvoudig te maken. Bovendien wordt het geleverd met een onderscheidende testrunner, waardoor DOM-manipulatie eenvoudig is en rechtstreeks in de browser wordt uitgevoerd.

Inhoudsopgave

Wat is cipres?

Cypress is sneller, beter en biedt definitieve tests die op een browser worden uitgevoerd. Cypress wordt voornamelijk vergeleken met Selenium, maar het is totaal anders. Cypress loopt niet bovenop Selenium, wat betekent dat het volledig onafhankelijk is. In plaats daarvan draait Cypress bovenop Mocha, wat weer een Javascript-rijk testraamwerk is. Het is alleen compatibel met de Chai Assertion Library, die toegang heeft tot een breed scala aan BDD- en TDD-bevestigingen.

Cypress richt zich voornamelijk op drie verschillende soorten testen. Dit zijn end-to-end-tests, unit-tests en integratietests. Cypress kan alle tests uitvoeren die in een browser kunnen worden uitgevoerd. Bovendien komt het samen met verschillende mocking-mogelijkheden en validaties die geboeid zijn naar front-end testen.

De browsers die Cypress ondersteunt zijn Chrome, Firefox, Edge, Electron en Brave. Bovendien is cross-browser testen gemakkelijk haalbaar met Cypress. Ten slotte, hoewel Cypress alleen Javascript ondersteunt, kan het ook worden geschreven met Typescript, voornamelijk geschreven met Javascript.

Cypress-automatisering

Cypress is een open-sourcetool met een gratis testrunner, maar heeft prijzen die variëren voor teams en bedrijven waarbij ze kosten in rekening brengen voor het dashboard. Dashboard is echter tot op zekere hoogte gratis, tenzij je extra functies hebt zoals Flake-detectie, e-mailondersteuning, Jira-integratie en nog veel meer.

Cypress wordt voornamelijk gebruikt om scripts op het web te automatiseren (kan alles automatiseren dat in een browser wordt uitgevoerd). Het kan nooit draaien op native mobiele apps, maar kan sommige functionaliteiten van de mobiele applicaties automatiseren als deze in een browser zijn ontwikkeld.

Voordelen

Er zijn veel geweldige functies beschikbaar in Cypress die zich onderscheiden van andere automatiseringstools. Laten we hier enkele van de belangrijkste functies bespreken, en we zullen later kennismaken met andere delen zodra we onze testcases beginnen te schrijven!

1. Automatisch wachten – Cypress heeft het voordeel van automatisch wachten. We hoeven nooit geforceerde wacht- en slaaptijden toe te voegen om te wachten tot de DOM het element ophaalt. Cypress wacht automatisch op elke interactie met elementen en uitvoering van beweringen. Testen zijn dus snel!
2. Tijdreizen – Cypress maakt screenshots tijdens de testuitvoering. We kunnen de resultaten visueel in realtime bekijken door de muisaanwijzer op de uitgevoerde opdrachten in het Dashboard te houden. Op deze manier zijn de tests gemakkelijker te debuggen
3. Foutopsporingstests - Cypress kan tests debuggen van populaire tools zoals ontwikkelaarstools. De fouten zijn leesbaar en stapels zijn gemakkelijk te traceren.
4. Stub-verzoeken - Cypress heeft opties om functiegedrag, netwerkreacties of timers die door stubs en spionnen worden gebruikt, te bevestigen en te controleren.
5. Continue integratie – Cypress is niet afhankelijk van andere aanvullende CI-services. Bij het uitvoeren van de opdracht voor de test is integratie echter gemakkelijk toegankelijk.

Mythe over Cypress

Er is een mythe dat Cypress alleen op Javascript-vriendelijke webapplicaties kan draaien. Cypress kan echter alle webapplicaties testen die zijn gebouwd met Django, Ruby on Rails, Laravel, enz. Bovendien ondersteunt Cypress alle programmeertalen zoals PHP, Python, Ruby, C#, enz. We schrijven onze tests echter in Javascript ; verder werkt Cypress op elke applicatie.

Componenten van Cypress

Er zijn twee hoofdcomponenten in Cypress. Zij zijn Testloper en Overzicht.

Testloper – Cypress biedt deze unieke testrunner, waar de gebruiker de opdrachten kan bekijken tijdens de uitvoering en de te testen applicatie.

Er zijn weinig subcomponenten onder Testrunner. Zij zijn

1. Opdrachtlogboek – Dit is een visuele weergave van de testsuite. U kunt de opdrachten zien die in de test zijn uitgevoerd, de details van de bewering en de testblokken.
2. Menu Teststatus – Dit menu toont het aantal testgevallen dat is geslaagd of mislukt en de uitvoeringstijd.
3. URL-voorbeeld - Dit geeft u informatie over de URL die u aan het testen bent om alle URL-paden bij te houden.
4. Viewport-formaat - U kunt de viewport-grootte van de app instellen voor het testen van verschillende responsieve lay-outs
5. App-voorbeeld – In deze sectie worden de opdrachten weergegeven die in realtime worden uitgevoerd. Hier kunt u Devtools gebruiken om elke basis te debuggen of te inspecteren.

Dashboard: Cypress Dashboard geeft toegang tot de tests die worden opgenomen. Met de Dashboard-service kunnen we het aantal geslaagde, mislukte of overgeslagen tests zien. We kunnen ook snapshots van de mislukte tests bekijken met behulp van cy. screenshot() commando. U kunt ook getuige zijn van de video van de hele test of de clip van de mislukte tests.

Cypress-architectuur

De meeste testtools draaien op de server buiten de browser en voeren opdrachten uit via het netwerk. Maar Cypress draait op de browser waar de applicatie ook draait. Op deze manier heeft het toegang tot alle DOM-elementen en alles in de browser.

Node-server draait achter de Cypress aan de clientzijde. Zo werken de node-server en Cypress met elkaar samen, begeleiden en voeren taken uit om de uitvoering te ondersteunen. Omdat het toegang heeft tot zowel de front- als back-end, is het reactievermogen op de applicatie in realtime tijdens de uitvoering goed bereikt en kan het ook taken uitvoeren die zelfs buiten de browser worden uitgevoerd.

Cypress werkt ook samen met de netwerklaag en legt opdrachten vast door het webverkeer te lezen en te wijzigen. Ten slotte stuurt Cypress HTTP-verzoeken en antwoorden van de knooppuntserver naar de browser. Omdat Cypress in de netwerklaag werkt, helpt het om de code aan te passen die de automatisering van de webbrowser zou kunnen verstoren. De communicatie tussen de Node-server en de browser verloopt via de WebSocket, die wordt uitgevoerd nadat de proxy is gestart.

Cypress beheert alle opdrachten die in en uit de browsers worden uitgevoerd. Omdat het op een lokale machine is geïnstalleerd, werkt het rechtstreeks samen met het besturingssysteem om video's op te nemen, snapshots te maken, toegang te krijgen tot de netwerklaag en op gemak bestandssysteembewerkingen uit te voeren. Cypress heeft toegang tot alles, van DOM, vensterobjecten, lokale opslag, netwerklaag en DevTools.

Cypress installeren

In deze sectie wordt het installatieproces besproken dat moet worden gevolgd voordat we onze testcases schrijven. Er zijn twee verschillende manieren om Cypress te downloaden. Zij zijn

1. Installeren via npm
2. Directe download

Voordat we Cypress installeren, hebben we mogelijk enkele vereisten nodig om de installatie via npm te starten. Laten we ze in detail bekijken.

Pre-requisites

We zullen bepaalde vereisten vereisen voordat we onze testcases schrijven.

• Zoals hierboven besproken, draait Cypress op een knooppuntserver; daarom zullen we Node.js moeten installeren.
• Om onze testcases te schrijven, hebben we ook een code-editor of IDE nodig.

In dit voorbeeld gebruiken we Visual Studio Code. Dus laten we in de details duiken.

Node.js-installatie op Mac

Hier zullen we de stappen bespreken om Node.js op Mac te downloaden. Navigeren naar https://nodejs.org/en/download/. U komt nu op de downloadpagina terecht.

1.Klik op het macOS-installatieprogramma. Als u erop klikt, vindt u hieronder een gedownload pakketbestand. Klik op het pkg-bestand om Node.js . te installeren

2. Zodra u op het .pkg-bestand klikt, wordt het Node-installatieprogramma geopend. Het introductiegedeelte geeft u de Node.js- en npm-versies. Klik op Doorgaan

3. Klik op de knop Akkoord en vervolgens op Doorgaan. Er verschijnt een pop-up die toegang geeft tot uw bestanden in de downloadmap. Klik op Oké.

4. In deze sectie kunt u de bestemming selecteren waarnaar Node.js moet worden gedownload. Nogmaals, u kunt kiezen op basis van uw systeemruimte. Hier kies ik de standaardlocatie.

5. Klik op de knop Installeren. Zodra u klikt, verschijnt er een pop-up waarin uw systeemwachtwoord wordt gevraagd. Voer uw wachtwoord in en klik op Software installeren.

6. Hoera! We hebben het Node.js- en npm-pakket geïnstalleerd. Klik op Sluiten om de installatie te voltooien.

Visual Studio Code-installatie op Mac

We hebben Node.js met succes geïnstalleerd. Laten we nu onze code-editor Visual Studio Code installeren. VS-code is een krachtige tool die alle ingebouwde functionaliteiten van Javascript heeft. Dus laten we een duik nemen in de installatiestappen van Visual Studio Code.

Hier zullen we de stappen bespreken om VS-code op Mac te downloaden. Navigeer eerst naar https://code.visualstudio.com/download om op de downloadpagina van VS-code te landen.

1. Klik op het Mac-pictogram. Hieronder ziet u hoe een pakket wordt gedownload.

2. Klik op het gedownloade bestand om het pakket uit te pakken. Eenmaal uitgepakt, kunt u de Visual Studio-code vinden in uw Downloads in Finder.

3. Hoera! We hebben onze code-editor gedownload. Klik op het pictogram om Visual Studio Code te openen.

Creatie van een nieuw Cypress-project

We zullen nu zien hoe we een nieuw knooppuntproject kunnen maken in onze Visual Studio Code. Zodra u op het VS-codepictogram klikt, komt u op de welkomstpagina. Klik vervolgens op de map Werkruimte toevoegen om een ​​nieuwe map te maken.

Zodra u op de map klikt, krijgt u een pop-up waarin u wordt gevraagd een nieuwe map toe te voegen. Klik nu op de locatie waar u de werkruimte wilt toevoegen. Klik vervolgens op Nieuwe map en voeg de mapnaam toe als CypressProject en klik op Openen.

Nu hebben we een map gemaakt voor onze Cypress-test. Voordat we beginnen met het schrijven van onze tests, moeten we het bestand package.json installeren. Laat ons, voordat u gaat installeren, begrijpen wat het package.json-bestand is.

Wat is het Package.json-bestand?

Package.json omvat alle npm-pakketten in een bestand, dat zich meestal in de hoofdmap van het project bevindt. Het bevindt zich gewoonlijk in de hoofdmap van het Node.js-project. Dit bestand bevat alle van toepassing zijnde metadata die nodig zijn voor het project. Het geeft alle informatie aan npm en helpt bij het identificeren van het project en het omgaan met afhankelijkheden. Package.json-bestand bevat informatie zoals projectnaam, versies, licentie, afhankelijkheden en nog veel meer.
Nu hebben we begrepen wat het package.json-bestand is. Laten we dus beginnen met de stappen om het bestand te downloaden in onze Visual Studio-code.

1. Om onze opdrachten uit te voeren, moeten we de Terminal openen. Klik bovenaan de VS-code op de terminal. Zodra de vervolgkeuzelijst wordt geopend, klikt u op Nieuwe terminal.

2. Zodra de terminal is geopend, typt u de onderstaande opdracht in de projectdirectory en drukt u op Enter.

npm init

3. Zodra u op Enter drukt, ziet u bepaalde informatie weergegeven. U kunt de vereiste details in de Terminal typen en op Enter drukken om alle velden te verkrijgen.

• Verpakkingsnaam: U kunt elke naam aan uw pakket geven. Ik heb het leeg gelaten omdat het vooraf is ingevuld met de mapnaam die we hebben gemaakt.
• Versie: Dit geeft de informatie over de versie van npm. U kunt dit overslaan en op Enter drukken.
• Omschrijving: Hier kunt u een stukje aanvullende informatie geven aan het pakket. Indien nodig kunt u de beschrijving typen en nogmaals op Enter drukken.
• Ingangspunt: Dit vertegenwoordigt het ingangspunt van de toepassing. Omdat het vooraf is ingevuld met index.js, kunnen we dit veld overslaan en op Enter drukken.
• Testopdracht: Opdracht die wordt gegeven om de test uit te voeren. Hier is het niet nodig om commando's te geven, maar indien nodig kun je zeker elk commando geven.
• Git-opslagplaats: Dit veld vereist het pad naar de git-repository. U kunt dit veld ook leeg laten.
• Trefwoorden: Unieke trefwoorden om het project te identificeren. U kunt dit veld ook overslaan.
• Auteur: Dit is meestal de gebruikersnaam van de persoon. U kunt uw naam toevoegen en op Enter drukken.
• Vergunning: Licentie is vooraf ingevuld met ISC. U kunt doorgaan door op Enter te drukken.

• 4. Zodra u op Enter drukt, vraagt ​​Terminal om bevestiging door alle details op te sommen die u hebt opgegeven. Type Ja en druk nogmaals op Enter.

We hebben nu een package.json-bestand gegenereerd. U kunt het bestand in uw code-editor bekijken met de informatie die we hebben verstrekt.

Installatiestappen van Cypress

We hebben alle vereisten voor onze Cypress download, node en geïnitialiseerde npm geïnstalleerd. Zoals hierboven vermeld, zijn er twee manieren om Cypress te downloaden.

Cypress downloaden via npm

U moet de onderstaande opdracht in de Terminal doorgeven om Cypress te installeren. Bovendien moet u de opdracht in de projectdirectory opgeven om het knooppunt te installeren en het bestand package.json gegenereerd.

npm install cypress --save-dev

Nadat u de opdracht hebt doorgegeven, worden alle relevante afhankelijkheden die voor het project zijn vereist, gedownload. Bij het schrijven van dit artikel is de nieuwste versie van Cypress: 7.7.0. De versie kan verschillen op het moment dat u aan het downloaden bent.

Aan de hand van de bovenstaande afbeelding kunt u zien dat we Cypress hebben gedownload. U kunt dit verifiëren door de gedownloade weergave in Terminal en de toevoeging van devDependencies in het package.json-bestand.

Directe download

We kunnen Cypress rechtstreeks downloaden van hun CDN als u het Node- of npm-pakket in het project niet gebruikt. Het opnemen van de testen in het Dashboard is echter niet mogelijk via directe download.

U kunt downloaden door hier rechtstreeks op Cypress downloaden te klikken link. Hiermee wordt het pakket nu direct gedownload. Zodra het pakket is gedownload, opent u het zipbestand en dubbelklikt u erop. Cypress zal draaien zonder dat er afhankelijkheden hoeven te worden geïnstalleerd. Deze download haalt altijd de nieuwste versie op en het platform wordt automatisch gedetecteerd. Het downloaden van Cypress via npm wordt echter aanbevolen in plaats van een directe download.

Ga voor meer berichten over technologie naar onze: Technologie pagina.

Aishwarya Lakshmi

Hallo...Ik ben Aishwarya Lakshmi, heb mijn B.Tech afgerond en heb bijna 2+ jaar ervaring in het testdomein. Ik ben een testliefhebber en gepassioneerd door testen. Ik ontdek graag nieuwe dingen in mijn vakgebied en deel deze met mijn collega's. Ik geniet ervan om in mijn vrije tijd blogs te schrijven op de eenvoudigste maar effectieve manier. Als tester houd ik ervan om dingen tot in de perfectie te hebben, dus ik wens dat mijn lezers de technologie perfect begrijpen. Ik houd mezelf op de hoogte van de nieuwe technologieën met betrekking tot testen en besteed tijd aan het begrijpen ervan. Ik help studenten graag de concepten bij het testen te begrijpen.