Cypress testing: kvalitný nástroj na jednoduché testovanie webových aplikácií

Chceš získať prehľad o najpoužívanejšom nástroji automatizovaného testovania v súčasnosti? Čo je Cypress, aké sú výhody jeho používania a ako začať s jeho používaním pre testovanie webových aplikácií, sa dozvieš v článku.

Čo je Cypress.io?

Cypress je open source testovací framework pre webové aplikácie, ktorý používa programovací jazyk JavaScript. Aktuálne je jedným z najpopulárnejších nástrojov pre automatizované testovanie webových aplikácií a jeho popularita neustále rastie (prečítaj si aj články Automatizované testovanie procesAutomatizované testovanie nástroje). Umožňuje písanie end-to-end a component testov a je navrhnutý tak, aby mohol byť ľahko a rýchlo implementovaný do akéhokoľvek projektu.

Hlavné výhody Cypress testingu

Cypress je navrhnutý tak, aby jeho používanie bolo jednoduché aj pre začiatočníkov v oblasti testovania.  Nevyžaduje komplexné znalosti Javascriptu, čo znamená, že tento nástroj môžeš používať i bez hlbších znalostí programovania. Ponúka ľahko zrozumiteľnú syntax a API, ktoré je navrhnuté tak, aby bolo prístupné vývojárom a testerom s rôznymi úrovňami vedomostí.

Jednou z kľúčových výhod Cypress je, že je kompatibilný s populárnymi frontendovými frameworkami, ako sú React, Angular a Vue a umožňuje spúšťanie testov priamo vo webovom prehliadači, čím eliminuje nutnosť použitia externého WebDriveru. To vedie k rýchlejším a efektívnejším testom.

Čo sa týka funkcií, ich rozsah je široký a sú špecificky navrhnuté pre testovanie moderných webových aplikácií. Nájdeš tu rôzne pokročilé nástroje pre debugging, možnosť „time-travel“ pre návrat k predchádzajúcim stavom aplikácie a ľahkú integráciu so systémami pre kontinuálnu integráciu (Continuous Integration – CI).

Cypress vs ostatné testovacie nástroje

Cypress ponúka niekoľko výhod oproti iným nástrojom pre automatizáciu testovania. Jednou z týchto výhod je, že Cypress beží v rovnakom prehliadači ako používateľská aplikácia. To znamená, že môže presne simulovať používateľské akcie, ako sú kliknutia na tlačidlá, vstupné polia alebo rolovanie stránky. Cypress tiež poskytuje možnosť testovania v reálnom čase a zobrazovania vizuálnych kontrolných bodov, čo umožňuje vývojárom sledovať a diagnostikovať chyby.

Okrem testovacích funkcií Cypress obsahuje aj množstvo ďalších funkcií, ktoré môžu byť užitočné pre vývojárov, ako napríklad možnosť zaznamenávať a prehrávať testy a vytvárať snímky obrazovky alebo videá z testovacích behov.

Cypress vs Selenium

Cypress a Selenium sú oba populárne nástroje pre automatizované testovanie, ale majú niekoľko kľúčových rozdielov. Tu sú niektoré z hlavných rozdielov medzi Cypress a nástrojom Selenium:

Architektúra – Cypress vs Selenium

Cypress je postavený na novšej architektúre, ktorá mu umožňuje byť rýchlym a spoľahlivým nástrojom. Beží priamo v prehliadači v rovnakom čase ako tvoja aplikácia. Na druhej strane, Selenium bol pôvodne vyvinutý ako rozšírenie prehliadača, ktorého výkon môže byť ovplyvnený rôznymi faktormi, ako napríklad verzia prehliadača a operačného systému.

Syntax a API – Cypress vs Selenium

Selenium podporuje viacero programovacích jazykov, ako sú Java, C#, Python, Ruby  a JavaScript. Selenium nie je však nástroj vhodný pre API testing. Rozšírenie o API testing tu síce možné je, bude si však vyžadovať pomoc iných nástrojov alebo knižnice.

Cypress používa ako svoj hlavný jazyk pre písanie testov Javascript. Navyše poskytuje jednoduché a výkonné API, ktoré je špecificky navrhnuté pre testovanie webových aplikácií.

Rýchlosť

Cypress je považovaný za rýchlejší nástroj pre automatizované testovanie webových aplikácií. Testy sú rýchlejšie, nakoľko bežia priamo v prehliadači a ty môžeš sledovať správanie aplikácie v aktuálnom čase.

Debugovanie

Zatiaľ čo debugovanie v Seleniu sa spolieha na tradičné techniky ako breakpointy, logovanie a využitie špecifických vývojárskych nástrojov daných prehliadačom, Cypress poskytuje rôzne rozšírené funkcie pre  debugovanie testov (debugovanie prostredníctvom test runnera, možnosť „time-travel“ pre návrat k predchádzajúcim stavom aplikácie), čo uľahčuje riešenie problémov s testami.

Podpora webových prehliadačov (web browsers)

V tomto bode má jednoznačnú prevahu Selenium, pretože podporuje všetky známe prehliadače vrátane Edge, Chrome, Safari, Firefox, dokonca IE (Internet Explorer). Cypress je limitovaný na použitie Chromium prehliadačov a Firefoxu. Ak teda potrebuješ tvoju aplikáciu testovať napr. v Safari alebo IE (napriek tomu, že bol nahradený prehliadačom Edge), budeš sa musieť rozhodnúť pre iný testovací nástroj.

Vo výbere medzi Selenium a Cypress záleží na konkrétnych potrebách a preferenciách. Selenium je etablovaný framework s rozsiahlym ekosystémom a podporou pre rôzne jazyky. Cypress ponúka moderné a vývojársky prívetivé prostredie s vstavanými nástrojmi pre jednoduchšie písanie a debugovanie testov.

Best practices – osvedčené postupy

Pri používaní Cypressu je dôležité dodržiavať niekoľko overených zásad, testy tak budú efektívnejšie a budú ti vedieť poskytnúť okamžitú spätnú väzbu o stave a kvalite aplikácie. Tu je zoznam niektorých z hlavných zásad pri práci so Cypressom:

1. Využívanie data atribútov pri selektovaní elementov

Využívanie data atribútov ako data-cy alebo data-test id ti ušetrí mnoho problémov. Tvoja aplikácia totiž môže používať dynamické triedy alebo identifikátory (IDs), ktoré sa môžu pravidelne meniť. Na rozdiel od nich sú data atribúty vytvorené priamo pre účely testovania, sú teda rezistentné voči CSS a JS aktualizáciám.

Kód z nástroja Cypress využívajúci atribút „data-cy“
Ukážka kódu z nástroja Cypress s atribútom „data-cy“

2. Písanie atomických a špecificky zameraných testov

Rozdelenie testov do samostatných scenárov pomáha udržiavať kód prehľadný a jednoduchý na úpravu. Každý scenár by mal testovať konkrétnu funkcionalitu alebo vlastnosť (feature) aplikácie. Pri organizácii testov využívaj tzv. describe bloky, zlepšíš tak ich čitateľnosť.

Chceš získať prehľad o najpoužívanejšom nástroji automatizovaného testovania v súčasnosti? Čo je Cypress, aké sú výhody jeho používania a ako začať s jeho používaním pre testovanie webových aplikácií, sa dozvieš v článku.Čo je Cypress.io? Cypress je open source testovací framework pre webové aplikácie, ktorý používa programovací jazyk JavaScript. Aktuálne je jedným z najpopulárnejších nástrojov pre automatizované testovanie webových aplikácií a jeho popularita neustále rastie (prečítaj si aj články Automatizované testovanie proces a Automatizované testovanie nástroje). Umožňuje písanie end-to-end a component testov a je navrhnutý tak, aby mohol byť ľahko a rýchlo implementovaný do akéhokoľvek projektu. Hlavné výhody Cypress testingu Cypress je navrhnutý tak, aby jeho používanie bolo jednoduché aj pre začiatočníkov v oblasti testovania. Nevyžaduje komplexné znalosti Javascriptu, čo znamená, že tento nástroj môžeš používať i bez hlbších znalostí programovania. Ponúka ľahko zrozumiteľnú syntax a API, ktoré je navrhnuté tak, aby bolo prístupné vývojárom a testerom s rôznymi úrovňami vedomostí. Jednou z kľúčových výhod Cypress je, že je kompatibilný s populárnymi frontendovými frameworkami, ako sú React, Angular a Vue a umožňuje spúšťanie testov priamo vo webovom prehliadači, čím eliminuje nutnosť použitia externého WebDriveru. To vedie k rýchlejším a efektívnejším testom. Čo sa týka funkcií, ich rozsah je široký a sú špecificky navrhnuté pre testovanie moderných webových aplikácií. Nájdeš tu rôzne pokročilé nástroje pre debugging, možnosť „time-travel“ pre návrat k predchádzajúcim stavom aplikácie a ľahkú integráciu so systémami pre kontinuálnu integráciu (Continuous Integration - CI). Cypress vs ostatné testovacie nástroje Cypress ponúka niekoľko výhod oproti iným nástrojom pre automatizáciu testovania. Jednou z týchto výhod je, že Cypress beží v rovnakom prehliadači ako používateľská aplikácia. To znamená, že môže presne simulovať používateľské akcie, ako sú kliknutia na tlačidlá, vstupné polia alebo rolovanie stránky. Cypress tiež poskytuje možnosť testovania v reálnom čase a zobrazovania vizuálnych kontrolných bodov, čo umožňuje vývojárom sledovať a diagnostikovať chyby. Okrem testovacích funkcií Cypress obsahuje aj množstvo ďalších funkcií, ktoré môžu byť užitočné pre vývojárov, ako napríklad možnosť zaznamenávať a prehrávať testy a vytvárať snímky obrazovky alebo videá z testovacích behov. Cypress vs Selenium Cypress a Selenium sú oba populárne nástroje pre automatizované testovanie, ale majú niekoľko kľúčových rozdielov. Tu sú niektoré z hlavných rozdielov medzi Cypress a nástrojom Selenium: Architektúra - Cypress vs Selenium Cypress je postavený na novšej architektúre, ktorá mu umožňuje byť rýchlym a spoľahlivým nástrojom. Beží priamo v prehliadači v rovnakom čase ako tvoja aplikácia. Na druhej strane, Selenium bol pôvodne vyvinutý ako rozšírenie prehliadača, ktorého výkon môže byť ovplyvnený rôznymi faktormi, ako napríklad verzia prehliadača a operačného systému. Syntax a API - Cypress vs Selenium Selenium podporuje viacero programovacích jazykov, ako sú Java, C#, Python, Ruby a JavaScript. Selenium nie je však nástroj vhodný pre API testing. Rozšírenie o API testing tu síce možné je, bude si však vyžadovať pomoc iných nástrojov alebo knižnice. Cypress používa ako svoj hlavný jazyk pre písanie testov Javascript. Navyše poskytuje jednoduché a výkonné API, ktoré je špecificky navrhnuté pre testovanie webových aplikácií. Rýchlosť Cypress je považovaný za rýchlejší nástroj pre automatizované testovanie webových aplikácií. Testy sú rýchlejšie, nakoľko bežia priamo v prehliadači a ty môžeš sledovať správanie aplikácie v aktuálnom čase. Debugovanie Zatiaľ čo debugovanie v Seleniu sa spolieha na tradičné techniky ako breakpointy, logovanie a využitie špecifických vývojárskych nástrojov daných prehliadačom, Cypress poskytuje rôzne rozšírené funkcie pre debugovanie testov (debugovanie prostredníctvom test runnera, možnosť „time-travel“ pre návrat k predchádzajúcim stavom aplikácie), čo uľahčuje riešenie problémov s testami. Podpora webových prehliadačov (web browsers) V tomto bode má jednoznačnú prevahu Selenium, pretože podporuje všetky známe prehliadače vrátane Edge, Chrome, Safari, Firefox, dokonca IE (Internet Explorer). Cypress je limitovaný na použitie Chromium prehliadačov a Firefoxu. Ak teda potrebuješ tvoju aplikáciu testovať napr. v Safari alebo IE (napriek tomu, že bol nahradený prehliadačom Edge), budeš sa musieť rozhodnúť pre iný testovací nástroj. Vo výbere medzi Selenium a Cypress záleží na konkrétnych potrebách a preferenciách. Selenium je etablovaný framework s rozsiahlym ekosystémom a podporou pre rôzne jazyky. Cypress ponúka moderné a vývojársky prívetivé prostredie s vstavanými nástrojmi pre jednoduchšie písanie a debugovanie testov. Best practices – osvedčené postupy Pri používaní Cypressu je dôležité dodržiavať niekoľko overených zásad, testy tak budú efektívnejšie a budú ti vedieť poskytnúť okamžitú spätnú väzbu o stave a kvalite aplikácie. Tu je zoznam niektorých z hlavných zásad pri práci so Cypressom: 1. Využívanie data atribútov pri selektovaní elementov Využívanie data atribútov ako data-cy alebo data-test id ti ušetrí mnoho problémov. Tvoja aplikácia totiž môže používať dynamické triedy alebo identifikátory (IDs), ktoré sa môžu pravidelne meniť. Na rozdiel od nich sú data atribúty vytvorené priamo pre účely testovania, sú teda rezistentné voči CSS a JS aktualizáciám. Alt tag: Kód z nástroja Cypress využívajúci atribút „data-cy“ Názov: Cypress testing kód 1 Titulok: Ukážka kódu z nástroja Cypress s atribútom „data-cy“ Popis: Ukážka kódu z nástroja Cypress s atribútom „data-cy“ 2. Písanie atomických a špecificky zameraných testov Rozdelenie testov do samostatných scenárov pomáha udržiavať kód prehľadný a jednoduchý na úpravu. Každý scenár by mal testovať konkrétnu funkcionalitu alebo vlastnosť (feature) aplikácie. Pri organizácii testov využívaj tzv. describe bloky, zlepšíš tak ich čitateľnosť. Alt tag: Kód z nástroja Cypress využívajúci bloky „describe“ Názov: Cypress testing kód 2 Titulok: Ukážka kódu z nástroja Cypress s blokmi „describe“ Popis: Ukážka kódu z nástroja Cypress s blokmi „describe“ 3. Používanie vlastných príkazov (Custom Commands) a fixtures: Definuj si vlastné príkazy, ktoré zjednodušia opakujúce sa úlohy, ako napríklad prihlasovanie sa alebo vypĺňanie formulárov. Používanie fixtures umožňuje ukladať testovacie dáta do externých súborov, ako sú JSON, CSV alebo XML. Testovacie data tak budeš vedieť opakovane používať v rôznych testoch alebo scenároch. Výhodou používania fixture príkazov je i možnosť generovania dynamických testovacích dát, ako sú náhodné e-maily alebo heslá. 4. Využívanie integrovaných nástrojov pre debugovanie testov Nauč sa využívať príkazy ako cy.log() na výpis správ do Cypress konzoly, cy.pause() na prerušenie testu a otvorenie Test Runnera, cy.debug() na otvorenie prehliadačového debugera, a cy.screenshot() na zachytenie snímky obrazovky. Cypress tutorial Ak ťa tento testovací nástroj zaujal, avšak pre pochopenie a použitie by si potreboval podrobnejšie informácie a príklady, oficiálnu Cypress dokumentáciu nájdeš na webovej stránke Cypress. Vývojársky tím navyše prispieva pravidelnými aktualizáciami a poskytuje svojim používateľom slušnú podporu. Okrem oficiálnej dokumentácie máš k dispozícii i aktívnu Cypress komunitu, kde nájdeš okrem ďalších príkladov aj návody a odpovede na otázky od ďalších používateľov. Cypress je stále populárnejšou voľbou pre automatizáciu testovania webových aplikácií, a to nielen v komunite open-source, ale aj v komerčnom prostredí. Jeho flexibilita, výkonnosť a jednoduchosť použitia robia z Cypressu významný nástroj v arzenáli vývojárov a testerov, ktorí sa zameriavajú na zabezpečenie kvality webových aplikácií. S jeho pomocou môžeš testovať kvalitu svojich webových aplikácií, zlepšiť kvalitu kódu a ušetriť čas pri testovaní.
Ukážka kódu z nástroja Cypress s blokmi „describe“

3. Používanie vlastných príkazov (Custom Commands) a fixtures:

Definuj si vlastné príkazy, ktoré zjednodušia opakujúce sa úlohy, ako napríklad prihlasovanie sa alebo vypĺňanie formulárov.

Používanie fixtures umožňuje ukladať testovacie dáta do externých súborov, ako sú JSON, CSV alebo XML. Testovacie data tak budeš vedieť opakovane používať v rôznych testoch alebo scenároch. Výhodou používania fixture príkazov je i možnosť generovania dynamických testovacích dát, ako sú náhodné e-maily alebo heslá.

4. Využívanie integrovaných nástrojov pre debugovanie testov

Nauč sa využívať príkazy ako cy.log() na výpis správ do Cypress konzoly, cy.pause() na prerušenie testu a otvorenie Test Runnera, cy.debug() na otvorenie prehliadačového debugera, a cy.screenshot() na zachytenie snímky obrazovky.

Cypress tutorial

Ak ťa tento testovací nástroj zaujal, avšak pre pochopenie a použitie by si potreboval podrobnejšie informácie a príklady, oficiálnu Cypress dokumentáciu nájdeš na webovej stránke Cypress. Vývojársky tím navyše prispieva pravidelnými aktualizáciami a poskytuje svojim používateľom slušnú podporu.

Okrem oficiálnej dokumentácie máš k dispozícii i aktívnu Cypress komunitu, kde nájdeš okrem ďalších príkladov aj návody a odpovede na otázky od ďalších používateľov.

Cypress je stále populárnejšou voľbou pre automatizáciu testovania webových aplikácií, a to nielen v komunite open-source, ale aj v komerčnom prostredí. Jeho flexibilita, výkonnosť a jednoduchosť použitia robia z Cypressu významný nástroj v arzenáli vývojárov a testerov, ktorí sa zameriavajú na zabezpečenie kvality webových aplikácií. S jeho pomocou môžeš testovať kvalitu svojich webových aplikácií, zlepšiť kvalitu kódu a ušetriť čas pri testovaní.

Ak vieš po nemecky a si IT tester alebo automatizovaný tester, pozri si naše firemné benefity a reaguj na voľné pracovné miesta.

O autorovi

Katarína Kučáková

Software Test Engineer

Moja cesta k testovaniu softvéru sa začala v roku 2019 až po štúdiu ekonómie a pracovných skúsenostiach v iných odvetviach. To mi pomohlo vnímať IT svet v rôznych súvislostiach. Ten totiž ponúka neustále nové výzvy, pre ktoré rada hľadám riešenia. Obľubujem oddych pri čítaní, turistiku alebo lyžovanie. LinkedIn

Daj nám o sebe vedieť