Tipy na debugging (ladenie) testov v Cypress io

Písať kód je zábava, ale čo robíš, keď veci nejdú tak, ako by mali? Keď tvoríš testy v Cypresse, nemusíš ísť ďaleko, aby si narazil na nástrahy a problémy. Môže ísť o chyby v samotnom kóde, alebo o nečakané správanie aplikácie, ktorú testuješ. Ako teda efektívne debugovať v Cypresse? Ponúkam ti niekoľko tipov a trikov, ktoré by ti mohli pomôcť.

Ešte si o Cypress nepočul? Prečítaj si náš článok o predstavení a funkciách Cypress.

1.   Cypress testing a Test Replay v Cypress 13

Spoluzakladateľ spoločnosti Cypress, Brian Mann, uviedol Test Replay v Cypress Cloud počas exkluzívneho webinára (celú nahrávku nájdeš v tomto linku). Táto funkcia poskytuje vývojárom možnosť hlbšie preniknúť do podstaty zlyhaní. Bez pochýb otvára novú kapitolu v oblasti debugovania.

Test Replay totiž umožňuje interagovať s Document Object Model (DOM) presne v bode zlyhania testu. Umožňuje tiež preskúmať udalosti v sieťovej prevádzke (network traffic), konzolové záznamy a chyby v JavaScripte bez potreby reprodukovať problém lokálne v prostrední kontinuálnej integrácie (CI)​. Pred uvedením Cypress v13, boli zlyhania testov v CI historicky zaznamenávané prostredníctvom snímok obrazovky alebo videí, ale tieto zdroje poskytovali len obmedzené informácie. Test Replay umožňuje vývojárom cestovať späť v čase presne do momentu zlyhania testu. Tým získavajú prístup k detailným informáciám, čo umožňuje rýchlejšie a presnejšie debugovanie, a zvyšuje dôveru vo výkonnosť testov v CI prostredí.

2.   Konzola je tvoj priateľ

Nie vždy potrebuješ komplexné debugovacie nástroje. Niekedy stačí otvoriť konzolu prehliadača a pozrieť sa na chybové hlášky alebo logy. Pomocou console.log môžeš vypísať hodnoty premenných alebo skúmať, ako sa mení stav objektov medzi jednotlivými krokmi testu.

Pre vypísanie hodnôt do konzoly môžeš použiť metódu .then(), kde získaný element alebo hodnotu vypíšeš priamo do konzoly.

it('should log information to the console', () => {
  // Získanie elementu a logovanie jeho textu do konzoly
  cy.get('#my-element')
    .invoke('text')
    .then((text) => {
      console.log('Text of #my-element:', text);
    });

  // Alternatívne môžete použiť cy.log pre zobrazenie informácií v Cypress výstupe
  cy.log('This message will appear in the Cypress log');
});

V tomto príklade, je console.log použitý na zobrazenie textu z elementu #my-element v konzole tvojho prehliadača. Metóda .then() je použitá na získanie textu z elementu, keď je element dostupný.

Alternatívnou možnosťou je použitie metódy cy.log() pre zobrazenie správy priamo v logu Cypress.

3.   Použi Cypress debugger

Použitie príkazu debugger v Cypress je často základným nástrojom, ktorý ti umožní pridať bod zastavenia do svojho kódu, aby si mohol preskúmať stav svojej aplikácie v danom bode testu.

Príkaz debugger sa často používa priamo v kóde pre vytvorenie bodu zastavenia. Avšak, v Cypresse, kvôli asynchrónnej povahe jeho príkazov, jednoduché vloženie debugger do kódu nemusí fungovať celkom podľa očakávaní. Aby bol príkaz debugger efektívny, je často lepšie použiť ho v kombinácii s metódou .then(), ktorá ti umožňuje zastaviť vykonávanie príkazov až po dokončení predchádzajúcich príkazov.

it('analyzing the element after it is retrieved', () => {
  cy.visit('/my/page/path'); // navštívi stránku
  cy.get('.my-element-class').then(($myElement) => {
    // príkaz debugger bude vykonaný až po dokončení príkazov cy.visit a cy.get,
    // čo ti umožní preskúmať stav DOM a vašej aplikácie v tomto bode
    debugger;
  });
});

4.   Použi metódu .debug()

Metóda .debug()v Cypresse je užitočná funkcia, ktorá umožňuje pozastaviť vykonávanie testov a poskytuje ti možnosť manuálneho preskúmania stavu aplikácie v prehliadači. Tu je príklad, ako môžeš použiť metódu .debug()vo svojich testoch v Cypresse.

it('debugging a specific element', () => {
  cy.visit('/my/page/path'); // navštívi stránku
  cy.get('.my-button-class').debug(); // zastaví vykonávanie a umožní ti preskúmať stav
});

Po vykonaní metódy .debug() môžeš otvoriť konzolu vývojárskeho nástroja vo svojom prehliadači a preskúmať stav aplikácie, vrátane vyhľadaného elementu a jeho vlastností.

Po ukončení debugovania nezabudni odstrániť alebo okomentovať všetky príkazy .debug() v testoch. Nie je dobré nechávať ich v kóde, pretože by to mohlo spôsobiť problémy v ďalších testoch.

5.    Vizualizuj svoje testy

Debugovanie v testovacích nástrojoch ako Cypress nie je iba o kóde a konzolových správach. Cypress ponúka aj možnosť vytvárania screenshotov a nahrávania videí, ktoré môžu byť nesmierne užitočné pre pochopenie, čo sa deje v tvojich testoch. Tu je niekoľko tipov, ako efektívne použiť tieto funkcie.

• Screenshoty

Cypress automaticky generuje snímky obrazovky v prípade neúspešného vykonania testov, ak testy bežia v headless móde.  Snímky obrazovky sa potom predvolene ukladajú do adresára cypress/screenshots.

Cypress umožňuje aj manuálne vytváranie screenshotov pomocou funkcie cy.screenshot().

// Vytvorí screenshot celej stránky
cy.screenshot();

// Vytvorí screenshot konkrétneho elementu
cy.get('.important-element').screenshot();

Môžeš napríklad aj špecifikovať rôzne ďalšie kritériá, ako názov súboru, či má byť screenshot vytvorený pred alebo po testovacej akcii a tak ďalej.

cy.screenshot('my-screenshot', {
  capture: 'viewport', // zachytáva iba viewport
});

• Videá

Nahrávanie videa je rovnako ako bolo uvedené pri screenshotoch aktivované v headless móde (pri spustení príkazu cypress run). Funkciu je možné aktivovať i  zmenou hodnoty video na „true“ v rámci svojho konfiguračného súboru. Ak je nahrávanie videí aktivované, Cypress vytvorí video nahrávku pre každý spec súbor.

Kedy použiť screenshoty a videá

• Screenshoty sú najlepšie pre izolované problémy alebo chyby, ktoré je možné jednoducho zaznamenať v jednom zábere.
• Videá sú užitočné, keď potrebuješ sledovať komplexný priebeh testu alebo chceš zdieľať problém so svojím tímom.
• Obe metódy sú ideálne na použitie v kombinácii s CI/CD pipeline, kde môžeš automaticky archivovať mediálne súbory a preskúmať ich, pokiaľ test zlyhá.

Debugging je neoddeliteľnou súčasťou vývoja a testovania. Je to proces, ktorý vyžaduje trpezlivosť, ale aj znalosti nástrojov a metód, ktoré máš k dispozícii. Dúfam, že tieto tipy a triky ti pomôžu stať sa efektívnejším pri debugovaní v Cypresse.

Ak vieš po nemecky a si IT tester alebo automatizovaný tester, pozri si naše firemné benefity a reaguj na voľné pracovné miesta.

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