Práca s Custom Commands v Cypress io

Cypress, ako robustný nástroj pre automatizáciu testov, je známy svojou schopnosťou zjednodušovať komplexné testovacie scenáre. Avšak práve Custom Commands otvárajú dvere k ešte väčšej efektivite a prispôsobivosti. V tomto článku spoločne preskúmame, ako môžu Custom Commands uľahčiť prácu pri testovaní.

Čo sú Custom Commands?

Custom Commands v Cypress sú v podstate vlastnoručne vytvorené príkazy, ktoré rozširujú alebo prispôsobujú základné funkcionality Cypress. Tieto príkazy sú definované užívateľom, aby zodpovedali konkrétnym potrebám testovacích scenárov, a môžu byť použité v rôznych testoch bez potreby opakovaného písania rovnakého kódu.

Custom Commands pracujú na princípe zapúzdrenia: zabalíš komplexný set príkazov alebo rutinných operácií do jednej vlastnej funkcie. Táto funkcia je potom volaná v rámci tvojich testov ako akýkoľvek iný príkaz v Cypress. To znamená, že môžeš mať jednoduchý príkaz, ktorý vykonáva viacero akcií naraz.

Napríklad, ak máš webovú aplikáciu, kde často testuješ proces prihlásenia, môžeš vytvoriť Custom Command na tento proces. Tento príkaz bude obsahovať všetky kroky potrebné na prihlásenie – vyplnenie prihlasovacieho formulára, kliknutie na tlačidlo a overenie úspešného prihlásenia. Všetko toto môžeš obaliť do jedného príkazu a tento príkaz potom používať vo všetkých testoch, kde je potrebné overiť prihlasovací proces.

Prečo používať Custom Commands?

Zjednodušenie testovacieho kódu

Pomocou Custom Commands môžeš komplexné a často používané funkcie zapúzdriť do jednoduchých, znovu použiteľných blokov. Toto zjednodušenie ti ušetrí čas a uľahčí prácu pri písaní a čítaní testov.

Zlepšenie údržby kódu

Keď príde na úpravu alebo rozširovanie tvojich testov, Custom Commands ti umožnia robiť zmeny na jednom mieste. Týmto spôsobom sa zmeny automaticky prejavia vo všetkých testoch, ktoré daný príkaz využívajú.

Lepšia organizácia testov

Custom Commands ti umožňujú systematicky organizovať a kategorizovať opakujúce sa úlohy. Vďaka tomu je tvoj testovací kód nielen efektívnejší, ale aj ľahšie pochopiteľný pre teba aj pre tvojich kolegov.

Zrýchlenie vývojového cyklu

Keďže Custom Commands redukujú množstvo písaného kódu a uľahčujú jeho údržbu, celkový čas strávený testovaním sa výrazne skracuje. Toto je obzvlášť dôležité v agilných vývojových prostrediach, kde rýchlosť a flexibilita sú na prvom mieste.

Cypress test a tvorba Custom Commands

1.    Definovanie príkazu v súbore commands.js:

Predtým, ako začneš definovať vlastné príkazy, musíš sa uistiť, že máš správne nastavené prostredie. Custom Commands sa obvykle definujú v súbore commands.js, ktorý nájdeš v adresári cypress/support.

V súbore commands.js teda môžeš začať pridávať vlastné príkazy. Pre pridanie vlastného príkazu v Cypress sa používa metóda Cypress.Commands.add(). Tu je príklad, ako vytvoriť základný Custom Command na prihlásenie:

Cypress.Commands.add('prihlasenie', (email, heslo) => {

cy.get('input[name=email]').type(email);

cy.get('input[name=password]').type(heslo);

cy.get('button[type=submit]').click();

});

V tomto príklade sme vytvorili Custom Command s názvom prihlasenie, ktorý očakáva dva parametre: email a heslo. Tento príkaz vyplní prihlasovacie údaje a potom klikne na tlačidlo pre odoslanie formulára.

2.    Použitie Custom Command v Testoch

Po definovaní Custom Command ho môžeš začať používať vo svojich testoch. Tu je príklad testu, ktorý používa vyššie definovaný Command prihlasenie:

describe('Prihlasovací Test', () => {
    it('úspešné prihlásenie do systému', () => {
        cy.visit('/prihlasenie');
        cy.prihlasenie('test@example.com', 'heslo123');
        // Tvoj ďalší testovací kód...
    });
});

V tomto testovacom scenári navštívime prihlasovaciu stránku a použijeme náš Custom Command prihlasenie na vyplnenie a odoslanie prihlasovacieho formulára.

Prepisovanie existujúcich príkazov v Cypress

Pri práci s Cypress, môžeš naraziť na situáciu, kedy potrebuješ upraviť správanie už existujúcich príkazov tak, aby lepšie vyhovovali špecifikám tvojho projektu. Je dôležité pochopiť, že Cypress ti umožňuje nielen pridať vlastné príkazy, ale aj prepísať tie už existujúce. Toto je nesmierne užitočné, keď chceš nastaviť niektoré predvolené hodnoty a vyhnúť sa vytváraniu nových príkazov, ktoré by len replikovali pôvodné funkcionality.

Cypress.Command.overwrite() umožňuje prepísať existujúci zabudovaný príkaz alebo rezervovanú internú funkciu.

Vhodný príklad použitia Cypress.Commands.overwrite môže byť v situácii, kde potrebuješ zabezpečiť dodržiavanie špecifických pravidiel alebo nastavení pre všetky testy v rámci tvojej aplikácie. Napríklad, ak chceš zmeniť správanie príkazu cy.click() tak, aby vždy overoval, či je element, na ktorý sa kliká, viditeľný a dostupný používateľovi.

Cypress.Commands.overwrite('click', (originalFn, subject, options) => {
  // Najprv over viditeľnosť elementu
  cy.wrap(subject).should('be.visible');

  // Potom vykonaj pôvodný príkaz click s pôvodnými argumentmi
  return originalFn(subject, options);
});

V tomto príklade, pred každým vykonaním cy.click(), tvoja upravená verzia príkazu najprv overí, či je element, na ktorý sa má kliknúť, viditeľný. Toto pomáha predísť chybám v testoch, ktoré by mohli nastať, keby sa pokúsili interagovať s neviditeľnými alebo inak nedostupnými elementmi. Použitie overwrite v tomto kontexte zvyšuje robustnosť a spoľahlivosť testov, zaisťuje konzistentné správanie a eliminuje potrebu opakovania tejto kontroly v každom jednotlivom teste.

Odporúčame ti...

Pri používaní Cypress.Commands.overwrite je kľúčové zachovať opatrnosť, keďže zmena správania existujúcich príkazov môže viesť k nečakaným komplikáciám a chybám v testoch. Táto metóda mení základné funkcionality používané naprieč celým testovacím kódom, čo môže spôsobiť nepredvídateľné výsledky a komplikovať údržbu a ladenie testov.

Best Practices pri používaní Custom Commands

Nasledujúce odporúčania ti pomôžu maximalizovať ich efektivitu a zároveň udržať tvoj testovací kód čistý a udržateľný:

1.    Selektívne využívanie vlastných príkazov

Vlastné príkazy predstavujú efektívne riešenie, keď je potrebné štandardizovať určité operácie naprieč celým spektrom testov. Typickými príkladmi môžu byť príkazy ako cy.setup() či cy.login(), ktoré rozširujú funkčnosť aplikácie na základe konkrétnych potrieb. Napriek tomu je dôležité vyhnúť sa nadmernému používaniu tejto možnosti. Písanie testov v Cypress sa odvíja od JavaScriptu a často je efektívnejšie definovať funkcie pre špecifické operácie, ktoré sú relevantné len pre určitý testovací súbor.

2.    Vyvarovanie sa nadmernej komplexnosti

Písať vlastné príkazy znamená vytvárať abstrakcie nad sériou vnútorných príkazov. Tento prístup môže viesť k nadmernej komplikácii a zvýšenej mentálnej námahe pre teba aj tvoj tím pri pokuse o pochopenie funkcionality týchto príkazov.

Napríklad, vytvorenie príkazu ako cy.clickButton(selector).shouldBeVisible() je v podstate len obaľovanie jednoduchých príkazov, ako cy.get(selector).click(). Táto cesta môže viesť k vytvoreniu veľkého množstva vlastných príkazov, ktoré pokrývajú každú možnú interakciu s elementmi, čo je zbytočné.

3.    Obmedzenie funkcionality jednotlivých príkazov

Pri vytváraní vlastných príkazov je dôležité udržať ich jednoduché a modulárne. Pretláčanie veľkého množstva funkcionalít do jedného príkazu vedie k jeho nepružnosti a zvyšuje potrebu prechádzania viacerých možností pre ovládanie ich správania.

4.    Minimalizácia závislosti na UI

Využívanie vlastných príkazov na abstrakciu nastavení a konfigurácií aplikácie je účinné, avšak je dôležité minimalizovať závislosť na užívateľskom rozhraní. Kde je to možné, odporúča sa využívať priame volania API alebo manipuláciu s cookies a localStorage. Týmto prístupom sa dosiahne výrazné zrýchlenie testov a zjednodušenie kódu.

5.   Udržuj Kód Čistý a Organizovaný

Pravidelná údržba a revízia tvojich vlastných príkazov je kľúčová. Uistis sa, že tvoje príkazy sú dobre dokumentované a ľahko pochopiteľné pre iných členov tvojho tímu.

Odporúčame ti...

Vždy odporúčam oboznámiť sa so Cypress documentation. Nájdeš tam podrobné informácie, ako aj pokročilé príklady používania a best  practices.

Záver

Custom Commands v Cypress sú mocným nástrojom, ktorý ti umožní písať efektívnejšie a udržateľnejšie testy. Experimentuj s nimi a uvidíš, ako ti uľahčia prácu a zefektívnia proces testovania tvojich aplikácií. Nezabudni, že prax je kľúčom k úspechu, tak sa do toho pusti a uži si výhody, ktoré Cypress ponúka. Veľa šťastia!

Ak vieš po nemecky a si software tester, pozri si naše benefity pre zamestnancov a reaguj na najnovšie ponuky práce.

O autorovi

Katarína Kučáková

Software Test Engineer

Moja cesta k testovaniu softvéru sa začala v roku 2019 až po štúdiu ekonómie a pracovných skúsenostiach v iných odvetviach. To mi pomohlo vnímať IT svet v rôznych súvislostiach. Ten totiž ponúka neustále nové výzvy, pre ktoré rada hľadám riešenia. Obľubujem oddych pri čítaní, turistiku alebo lyžovanie. LinkedIn

Daj nám o sebe vedieť