Cypress vagy Protractor: melyik a jobb e2e tesztelő eszköz Angularhoz?

A modern webfejlesztés egyik alappillére a felhasználói élmény, amelynek garantálásához elengedhetetlen a szoftverek alapos tesztelése. Különösen igaz ez a dinamikus, komplex egyoldalas alkalmazások (Single Page Applications, SPA) esetében, mint amilyeneket az Angular keretrendszerrel építünk. Az e2e tesztelés, vagyis a végponttól végpontig tartó tesztelés, kulcsfontosságú annak biztosításában, hogy az alkalmazás a valós felhasználói interakciók során is a kívánt módon működjön. Ez a cikk két népszerű, de nagyon eltérő megközelítésű tesztelő eszközt állít szembe egymással: a Protractor-t és a Cypress-t, hogy segítsen eldönteni, melyik a legmegfelelőbb választás Angular projektekhez.

Hosszú éveken át a Protractor volt az alapértelmezett, hivatalos választás az Angular alkalmazások e2e tesztelésére. Ez a szoros integráció és a keretrendszer specifikus funkcióinak ismerete páratlan előnyt biztosított számára. Azonban az idők változnak, új technológiák és megközelítések jelennek meg, és a Cypress egyre nagyobb teret nyer, mint egy modern, fejlesztőbarát alternatíva. Vajon tényleg felváltja a Protractor-t, vagy még mindig van helye a régi bajnoknak? Merüljünk el a részletekben!

Protractor: Az Angular „hivatalos” tesztelője – Régi dicsőség, búcsúzóban

A Protractor egy Node.js alapú végponttól végpontig tesztelő keretrendszer, amelyet kifejezetten Angular alkalmazások tesztelésére fejlesztettek ki. Az eszköz alapja a WebDriverJS (a Selenium WebDriver JavaScript implementációja), ami lehetővé tette számára, hogy böngészőben futtassa a teszteket, szimulálva a felhasználói interakciókat.

Hogyan működött a Protractor?

A Protractor képes volt megérteni az Angular belső működését, például a változásészlelést (change detection) és az aszinkron műveleteket. Ez azt jelentette, hogy nem kellett manuálisan várni az Angular belső folyamataira, mielőtt interakcióba lépnénk az elemekkel. A `waitForAngular()` funkció automatikusan gondoskodott erről, ami jelentősen növelte a tesztek megbízhatóságát és csökkentette a flakiness-t (véletlenszerűen elbukó tesztek) a „normál” Seleniumhoz képest.

A teszteket általában Jasmine vagy Mocha tesztfuttatóval írták, és a szintaxis a megszokott `describe`, `it`, `expect` szerkezetet követte. A Protractor emellett speciális lokátorokat is biztosított az Angular elemekhez, mint például a `by.model`, `by.binding`, `by.repeater`, amelyek megkönnyítették az UI elemek azonosítását.

A Protractor előnyei (voltak):

Angular-specifikus tudás: Képes volt várni az Angular aszinkron műveleteire, ami csökkentette a flakiness-t és egyszerűsítette a tesztírási logikát.
Hivatalos támogatás: Hosszú ideig az Angular csapat ajánlott eszköze volt, ami erős közösségi támogatást és sok erőforrást jelentett.
Érett ökoszisztéma: Mivel régóta létezik, rengeteg példa, plugin és kiegészítő állt rendelkezésre.
Böngészőfüggetlenség: Mivel Selenium WebDriver-re épült, képes volt tesztelni bármely böngészőn, amelyet a Selenium támogatott (Chrome, Firefox, Safari, Edge stb.).

A Protractor hátrányai:

Összetett beállítás: A Selenium WebDriver és a hozzá tartozó böngészőmeghajtók (WebDriver binaries) telepítése és konfigurálása gyakran bonyolult és időigényes volt.
Lassú végrehajtás: A Selenium WebDriver architektúrájából adódóan a tesztek végrehajtása viszonylag lassú volt, mivel a tesztkód és az alkalmazás külön folyamatokban futott, és a kommunikáció HTTP kéréseken keresztül történt.
Flakiness: Bár az Angular-specifikus várakozások javítottak a helyzeten, mégis gyakrabban előfordultak instabil tesztek, mint a modernebb eszközökkel.
Nehézkes hibakeresés: A hibakeresés a Selenium réteg miatt bonyolultabb volt, gyakran nehéz volt pontosan reprodukálni a hibákat.
Magasabb tanulási görbe: A Selenium WebDriver koncepciójának megértése és a beállítások elvégzése időt vett igénybe.
Karbantartási mód és jövőtlenség: A legfontosabb hátrány, hogy az Angular csapat 2022 végén hivatalosan deprecate-elte a Protractor-t, és migrációra ösztönözte a fejlesztőket. Ez azt jelenti, hogy már nem kap aktív fejlesztést, új funkciókat és hivatalos támogatást.

Cypress: A modern e2e tesztelés forradalma

A Cypress egy új generációs e2e tesztelő eszköz, amelyet a modern webes környezetre optimalizáltak. Teljesen más megközelítést alkalmaz, mint a Protractor és a Selenium-alapú eszközök. A Cypress közvetlenül a böngészőben futtatja a teszteket, a tesztkód és az alkalmazás kódja ugyanabban az eseményciklusban (event loop) fut. Ez alapvetően változtatja meg a tesztelés módját.

Hogyan működik a Cypress?

A Cypress egy proxy rétegen keresztül kommunikál a böngészővel, ami lehetővé teszi számára, hogy teljes kontrollt gyakoroljon az alkalmazás felett. Közvetlenül hozzáfér a DOM-hoz, a hálózati kérésekhez, a helyi tárolóhoz és a munkamenet tárolóhoz. Ez a szoros integráció rendkívül gyors és megbízható teszteket eredményez.

A Cypress egy komplett tesztelő megoldás: tartalmaz egy tesztfuttatót, egy asszertációs könyvtárat (Chai), egy mokkoló/stubbing eszközt (Sinon), képernyőképek és videók készítésének lehetőségét, és egy interaktív felhasználói felületet (Test Runner UI). A teszteket JavaScript-ben írhatjuk, a szintaxis intuitív és könnyen tanulható.

A Cypress előnyei:

Rendkívüli sebesség: Mivel a tesztek közvetlenül a böngészőben futnak, a Cypress lényegesen gyorsabb, mint a Selenium-alapú eszközök. Az automatikus várakozás funkciója csökkenti a flakiness-t és felgyorsítja a tesztek végrehajtását.
Kiváló fejlesztői élmény (DX): A Cypress Test Runner UI interaktív felületet biztosít, ahol valós időben követhetjük a tesztek futását. Az „időutazás” funkcióval visszautazhatunk az időben, hogy megnézzük az alkalmazás állapotát egy adott lépésnél, ami forradalmi a hibakeresésben.
Megbízhatóság: A Cypress architektúrája és az automatikus várakozások miatt a tesztek sokkal stabilabbak és kevésbé flakyness-sek.
Egyszerű beállítás: Nincs szükség Selenium WebDriver-re vagy külön böngészőmeghajtókra. Egy `npm install cypress` parancs elegendő a kezdetekhez.
Beépített funkciók: Képernyőképek és videók automatikus készítése a hibás tesztekről, hálózati kérések egyszerű stubolása és mokkolása, beépített parancsismétlés és asszertációk.
Interaktív hibakeresés: Az időutazás mellett, a Chrome DevTools-t is használhatjuk a tesztek futása közben, ami rendkívül hatékony.
Aktív fejlesztés és közösség: A Cypress folyamatosan fejlődik, új funkciókkal bővül, és hatalmas, aktív közössége van.

A Cypress hátrányai:

Korlátozott böngésző támogatás: Jelenleg csak a Chromium-alapú böngészőket (Chrome, Edge, Electron), Firefoxot és WebKitet (Safari) támogatja. A Safari natív támogatása még fejlesztés alatt áll (2024 elején még csak kísérleti).
Nincs valódi több fül, több origin támogatás: A Cypress alapvetően egyetlen fülön és egyetlen originon (domainen) belül futtatja a teszteket. Bár a `cy.origin()` parancs lehetővé teszi a több domain közötti navigálást és tesztelést, ez még mindig nem egyenértékű a Selenium cross-origin képességeivel.
Nincs párhuzamos tesztelés böngészőn belül: Egy teszt egyszerre csak egy böngészőben futhat. A párhuzamosítás csak a tesztfájlok szintjén oldható meg (pl. CI/CD pipeline-ban több konténerben).
Tanulási görbe a Cypress-specifikus megközelítéshez: Bár a szintaxis egyszerű, a Cypress filozófiája eltér a hagyományos Selenium-tól, amihez hozzá kell szokni. Egyes esetekben a korlátozások megkerülése kreativitást igényel.
Nincs natív mobil eszköz támogatás: Bár reszponzív nézetek tesztelhetők, natív mobilalkalmazások tesztelésére nem alkalmas.

Cypress vagy Protractor Angularhoz? A döntés

Most, hogy áttekintettük mindkét eszköz előnyeit és hátrányait, ideje összehasonlítani őket konkrétan az Angular projektek szemszögéből, figyelembe véve a legfrissebb fejleményeket.

1. Az „elefánt a szobában”: A Protractor deprecációja

Ez a legfontosabb tényező. Az Angular csapat hivatalosan is bejelentette a Protractor karbantartási módba kerülését és javasolja a migrációt. Ez gyakorlatilag azt jelenti, hogy a Protractor halott, mint aktívan támogatott e2e tesztelő eszköz Angularhoz. Nincs új funkció, nincs bugfix, ami az Angular keretrendszer változásaihoz igazodna. Ezért, ha új Angular projektet indít, vagy meglévő projektjéhez keres e2e tesztelő eszközt, a Protractor már nem releváns opció.

2. Angular integráció

Protractor: Természetesen, a Protractor natívan értette az Angular-t, és ehhez igazodva várakozott a folyamatokra. Ez volt az egyik legnagyobb erőssége.
Cypress: Bár a Cypress nem „ismeri” az Angular-t ugyanúgy, mint a Protractor, mégis rendkívül jól működik vele. Az Angular specifikus várakozásokra a Cypress automatikus retry mechanizmusa és a `cy.intercept()` (vagy `cy.route()`) parancsok adnak megoldást a hálózati kérések kezelésére. Ezenkívül léteznek közösségi kezdeményezések, mint például a `@cypress/angular`, amely segít az Angular komponensek tesztelésében.

3. Teljesítmény és megbízhatóság

Itt a Cypress egyértelműen győz. A Protractor (és a Selenium általában) hajlamos a flakiness-re és lassabb. A Cypress sebessége, automatikus várakozása és robusztus architektúrája sokkal megbízhatóbb és gyorsabb teszteket eredményez. Ez kritikus fontosságú a CI/CD pipeline-okban, ahol a gyors visszajelzés elengedhetetlen.

4. Fejlesztői élmény (DX) és hibakeresés

A Cypress ezen a területen is felülmúlja a Protractor-t. Az interaktív Test Runner UI, az időutazás, a valós idejű frissítések és a részletes hibalogok páratlan fejlesztői élményt nyújtanak. A Protractor hibakeresése a Selenium réteg miatt sokkal nehézkesebb volt.

5. Beállítás és karbantartás

A Cypress beállítása sokkal egyszerűbb. Nincs szükség bonyolult Selenium konfigurációra vagy a böngészőmeghajtók manuális kezelésére. Ez jelentős időmegtakarítást jelent, különösen nagyobb csapatoknál és CI/CD környezetekben.

6. Közösség és jövő

A Cypress aktív és növekvő közösséggel rendelkezik, folyamatosan érkeznek az új funkciók és javítások. A Protractor közössége természetesen hanyatlóban van a deprecáció miatt.

Migráció Protractorról Cypress-re Angular projektekben

Tekintettel a Protractor státuszára, a legfontosabb kérdés sok Angular fejlesztő számára az, hogyan migrálhatnak Cypress-re. A jó hír az, hogy a migráció viszonylag fájdalommentes lehet. A Cypress szintaxisa és megközelítése modern és intuitív, így a meglévő Protractor teszteseteket könnyen átírhatjuk Cypress tesztekké.

Néhány tipp a migrációhoz:

Fokozatos átállás: Nem kell egyszerre az összes tesztet átírni. Kezdhetjük az új tesztek Cypress-ben történő írásával, miközben a régi Protractor teszteket fokozatosan migráljuk.
Alapok elsajátítása: Ismerkedjünk meg a Cypress architektúrájával és parancsaival. A `cy.get()`, `cy.contains()`, `cy.type()`, `cy.click()` parancsok a leggyakrabban használtak.
Hálózati kérések kezelése: Használjuk a `cy.intercept()` (vagy régebbi verzióban `cy.route()`) parancsot a HTTP kérések mokkolására, stubolására és várakozására. Ez segít a tesztek megbízhatóságának növelésében, különösen az Angular alkalmazások aszinkron természetével.
Page Object Model (POM) fenntartása: Ha a Protractor tesztekben használtunk POM-ot, ezt a struktúrát a Cypress-ben is fenntarthatjuk, ami segíti a kód rendezettségét és újrafelhasználhatóságát.
Kommunikáció az Angular alkalmazással: Szükség esetén a `cy.window().then()` vagy `cy.get(‘app-root’).then()` segítségével hozzáférhetünk az Angular komponensekhez vagy szolgáltatásokhoz a böngésző konzolján keresztül.

Összefoglalás és ajánlás

A Protractor hosszú és dicső múltra tekint vissza az Angular e2e tesztelés világában. Volt idő, amikor egyértelműen a legjobb, sőt az egyetlen hivatalos választás volt. Azonban a technológia gyorsan fejlődik, és a Protractor nem tudta felvenni a versenyt a modern elvárásokkal, ami végül a deprecációjához vezetett.

A mai környezetben, különösen az Angular csapat ajánlását figyelembe véve, a választás egyértelmű: a Cypress a kiválóbb és előretekintőbb megoldás az Angular e2e tesztelésre.

Miért a Cypress a győztes 2024-ben:

Modern architektúra: Gyors, megbízható és kevésbé flakyness-ra hajlamos teszteket biztosít.
Páratlan fejlesztői élmény: Kiváló hibakeresési eszközökkel, interaktív UI-val és egyszerű beállítással.
Aktív fejlesztés és jövőbiztos: Folyamatosan frissül, és a webfejlesztés legújabb trendjeihez igazodik.
Növekvő közösség: Rengeteg erőforrás és támogatás áll rendelkezésre.
A Protractor deprecációja: A legfontosabb érv, amely alapvetően megszünteti a Protractor mint viable opció létjogosultságát új projektek számára, és sürgeti a migrációt a régiek esetében.

Ha új Angular projektet indít, válassza a Cypress-t. Ha pedig egy régebbi, Protractor-ral tesztelt Angular alkalmazása van, erősen ajánlott elkezdeni a migrációt Cypress-re. Ez nem csupán egy technológiai frissítés, hanem egy befektetés a jövőbe, amely javítja a tesztek minőségét, a fejlesztői hatékonyságot és felkészíti alkalmazását a jövő kihívásaira.

A webes e2e tesztelés világa folyamatosan változik, de a Cypress jelenleg a modern, hatékony és fejlesztőbarát megközelítés élén áll, és kiválóan alkalmas az Angular alkalmazások minőségének biztosítására.