Začátky testování v Cypress

Posted on by tredgatecz in Automatizace Testování, Návody

Chceš začít automatizovat a hledáš rychlou a jednoduchou cestu? Pak je možná odpovědí Cypress. Dnes se podíváme na zoubek testování v Cypress. Co to vlastně je? Jak se v nástroji testuje a jak ho nastavit? Na tyto i jiné otázky odpovíme v tomto článku.

Co je to Cypress?

Cypress je nástroj pro automatické testování frontendových webových aplikací. Běží na Windows, Linux a MacOs.

Cypress je open-source software, který je k dispozici zadarmo. Cypress Cloud je oproti tomu placené řešení pro korporace s funkcemi, které Cypress rozšiřují.

Proč zvolit Cypress?

Zvolit Cypress byste měli zejména pokud hledáte nástroj, který zvládne otestovat webovou aplikaci. Co nabízí navíc oproti konkurenci jako je Playwright, Robot Framework nebo Selenium?

Jednoduchost – Cypress má alespoň dle mého názoru nejpřívětivější syntaxi psaní testů. Ovládat se ho naučíte během několika hodin.

Přívětivost – Největší výhoda je v Cypress aplikaci (někdy můžete vidět jako Cypress Runner). Tato aplikace má přehledné a jednoduché UI, které velice dobře pomáhá s vytvářením testů a jejich debugováním.

Dobrá dokumentace – U technických nástrojů se moc často nevídá dokumentace, která je jednak obsáhlá, ale také jednoduchá k navigaci. Cypress toto má. Jeho dokumentace je napsaná tak, že se v ní zorientuje snad každý. Obsahuje popis funkcí, příklady, ale třeba i to co nedělat. To dělá testování v Cypress o to jednodušší.

Cypress podporuje většinu prohlížečů, jako jsou například:

  • Google Chrome
  • Edge
  • Electron
  • Firefox
  • Webkit (Apple)

Jaké programovací jazyky Cypress podporuje?

  • Javascript
  • Typescript

Kdy je ale lepší uvažovat o alternativě?

Ačkoliv Cypress má mnoho výhod, není ideální pro všechny scénáře. Například, pokud potřebujete testovat mobilní verze webových stránek nebo aplikací, mohl by být limitující.

Stejně tak, pokud vaše aplikace používá pokročilé funkce, jako jsou iframes nebo víceokenná interakce, může být Cypress méně vhodný. Cypress a Playwright jsme také porovnali v tomto článku.

Start testování v Cypress

Chcete zjistit, jak začít testování v Cypress? V této kapitole se podíváme na to, jak nastavit Cypress, napsat jednoduchý test a spustit jej.

Pracovat budeme v Javascript.

Co k tomu potřebuji?

Pro instalaci Cypress budete potřebovat:

Máte raději video? Podívejte se na náš návod jak začít testovat v Cypress!

Instalace Cypress

Instalaci Cypress budeme provádět v Terminálu/Příkazovém řádku. Nejdříve si na disku vytvořte složku, kde budete mít Cypress projekt uložený.

Následně v této složce otevřeme Terminál (MacOs/Linux) / Příkazový řádek (Win)

Terminál, otevřená složka cypressBlok

Následně v této složce vytvoříte Node.js projekt, který bude uchovávat informace. Uděláme to příkazem:

npm init -y

Tento příkaz Vám inicializuje Node.js projekt, ve kterém Cypress nainstalujeme. Po dokončení se nám ve složce s projektem vytvoří konfigurační soubor package.json.

Spuštěný příkaz npm init-y v terminálu.

Následně nainstalujeme Cypress pomocí příkazu:

npm install cypress

Tento příkaz může trvat i několik minut.

Instalace Cypress v terminal.

Pro dokončení instalace musíme spustit Cypress aplikaci a projít jeho konfigurací. V terminálu spustíme příkaz:

npx cypress open

Otevře se nám UI Cypress aplikace:

Konfigurace Cypress

Po otevření Cypress aplikace nakonfigurujeme E2E Testing sekci, která se běžně používá pro testování v Cypress. O Component testování si povíme někdy příště.

Zvolíme tedy E2E Testing. Následně se nám zobrazí stav automatické konfigurace.

Poté pokračujeme stisknutí tlačítka Continue po kterém se nám již zobrazí výběr prohlížeče pro spuštění. Já nyní vyberu Electron a stisknu Start E2E Testing in Electron.

Nyní se nám již otevře prohlížeč se spuštěnou Cypress aplikací. Na začátek doporučuji vytvořit ukázkovou sadu testů stisknutím Scaffold example specs.

Poté se nám vygeneruje ukázková sada testů, která obsahuje spoustu inspirace a doporučuji ji určitě prozkoumat.

Vytvoření prvního testu

Pro vytvoření našeho prvního testu budeme potřebovat editor, takzvaný IDE (Integrated Development Environment). Já používám Visual Studio Code.

První krok je otevření našeho projektu v IDE. Po zapnutí VS Code otevřete složku s naším Cypress projektem.

Testy jsou umístěny ve složce cypress/e2e, vytvoříme v ní nový soubor s příponou .cy.js. 

describe("První testy pro YouTube", () => {
  it("Otevření Tredgate, odsouhlasení cookies, otevření Cypress Akademie", () => {
    cy.visit("https://tredgate.cz/");
    cy.get("#menu-item-2221 > a").click();
  });

  it("Vyplnění formuláře na kontakt", () => {
    cy.visit("https://tredgate.cz/");
    cy.get(
      '#menu-item-2782 > [href="https://tredgate.cz/kurzy-predavani-znalosti-komunite/"]'
    ).click();
    cy.get(
      ".wp-block-buttons > .wp-block-button > .wp-block-button__link"
    ).click();
    cy.get("#g2277-jmno").type("YouTube jede");
  });
});

Všimněte si, že jsme použili několik příkazů pro vytvoření našeho testu.

PříkazVysvětlení
describe()Slouží k vytvoření test sady v souboru. Describe je povinný pro každý Cypress test.
it()Tímto klíčovým slovem obalujeme náš test. Obsahuje 2 parametry: název a funkci pro tělo testu. Veškeré kroky testu musí být umístěny v této funkci.
cy.visit()Slouží k otevření webové stránky.
cy.get()Slouží k identifikaci elementu pomocí CSS selektoru. Tyto selectory nám může Cypress vygenerovat.
click()Klikne na element.
type()Napíše text do elementu.

Více informací naleznete v dokumentaci Cypressu.

Připravili jsme pro vás také GitHub repozitář, kde tento první test najdete.

Spuštění prvního testu

Nyní jsme připraveni náš test spustit. Test spustíme přes Cypress aplikaci, kterou jsme spustili v předchozích krocích.

Pokud nejsme v sekci Specs, tak ji otevřeme.

Následně v seznamu testů najdeme ten náš a klikneme na něj.

Test se automaticky spustí a my vidíme jeho výsledek v levé části aplikace:

Testování v Cypress

Cypress je nástroj, který je navržený pro maximální jednoduchost testování v Cypress s udržením přístupů ke stabilním testům. Ihned poté, co jej nainstalujete můžete vytvářet testy a jeho největší výhodou je Cypress aplikace, která vám pomůže nejen s analýzou pádů, ale také s vytvářením testů a selektorů pro elementy na dané stránce.

I proto je Cypress v tuto chvíli nesmírně populární v testerské komunitě. My se jemu taky věnujeme a máme právě pro něj vytvořenou akademii, kde vás naučíme automatizovat úplně od začátku. Přihlas se ještě dnes, aby ses stal dalším expertem na automatizaci!

Chci se přihlásit na Cypress Akademii

Závěr

Ačkoliv Cypress přináší mnoho výhod, je důležité zvážit, zda je vhodný pro váš konkrétní projekt. Pokud se specializujete na mobilní webové aplikace nebo potřebujete provádět složité testovací scénáře s vysokou interaktivitou, jako jsou iframes nebo víceokenná interakce, může být Cypress omezený. V těchto situacích je dobré porovnat několik různých nástrojů a zvážit, který nejlépe odpovídá vašim potřebám.

Přesto, pokud hledáte nástroj, který je snadný, má širokou podporu prohlížečů a má širokou komunitu, pak je Cypress vynikající volbou.

Leave a Reply