V tomto tutoriálu budeme podrobně diskutovat o Cypress Automation Framework. V tomto článku se budeme zabývat tím, co je Cypress, čím se liší od ostatních testovacích frameworků, architekturou Cypressu a instalačním postupem. Cypress je vzrušující téma a je také zábavné se ho učit. Pojďme začít!

Cypress Automation Framework

Cypress Automation Framework je čistý testovací nástroj založený na JavaScriptu, který se zaměřuje hlavně na front-end testování v moderních webových aplikacích. S Cypressem se aplikace snadno testují pomocí vizuálního rozhraní, které je svědkem provádění testu. Cypress tedy přichází jako požehnání pro vývojáře i inženýry QA tím, že usnadňuje psaní skriptů a provádění testů. Kromě toho přichází s charakteristickým testovacím běžecem, který usnadňuje manipulaci s DOM a běží přímo v prohlížeči.

Obsah

Co je Cypress?

Cypress je rychlejší, lepší a poskytuje definitivní testování, které běží na prohlížeči. Cypress se porovnává hlavně se selenem, ale je úplně jiný. Cypress neběží nad selenem, což znamená, že je zcela nezávislý. Místo toho Cypress běží na vrcholu Mocha, což je opět testovací rámec bohatý na Javascript. Je kompatibilní pouze s Chai Assertion Library, která má přístup k široké škále tvrzení BDD a TDD.

Cypress se zaměřuje především na tři různé typy testování. Jsou to End-to-End testy, Unit testy a Integrační testy. Cypress může provádět jakékoli testy, které lze spustit v prohlížeči. Kromě toho přichází spolu s různými možnostmi zesměšňování a ověřováním, které jsou fascinovány předním testováním.

Prohlížeče, které Cypress podporuje, jsou Chrome, Firefox, Edge, Electron a Brave. Testování mezi prohlížeči je navíc pomocí Cypressu snadno dosažitelné. Nakonec, i když Cypress podporuje pouze Javascript, lze jej také psát pomocí Typescript, primárně psaného pomocí Javascript.

Cypress Automation

Cypress je nástroj s otevřeným zdrojovým kódem a bezplatným testovacím běžecem, ale má cenové rozpětí pro týmy a firmy, kde vám účtují poplatek za řídicí panel. Dashboard je však do určité míry zdarma, pokud nemáte další funkce, jako je detekce vloček, e-mailová podpora, integrace Jira a mnoho dalších.

Cypress se používá hlavně k automatizaci skriptů na webu (může automatizovat vše, co běží v prohlížeči). Nikdy nemůže běžet na nativních mobilních aplikacích, ale může automatizovat některé funkce mobilních aplikací, pokud jsou vyvinuty v prohlížeči.

Funkce

V Cypressu je k dispozici mnoho úžasných funkcí, které se odlišují od jakéhokoli jiného automatizačního nástroje. Zde pojďme diskutovat o některých hlavních funkcích a další části si představíme později, jakmile začneme psát naše testovací případy!

1. Automatické čekání - Cypress má výhodu automatického čekání. Nikdy nebudeme muset přidávat čekání na sílu a spánek, když budeme čekat, až DOM načte prvek. Cypress automaticky čeká na jakoukoli interakci s prvky a provedení tvrzení. Testy jsou tedy rychlé!
2. Cestování v čase - Cypress pořizuje snímky obrazovky během provádění testu. Výsledky můžeme zobrazit vizuálně v reálném čase pouhým pohybem myši nad provedenými příkazy v řídicím panelu. Tímto způsobem se testy snáze ladí
3. Ladicí testy - Cypress dokáže ladit testy z populárních nástrojů, jako jsou vývojářské nástroje. Chyby jsou čitelné a hromádky jsou snadno dohledatelné.
4. Žádosti o pahýl - Cypress má možnosti k potvrzení a ovládání chování funkcí, síťových odpovědí nebo časovačů používaných pahýly a špiony.
5. Kontinuální integrace - Cypress nezávisí na žádných dalších doplňkových službách CI. Při spuštění příkazu pro test je však integrace snadno přístupná.

Mýtus o Cypress

Existuje mýtus, že Cypress může běžet pouze na webových aplikacích vhodných pro Javascript. Cypress však může testovat jakékoli webové aplikace vytvořené pomocí Django, Ruby on Rails, Laravel atd. Kromě toho podporuje Cypress libovolný programovací jazyk, jako je PHP, Python, Ruby, C # atd. Naše testy však píšeme v Javascript ; kromě toho funguje Cypress na jakékoli aplikaci.

Součásti Cypress

Cypress má dvě hlavní součásti. Oni jsou Testovací běžec  a  Hlavní obrazovka.

Testovací běžec - Cypress poskytuje tento jedinečný testovací běžec, kde si uživatel může prohlížet příkazy během provádění a testované aplikace.

V části Testovací běžec je několik dílčích komponent. Oni jsou

1. Příkazový protokol - Toto je vizuální znázornění testovací sady. Můžete vidět příkazy provedené v testu, podrobnosti tvrzení a testovací bloky.
2. Nabídka Stav testu - Tato nabídka zobrazuje počet testovacích případů, které proběhly nebo selhaly, a čas potřebný k provedení.
3. Náhled URL - Tím získáte informace o adrese URL, kterou testujete, abyste mohli sledovat všechny cesty URL.
4. Dimenzování výřezu - Můžete nastavit velikost výřezu aplikace pro testování různých responzivních rozvržení
5. Náhled aplikace - Tato část zobrazuje příkazy, které se spouštějí v reálném čase. Zde můžete pomocí Devtools ladit nebo kontrolovat každou základnu.

Přístrojová deska: Řídicí panel Cypress umožňuje přístup k testovaným záznamům. Se službou Dashboard můžeme být svědky počtu úspěšných, neúspěšných nebo přeskočených testů. Můžeme také zobrazit snímky neúspěšných testů pomocí cy. příkaz screenshot (). Můžete také sledovat video celého testu nebo klip neúspěšných testů.

Cypřišská architektura

Většina testovacích nástrojů běží na serveru mimo prohlížeč a provádí příkazy po síti. Cypress však běží v prohlížeči, kde je také spuštěna aplikace. Tímto způsobem může přistupovat ke všem prvkům DOM a ke všemu uvnitř prohlížeče.

Node server běží za Cypressem na straně klienta. Uzlový server a Cypress tedy vzájemně spolupracují, doprovázejí a provádějí úkoly na podporu provádění. Vzhledem k tomu, že má přístup k přednímu i zadnímu konci, je odezva na aplikaci v reálném čase během provádění dobře provedena a může také provádět úkoly, které dokonce běží mimo prohlížeč.

Cypress také spolupracuje se síťovou vrstvou a zachycuje příkazy čtením a změnou webového provozu. Nakonec Cypress odešle HTTP požadavky a odpovědi ze serveru uzlu do prohlížeče. Protože Cypress funguje v síťové vrstvě, pomáhá upravit kód, který by mohl narušit automatizaci webového prohlížeče. Komunikace mezi serverem Node a prohlížečem probíhá přes WebSocket, který se spustí po spuštění proxy.

Cypress ovládá všechny příkazy, které se spouštějí a odcházejí z prohlížečů. Jelikož je nainstalován v místním počítači, přímo interaguje s operačním systémem a zaznamenává videa, snímá snímky, přistupuje k síťové vrstvě a snadno provádí operace se souborovým systémem. Cypress má přístup ke všemu od DOM, okenních objektů, místního úložiště, síťové vrstvy a DevTools.

Nainstalujte Cypress

V této části se budeme zabývat procesem instalace, který je třeba dodržet před napsáním testovacích případů. Cypress lze stáhnout dvěma způsoby. Oni jsou

1. Nainstalujte pomocí npm
2. přímé stažení

Než nainstalujeme Cypress, možná budeme potřebovat několik předpokladů, abychom zahájili instalaci pomocí npm. Podívejme se na ně podrobně.

Předpoklady

Než budeme psát naše testovací případy, budeme vyžadovat určité předpoklady.

• Jak bylo uvedeno výše, Cypress běží na serveru uzlů; proto budeme muset nainstalovat Node.js.
• Abychom mohli napsat naše testovací případy, potřebujeme editor kódu nebo IDE.

V tomto příkladu budeme používat Visual Studio Code. Pojďme se tedy ponořit do podrobností.

Instalace Node.js v systému Mac

Zde probereme kroky ke stažení souboru Node.js v systému Mac. Navigovat do https://nodejs.org/en/download/. Nyní přistanete na stránce pro stahování.

1. Klikněte na instalační program pro macOS. Po kliknutí najdete níže stažený soubor balíčku. Kliknutím na soubor pkg nainstalujete Node.js

2. Jakmile kliknete na soubor .pkg, otevře se instalační program uzlu. V úvodní části najdete verze Node.js a npm. Klikněte na Pokračovat

3. Klikněte na tlačítko Souhlasím a poté Pokračovat. Zobrazí se vyskakovací okno umožňující přístup k vašim souborům ve složce Stáhnout. Klikněte na OK.

4. V této části můžete vybrat cíl, do kterého se má stáhnout Node.js. Opět si můžete vybrat podle svého systémového prostoru. Zde volím výchozí umístění.

5. Klikněte na tlačítko Instalovat. Jakmile kliknete, objeví se vyskakovací okno s dotazem na heslo vašeho systému. Zadejte své heslo a klikněte na Instalovat software.

6. Hurá! Nainstalovali jsme balíček Node.js a npm. Dokončete instalaci kliknutím na Zavřít.

Instalace kódu Visual Studio v systému Mac

Úspěšně jsme nainstalovali Node.js. Nyní si necháme nainstalovat náš editor kódu Visual Studio Code. VS kód je mocný nástroj, který má všechny vestavěné funkce Javascript. Pojďme se tedy ponořit do kroků instalace Visual Studio Code.

Zde probereme kroky ke stažení VS kódu v Macu. Nejprve přejděte na https://code.visualstudio.com/download přistát na stránce ke stažení VS kódu.

1. Klikněte na ikonu Mac. Níže se můžete podívat na stahování balíčku.

2. Kliknutím na stažený soubor rozbalte balíček. Po rozbalení najdete kód Visual Studio v části Stahování ve Finderu.

3. Hurá! Stáhli jsme si náš editor kódu. Kliknutím na ikonu otevřete Visual Studio Code.

Vytvoření nového projektu Cypress

Nyní uvidíme, jak vytvořit nový projekt uzlu v našem Visual Studio Code. Jakmile kliknete na ikonu VS kódu, dostanete se na úvodní stránku. Dále klikněte na složku Přidat pracovní prostor a vytvořte novou složku.

Po kliknutí na složku se zobrazí vyskakovací okno s žádostí o přidání nové složky. Nyní klikněte na umístění, do kterého chcete přidat pracovní prostor. Dále klikněte na Nová složka a přidejte název složky jako CypressProject a klikněte na Otevřít.

Nyní jsme vytvořili složku pro náš Cypress test. Než začneme psát naše testy, měli bychom nainstalovat soubor package.json. Před instalací pochopíme, co je soubor package.json.

Co je soubor Package.json?

Package.json zahrnuje všechny balíčky npm v souboru, obvykle umístěném v kořenovém adresáři projektu. Běžně se nachází v kořenovém adresáři projektu Node.js. Tento soubor obsahuje všechna příslušná metadata nezbytná pro projekt. Poskytuje všechny informace npm a pomáhá při identifikaci projektu a zvládání závislostí. Soubor Package.json obsahuje informace, jako je název projektu, verze, licence, závislosti a mnoho dalších.
Nyní jsme pochopili, co je soubor package.json. Začněme tedy kroky ke stažení souboru v našem kódu Visual Studio.

1. K provedení našich příkazů musíme otevřít Terminál. V horní části VS kódu klikněte na terminál. Jakmile se rozbalovací nabídka otevře, klikněte na Nový terminál.

2. Jakmile se terminál otevře, zadejte níže uvedený příkaz do adresáře projektu a stiskněte klávesu Enter.

npm init

3. Jakmile stisknete klávesu Enter, uvidíte zobrazené určité informace. Do terminálu můžete zadat požadované podrobnosti a stisknutím klávesy Enter získat všechna pole.

• Název balíčku: Balíčku můžete poskytnout libovolný název. Nechal jsem to prázdné, protože je předem naplněno názvem složky, kterou jsme vytvořili.
• Verze: Toto poskytuje informace o verzi npm. Toto můžete přeskočit a stisknout Enter.
• Popis: Zde můžete dát balíčku další informace. V případě potřeby můžete zadat popis a znovu stisknout Enter.
• Vstupní bod: Toto představuje vstupní bod aplikace. Protože je předem naplněn indexem.js, můžeme toto pole přeskočit a stisknout Enter.
• Testovací příkaz: Příkaz, který je zadán k provedení testu. Zde není nutné zadávat žádné příkazy, ale v případě potřeby můžete libovolný příkaz zadat.
• Úložiště Git: Toto pole vyžaduje cestu do úložiště git. Toto pole můžete také nechat prázdné.
• Klíčová slova: Jedinečná klíčová slova, která pomáhají identifikovat projekt. Toto pole můžete také přeskočit.
• Autor: Obvykle se jedná o uživatelské jméno osoby. Můžete přidat své jméno a stisknout Enter.
• Licence: Licence je předem naplněna ISC. Můžete pokračovat stisknutím klávesy Enter.

• 4. Jakmile stisknete Enter, Terminal vás požádá o potvrzení uvedením všech podrobností, které jste zadali. Typ Ano a stiskněte znovu klávesu Enter.

Nyní jsme vygenerovali soubor package.json. Soubor si můžete prohlédnout v editoru kódu s informacemi, které jsme poskytli.

Instalační kroky Cypress

Nainstalovali jsme všechny předpoklady pro naše stahování Cypress, uzel a inicializované npm. Jak již bylo zmíněno výše, existují dva způsoby, jak stáhnout Cypress.

Stáhněte si Cypress přes npm

Chcete-li nainstalovat Cypress, budete muset předat níže uvedený příkaz v Terminálu. Kromě toho budete muset zadat příkaz v adresáři projektu, abyste nainstalovali uzel a vygenerovali soubor package.json.

npm install cypress --save-dev

Jakmile předáte příkaz, stáhne všechny relevantní závislosti požadované pro projekt. Při psaní tohoto článku je nejnovější verze Cypress 7.7.0. Verze se může v době stahování lišit.

S odkazem na výše uvedený obrázek vidíte, že jsme si stáhli Cypress. Můžete ověřit staženou reprezentací v Terminálu a přidáním devDependencies v souboru package.json.

přímé stažení

Můžeme stáhnout Cypress přímo z jejich CDN, pokud v projektu nepoužíváte balíček Node nebo npm. Zaznamenávání testů na řídicí panel však není možné pomocí přímého stahování.

Můžete si je stáhnout kliknutím přímo na Cypress https://trials.autocruitment.com. Tím se balíček přímo stáhne. Po stažení balíčku otevřete soubor zip a dvakrát klikněte. Cypress poběží bez nutnosti instalace závislostí. Toto stažení vždy vyzvedne nejnovější verzi a platforma bude detekována automaticky. Stahování Cypressu přes npm se ale doporučuje spíše než přímé stahování.

Další příspěvek o technologii naleznete na naší stránce Stránka technologie.