A ciprus automatizálása: 15 fontos tényező

Ebben az oktatóanyagban részletesen tárgyaljuk a Cypress Automation Framework-et. Ebben a cikkben bemutatjuk, mi az a Cypress, miben különbözik a többi tesztelési keretrendszertől, a Cypress architektúrájáról és a telepítési eljárásról. A ciprus izgalmas téma, és szórakoztató tanulni is. Kezdjük!

Cypress Automation Framework

A Cypress Automation Framework egy tisztán Javascript-alapú tesztelőeszköz, amely elsősorban a modern webalkalmazások front-end tesztelésére összpontosít. A Cypress segítségével az alkalmazások egyszerűen tesztelhetők a vizuális felülettel, hogy szemtanúi legyenek a teszt végrehajtásának. Így a Cypress áldás a fejlesztők és a minőségbiztosítási mérnökök számára, mivel megkönnyíti a szkriptírást és a tesztvégrehajtást. Ezen kívül egy jellegzetes tesztfutóval is rendelkezik, amely megkönnyíti a DOM-kezelést, és közvetlenül a böngészőn fut.

Tartalomjegyzék

Mi az a Cypress?

A Cypress gyorsabb, jobb, és határozott tesztelést biztosít, amely böngészőn fut. A Cypress-t főleg a Seleniummal hasonlítják össze, de ez teljesen más. A ciprus nem fut a szelén tetején, ami azt jelenti, hogy teljesen független. Ehelyett a Cypress a Mocha tetején fut, ami ismét egy Javascript-ben gazdag tesztkeret. Csak a Chai Assertion Library-vel kompatibilis, amely a BDD és TDD állítások széles skálájához fér hozzá.

A Cypress elsősorban három különböző típusú tesztelésre összpontosít. Ezek végponttól végpontig terjedő tesztek, egységtesztek és integrációs tesztek. A Cypress bármilyen böngészőben futtatható tesztet képes végrehajtani. Ezenkívül különféle gúnyos képességekkel és ellenőrzésekkel jár, amelyek elragadtatják a front-end tesztelést.

A Cypress által támogatott böngészők a következők: Chrome, Firefox, Edge, Electron és Brave. Ezenkívül a böngészők közötti tesztelés könnyen elérhető a Cypress segítségével. Végül, bár a Cypress csak a Javascriptet támogatja, Typescripttel is írható, elsősorban Javascripttel.

Cypress automatizálás

A Cypress egy nyílt forráskódú eszköz, ingyenes tesztfutóval, de árai olyan csapatok és vállalkozások számára, ahol az irányítópultért díjat számítanak fel. Az irányítópult azonban bizonyos mértékig ingyenes, kivéve, ha olyan további funkciókat használ, mint a Flake-észlelés, az e-mail támogatás, a Jira integráció és még sok más.

A Cypress-t főleg a weben található szkriptek automatizálására használják (bármit automatizálhat, ami a böngészőben fut). Soha nem futhat natív mobilalkalmazásokon, de automatizálhatja a mobilalkalmazások egyes funkcióit, ha azokat böngészőben fejlesztették ki.

Jellemzők

A Cypressben számos fantasztikus funkció érhető el, amelyek kiemelkednek minden más automatizálási eszköz közül. Itt beszéljünk néhány főbb funkcióról, és később, amint elkezdjük írni teszteseteinket, megismerkedünk más részekkel!

  1. Automatikus várakozás – A Cypress előnye az automatikus várakozás. Soha nem kell erőltetett várakozást és alvást hozzáadnunk ahhoz, hogy megvárjuk, amíg a DOM lekéri az elemet. A Cypress automatikusan megvár minden interakciót az elemekkel és az állítások végrehajtását. Így a tesztek gyorsak!
  2. Időutazás – A Cypress képernyőképeket készít a teszt végrehajtása során. Az eredményeket vizuálisan, valós időben tekinthetjük meg, ha az irányítópulton a végrehajtott parancsokra viszünk. Így a tesztek könnyebben hibakereshetők
  3. Hibakeresési tesztek – A Cypress képes hibakeresni a teszteket olyan népszerű eszközökből, mint a fejlesztői eszközök. A hibák olvashatóak, a veremek könnyen nyomon követhetők.
  4. Stub kérések – A Cypress rendelkezik a funkciók, a hálózati válaszok vagy a csonkok és kémek által használt időzítők megerősítésére és vezérlésére.
  5. Folyamatos integráció – A Cypress nem függ semmilyen további CI-szolgáltatástól. A teszt parancsának futtatásával azonban az integráció könnyen elérhető.

Mítosz a ciprusról

Van egy mítosz, hogy a Cypress csak Javascript-barát webalkalmazásokon futhat. A Cypress azonban bármilyen Django, Ruby on Rails, Laravel stb. segítségével készült webalkalmazást képes tesztelni. Ezen kívül a Cypress támogatja a programozási nyelvek bármelyikét, mint például a PHP, Python, Ruby, C# stb. Tesztjeinket azonban Javascriptben írjuk. ; ezen túlmenően a Cypress bármilyen alkalmazáson működik.

A Cypress összetevői

A Cypressnek két fő összetevője van. Ők Tesztfutó és a Műszerfal.

Ciprus
Cypress tesztfutó
Cypress teszt funkció

Tesztfutó – A Cypress biztosítja ezt az egyedülálló tesztfutót, ahol a felhasználó megtekintheti a parancsokat a végrehajtás és a tesztelés alatt álló alkalmazás során.

A Tesztfutó alatt kevés alkomponens található. Ők

  1. Parancsnapló – Ez a tesztkészlet vizuális ábrázolása. Megtekintheti a tesztben végrehajtott parancsokat, az állítás részleteit és a tesztblokkokat.
  2. Tesztállapot menü – Ez a menü mutatja a sikeres vagy sikertelen tesztesetek számát és a végrehajtáshoz szükséges időt.
  3. URL előnézet – Ez információt ad a tesztelt URL-ről, hogy nyomon tudja követni az összes URL-útvonalat.
  4. Nézőablak méretezése – Beállíthatja az alkalmazás nézetablakának méretét a különböző reszponzív elrendezések teszteléséhez
  5. Alkalmazás előnézete – Ez a rész a valós időben futó parancsokat jeleníti meg. Itt használhatja a Devtools-t az egyes alapok hibakeresésére vagy ellenőrzésére.

Irányítópult: A Cypress Dashboard lehetővé teszi a rögzített tesztek elérését. A Dashboard szolgáltatással szemtanúi lehetünk a sikeres, sikertelen vagy kihagyott tesztek számának. A cy használatával megtekinthetjük a sikertelen tesztek pillanatképeit is. screenshot() parancsot. Tanúja lehet a teljes teszt videójának vagy a sikertelen tesztek klipjének is.

Cypress építészet

A legtöbb tesztelőeszköz a böngészőn kívüli kiszolgálón fut, és a hálózaton keresztül hajt végre parancsokat. A Cypress azonban azon a böngészőn fut, ahol az alkalmazás is fut. Így hozzáférhet az összes DOM-elemhez és mindenhez a böngészőn belül.

A csomópontszerver a Cypress mögött fut a kliens oldalon. Így a csomópontszerver és a Cypress kölcsönhatásba lép egymással, kíséri és hajtja végre a végrehajtást támogató feladatokat. Mivel mind az elülső, mind a hátulsó részhez hozzáfér, az alkalmazás valós időben való reagálása a végrehajtás során jól sikerült, és olyan feladatokat is végrehajthat, amelyek akár a böngészőn kívül is futnak.

Cypress építészet

A Cypress a hálózati réteggel is együttműködik, és rögzíti a parancsokat a webforgalom olvasásával és módosításával. Végül a Cypress HTTP kéréseket és válaszokat küld a csomópontszervertől a böngészőnek. Mivel a Cypress a hálózati rétegben működik, segít módosítani a kódot, amely zavarhatja a webböngésző automatizálását. A csomópontszerver és a böngésző közötti kommunikáció a WebSocketen keresztül történik, amely a proxy elindítása után kezdődik meg.

A Cypress vezérli a böngészőkben be- és kifutó összes parancsot. Mivel helyi gépre van telepítve, közvetlenül kölcsönhatásba lép az operációs rendszerrel, hogy videókat rögzítsen, pillanatfelvételeket készítsen, hozzáférjen a hálózati réteghez, és könnyedén végrehajtja a fájlrendszer műveleteit. A Cypress mindent elérhet a DOM-tól, az ablakobjektumoktól, a helyi tárolótól, a hálózati rétegtől és a DevTools-tól kezdve.

Telepítse a Cypress-t

Ez a rész azt a telepítési folyamatot tárgyalja, amelyet a tesztesetek megírása előtt követni kell. A Cypress letöltésének két különböző módja van. Ők

  1. Telepítés npm-en keresztül
  2. Közvetlen letöltés

A Cypress telepítése előtt szükségünk lehet néhány előfeltételre az npm-en keresztüli telepítés elindításához. Lássuk őket részletesen.

Előfeltétele

A tesztesetek megírása előtt bizonyos előfeltételekre lesz szükségünk.

  • Ahogy fentebb tárgyaltuk, a Cypress csomópontszerveren fut; ezért telepítenünk kell a Node.js-t.
  • A tesztesetek megírásához szükségünk van egy kódszerkesztőre vagy IDE-re.

Ebben a példában a Visual Studio Code-ot fogjuk használni. Tehát merüljünk el a részletekben.

Node.js telepítés Mac-en

Itt megvitatjuk a Node.js letöltésének lépéseit Mac rendszeren. Navigáljon ide https://nodejs.org/en/download/. Most a letöltési oldalra kerül.

Node csomag macOs-ban

1. Kattintson a macOS telepítőre. Ha rákattint, az alábbiakban egy letöltött csomagfájlt talál. Kattintson a pkg fájlra a Node.js telepítéséhez

Telepítő bemutatkozás

2. Miután a .pkg fájlra kattint, megnyílik a Node telepítője. A bevezető rész a Node.js és az npm verziókat mutatja be. Kattintson a Folytatás gombra

Agree License
Hozzáférés engedélyezése a Telepítőben

3. Kattintson az Elfogadom gombra, majd a Folytatásra. Megjelenik egy előugró ablak, amely lehetővé teszi a Letöltés mappában lévő fájljaihoz való hozzáférést. Kattintson az OK gombra.

Válassza a Cél lehetőséget

4. Ebben a részben kiválaszthatja azt a célhelyet, ahová a Node.js-t le kell tölteni. Ismét választhat a rendszerterülete szerint. Itt az alapértelmezett helyet választom.

telepítés típusa
Adja meg a felhasználónevet és a jelszót a telepítéshez

5. Kattintson a Telepítés gombra. Ha rákattint, megjelenik egy felugró ablak, amely megkérdezi a rendszerjelszót. Írja be jelszavát, és kattintson a Szoftver telepítése gombra.

Telepítési összefoglaló

6. Hurrá! Telepítettük a Node.js-t és az npm csomagot. Kattintson a Bezárás gombra a telepítés befejezéséhez.

A Visual Studio kód telepítése Mac rendszeren

Sikeresen telepítettük a Node.js-t. Most telepítsük a Visual Studio Code kódszerkesztőnket. A VS kód egy hatékony eszköz, amely a Javascript összes beépített funkciójával rendelkezik. Nézzük tehát a Visual Studio Code telepítési lépéseit.

Itt megvitatjuk a VS-kód letöltésének lépéseit Mac rendszeren. Először navigáljon ide https://code.visualstudio.com/download hogy a VS kód letöltési oldalára kerüljön.

VS Code telepítése Mac rendszeren

1. Kattintson a Mac ikonra. A letöltés alatt álló csomagot alább láthatja.

Telepített csomag zip-ben

2. Kattintson a letöltött fájlra a csomag kicsomagolásához. A kicsomagolás után a Visual Studio kódot megtalálhatja a Finder Letöltései között.

VS kód a Letöltésekben

3. Hurrá! Letöltöttük a kódszerkesztőnket. Kattintson az ikonra a Visual Studio Code megnyitásához.

Új Cypress projekt létrehozása

Most meglátjuk, hogyan hozhatunk létre új csomópont-projektet a Visual Studio Code-ban. Miután rákattintott a VS kód ikonra, az üdvözlő oldalra kerül. Ezután kattintson a Munkaterület hozzáadása mappára egy új mappa létrehozásához.

Új projekt létrehozása

Ha rákattint a mappára, megjelenik egy felugró ablak, amely új mappa hozzáadását kéri. Most kattintson arra a helyre, amelyhez hozzá szeretné adni a munkaterületet. Ezután kattintson az Új mappa elemre, és adja hozzá a mappa nevét CypressProjectként, majd kattintson a Megnyitás gombra.

Új mappa létrehozása

Most létrehoztunk egy mappát a Cypress tesztünkhöz. Mielőtt elkezdenénk írni a teszteket, telepítenünk kell a package.json fájlt. A telepítés előtt tisztázza meg, mi az a package.json fájl.

Mi az a Package.json fájl?

A Package.json az összes npm-csomagot tartalmazza egy fájlban, amely általában a projekt gyökérjében található. Általában a Node.js projekt gyökérkönyvtárában található. Ez a fájl tartalmazza a projekthez szükséges összes metaadatot. Minden információt megad az npm-nek, és segít a projekt azonosításában és a függőségek kezelésében. A Package.json fájl olyan információkat tartalmaz, mint a projekt neve, verziói, licence, függőségek és még sok más.
Most már megértettük, mi az a package.json fájl. Tehát kezdjük a fájl letöltésének lépéseit a Visual Studio kódunkban.

Nyissa meg a terminált

1. Parancsaink végrehajtásához meg kell nyitnunk a Terminált. A VS kód tetején kattintson a gombra terminál. Miután megnyílik a legördülő menü, kattintson a gombra Új terminál.

Telepítse a package.json fájlt

2. Miután megnyílik a terminál, írja be az alábbi parancsot a projektkönyvtárba, és nyomja meg az Enter billentyűt.

npm init

3. Miután megnyomta az Enter billentyűt, megjelennek bizonyos információk. Beírhatja a szükséges adatokat a terminálba, és az összes mező eléréséhez nyomja meg az Enter billentyűt.

A projekt részletei
  • Csomag név: Bármilyen nevet megadhat a csomagnak. Üresen hagytam, mivel előre feltöltötte az általunk létrehozott mappanévvel.
  • Változat: Ez az npm verziójának adatait adja meg. Ezt kihagyhatja, és megnyomhatja az Enter billentyűt.
  • Leírás: Itt adhatsz meg egy kis kiegészítő információt a csomaghoz. Ha szükséges, beírhatja a leírást, és ismét nyomja meg az Enter billentyűt.
  • Belépési pont: Ez az alkalmazás belépési pontja. Mivel előre meg van töltve az index.js fájllal, kihagyhatjuk ezt a mezőt, és megnyomhatjuk az Enter billentyűt.
  • Teszt parancs: A teszt futtatásához adott parancs. Itt nem szükséges parancsokat adni, de ha szükséges, akkor minden parancsot megadhat.
  • Git adattár: Ehhez a mezőhöz a git tárhely elérési útja szükséges. Ezt a mezőt üresen is hagyhatja.
  • Kulcsszavak: Egyedi kulcsszavak a projekt azonosításához. Ezt a mezőt is kihagyhatod.
  • Szerző: Ez általában a személy felhasználóneve. Hozzáadhatja a nevét, és nyomja meg az Enter billentyűt.
  • Engedély: A licenc előre ki van töltve az ISC-vel. Az Enter megnyomásával folytathatja.
  • 4. Miután megnyomta az Enter billentyűt, a terminál megerősítést kér az összes megadott adat felsorolásával. típus Igen és ismét nyomja meg az Enter billentyűt.
Package.json fájl létrehozásának megerősítése

Most létrehoztunk egy package.json fájlt. Megtekintheti a fájlt a kódszerkesztőben az általunk megadott adatokkal.

Létrehozva a Package.json fájlt

A Cypress telepítésének lépései

Telepítettük az összes előfeltételt a Cypress letöltéséhez, a csomóponthoz és az inicializált npm-hez. Mint fentebb említettük, a Cypress letöltésének két módja van.

A Cypress letöltése npm-en keresztül

A Cypress telepítéséhez át kell adnia az alábbi parancsot a terminálban. Ezenkívül ki kell adnia a parancsot a projektkönyvtárban a csomópont telepítéséhez és a package.json fájl generálásához.

npm install cypress --save-dev
Cypress telepítési parancs

Miután átadta a parancsot, letölti a projekthez szükséges összes releváns függőséget. A cikk írásakor a Cypress legújabb verziója az 7.7.0. A verzió eltérhet a letöltés időpontjában.

Sikeres Cypress telepítés

A fenti képre hivatkozva láthatja, hogy letöltöttük a Cypress-t. Ezt a terminálban letöltött reprezentációval és a package.json fájlban található devDependencies hozzáadásával ellenőrizheti.

Közvetlen letöltés

A Cypress-t közvetlenül a CDN-jükről tölthetjük le, ha nem a Node vagy az npm csomagot használja a projektben. A tesztek Dashboardon történő rögzítése azonban nem lehetséges közvetlen letöltéssel.

A Cypress letöltése gombra kattintva letöltheti közvetlenül innen link. Ez most közvetlenül letölti a csomagot. A csomag letöltése után nyissa meg a zip fájlt, és kattintson duplán. A Cypress függőségek telepítése nélkül fog futni. Ez a letöltés mindig a legújabb verziót veszi fel, és a rendszer automatikusan észleli a platformot. A Cypress letöltése azonban npm-en keresztül ajánlott a közvetlen letöltés helyett.

A technológiával kapcsolatos további bejegyzésekért látogassa meg oldalunkat Technológiai oldal.

Lapozzon a lap tetejére