Ak sleduješ aktuálne trendy vo web developmente, pravdepodobne si už zachytili/a, že existuje tool, ktorý sa volá Cypress.io. Za názvom tohto vždy-zeleného stromu sa skrýva open-source tool, ktorý si za úlohu kladie prinášať vždy-zelené end-to-end testy pre webové aplikácie. O Cypresse hovoria všetci, vrátane mňa. Môj kurz zameraný na používanie Cypress.io od A-Z nájdeš na learn2code.sk. Na konci tohto blogu nájdeš pár detailov toho, čo sa v kurze naučíš. Predtým však krátko o Cypresse.

Čo je Cypress.io?

Cypress.io bol stvorený za účelom testovania moderných webových aplikácii. Poradí si s čímkoľvek čo beží v prehliadači. Môže ísť o akúkoľvek webovú stránku, alebo webovú aplikáciu napísanú v niektorom s moderných frameworkov ako sú React, Angular, Vue, či Svetle.

Za posledné roky stúpla popularita Cypressu narástla raketovou rýchlosťou. Svedčí o tom fakt, že Cypress.io je desiaty najpopulárnejší projekt naprieč celým GitHubom a je toolom č. 1 pre automatické testovania podľa review portálov Capterra a G2 Crowd. V júli tohto roka presiahol 7,4 milióna stiahnutí . To všetko za približne 5 rokov svojej aktívnej existencie.

Čas zahodiť Selenium?

Určite áno, aj určite nie. Tak ako každý iný nástroj, Cypress.io bol vytvorený za účelom vyriešenia konkrétneho problému. Tým problémom bolo v tomto prípade end-to-end testovanie a jeho začlenenie do developerského flowu.

Developerov a testerov poteší skvelá podpora CI, možnosť debuggovania pomocou DevTools a debuggera, blesková rýchlosť, paralelizácia, či možnosť „cestovania v čase“ na timeline samotného testu. Zdá sa, že v Cypresse sa rozhodli testovanie vymyslieť nanovo.

Cypress.io beží priamo v browseri. To je zrejme hlavný a najdôležitejší rozdiel oproti riešeniam založeným na Seleniu. To obvykle pomocou http requestov zavolá api, ktoré vykonáva akcie nad browserom. Od browseru je takpovediac oddelené. Prístup Cypressu má pri testovaní moderných webových aplikácii jednu nespornú výhodu. Testovací skript aj testovaná aplikácia bežia v tom istom kontexte, čo znamená, že v rámci testu máme prístup priamo do kódu aplikácie. To nám umožňuje sledovať zavolané funkcie, alebo pristupovať k úložisku aplikácie akým je napr. Redux. Cypress.io má zároveň výborné api na prácu s networkom, ktoré umožňuje sledovať, odchytávať, či dokonca meniť http requesty.

Cypress.io však samozrejme nie je tool na všetko. Neporadí si s natívnymi iOS či Android aplikáciami a tak treba na mobilné testovanie hľadať iný nástroj. Takisto je otázne ako Cypress.io rozšíri svoju podporu prehliadačov. Vo februári tohto roka pribudla podpora pre Firefox, no okrem neho podporuje Cypress.io iba prehliadače založené na Chromiu, teda Google Chrome, Electron a Microsoft Edge. Ak je teda podpora IE11 a Safari pre testovanú aplikáciu kľúčová, Cypress.io tvoje testerské potreby nenaplní.

Cypress.io bude najbližšie roky rásť na popularite

Napísať prvý test v Cypresse trvá doslova dve minúty. Cypress.io má intuitívnu syntax, ktorá je jednoduchá na pochopenie a umožňuje písať testy neskutočne rýchlo. A práve rýchlosť je to, čo je príčinou raketového nárastu popularity tohto toolu. Určite zaň môže aj skvelá dokumentácia ako aj fakt, že testy pre Cypress.io sa píšu v JavaScripte alebo TypeScripte, čo je jazyk samotných aplikácii. Testerom v automatizácii to otvára bránu k spoznávaniu samotnej testovanej aplikácie. Keď som tento tool začal používať pred 4 rokmi ja, o Cypresse nikto nevedel. Dnes o ňom hovorí každý.

Čas naučiť sa ovládať Cypress.io

Od septembra tohto roka môžeš na stránke learn2code.sk nájsť môj kurz o testovaní pomocou Cypress.io. V tomto kurze nájdeš všetko čo potrebuješ na to, aby si sa mohol nazvať Cypress.io testerom/kou. Kurz ťa prevedie základmi ako sú:

• označovanie a testovanie elementov na stránke
• reťazenie, nádväznsť a logika Cypress príkazov
• sledovanie a manipulovanie http requestov
• odosielanie http requestov

Všetky tieto veci si najprv ukážeme v jednoduchšej forme a následne sa presunieme na pokročilejšie témy ako sú:

• cookies a autorizácia
• prihlásenie do aplikácie bez toho aby sme sa preklikávali cez login
• vytváranie vlastných príkazov
• písanie v TypeScripte a výhody jeho použitia v testoch
• testovanie odoslaných emailov

V poslednej časti kurzu sa pozrieme na naše testy zhora a pozrieme sa na to, akým spôsobom nastaviť konfiuguráciu a premenné prostredia a ako si vygenerovať testy pomocou dát. Kurz zakončíme nastavením pipeline cez GitHub actions a pomocou Cypress dashboardu sa pozrieme na analytiku výsledkov a spustíme testy paralelne.

V kurze som si dal špeciálne záležať na tom, aby bol správne odkrokovaný a aby jedna kapitola nadväzovala na druhú. Ak nie si JavaScript expert/ka, nevadí. Stačí, že ovládaš základnú syntax. Všetko ostatné sa na Teba časom nalepi.

Tento kurz zároveň nie je niečím čo si pustíš rýchlosťou 1.5 popri večeri. Takmer každá kapitola obsahuje praktické cvičenie, ktoré Ti pomôže vysvetlený koncept uchopiť a pretaviť do praxe. Bez kódenia to skrátka nejde a tak sa priprav, že tento tri a pol hodinový kurz Ti toho času zaberie oveľa viac. Okrem toho je vo viacerých kapitolách kopec odkazov na články, blogy a dokumentáciu, takže študijného materiálu je až až.

Kurz som robil tak, aby bol jeho absolvent/ka pripravený/á prihlásiť sa na akúkoľvek testerskú pozíciu, kde sa Cypress vyžaduje. Tých začína byť čoraz viac, za zmienku určite stojí Kiwi, či Slido.