V procesu tvorby softwaru hraje testování klíčovou roli. Je to nezbytná fáze, která vývojářům umožňuje zjistit, jak dobře program splňuje zadané požadavky. Testování také pomáhá odhalovat a opravovat chyby, zranitelnosti a celkově zvyšovat kvalitu softwaru.
Pokud se testování neprovádí řádně, je velmi pravděpodobné, že se do oběhu dostane nekvalitní software, který nesplňuje potřeby uživatelů. Takový software může být plný chyb a bezpečnostních mezer, které mohou zneužít škodlivé osoby.
Testování softwaru je bezpochyby důležité, ale jeho provedení nemusí být vždy jednoduché. Zvláště testování webových aplikací může být složitý, nákladný, časově náročný a náročný proces, pokud se provádí manuálně.
Při testování webové aplikace je nutné simulovat chování skutečných uživatelů. To znamená, že je potřeba otestovat všechny možné akce, které uživatelé mohou provést, od registrace účtu, přes přihlášení až po interakci s různými prvky webové aplikace.
Manuální provádění těchto úkonů je nudné, časově náročné a neefektivní. Snadno se mohou přehlédnout chyby a testy nemusejí být provedeny důkladně. Proto přicházejí na řadu nástroje jako Playwright a Cypress, které automatizují testování webových aplikací v moderních webových prohlížečích.
Playwright
Playwright je open-source framework pro automatizaci a komplexní testování webových aplikací, který funguje s různými prohlížeči. Automatizace spočívá v použití softwaru pro automatizaci běžných webových akcí, jako je vytváření uživatelských účtů, přihlašování, vyplňování formulářů a klikání na tlačítka. Automatizace umožňuje softwaru chovat se tak, jako by aplikaci používal skutečný člověk.
End-to-end testování je důkladný a komplexní přístup, který hodnotí a ověřuje kompletní tok aplikace od začátku až do konce.
Playwright je vyvíjen a spravován společností Microsoft. Umožňuje automatizovat a testovat webové aplikace v prohlížečích Chromium, Firefox a WebKit pomocí jediného API.
Chromium je open source kódová základna a prohlížeč, který se používá pro vývoj dalších prohlížečů. Prohlížeče jako Chrome, Microsoft Edge, Opera a Samsung Internet jsou založeny na Chromiu. WebKit je naopak jádro prohlížeče používané v Safari. Playwright umožňuje testování a automatizaci v těchto různých prohlížečích pomocí jednotného API.
S Playwrightem lze testovat scénáře, které zahrnují více zdrojů, záložek a uživatelů. Umožňuje také vytvářet scénáře s různými kontexty pro různé uživatele a spouštět je na serveru. Playwright má také funkce, které pomáhají vyhnout se „flaky“ testům, tedy testům, které poskytují nekonzistentní výsledky bez jakékoli změny v testu nebo kódu.
Kromě toho má Playwright výkonné nástroje, jako je Trace Viewer, který zaznamenává informace jako snímky DOM a screencasty testu. To umožňuje detailní analýzu případných selhání.
Součástí je také Codegen, který umožňuje generovat testy pouhým zaznamenáváním akcí, a Playwright Inspector, který dále usnadňuje kontrolu průběhu testování.
Cypress
Cypress je open-source nástroj, který umožňuje spolehlivé testování jakéhokoli webového obsahu bez ohledu na použitou technologii. S Cypress lze testy snadno nastavit, psát, spouštět a ladit.
Cypress umožňuje psát všechny typy testů, včetně end-to-end testů, unit testů, integračních testů a testů komponent. Bez ohledu na to, jaké programovací jazyky byly použity při vývoji webové aplikace, pokud ji lze spustit v prohlížeči, Cypress ji dokáže otestovat.
Cypress umožňuje „cestovat časem“ během testování, protože pořizuje snímky testů během jejich spouštění. To umožňuje sledovat, co se dělo v každém kroku. Dále Cypress automaticky pořizuje snímky obrazovky selhání a videa kompletních testovacích sad při spouštění z příkazové řádky.
Cypress také umožňuje ověřovat a řídit odezvy serveru a chování funkcí a také řídit a blokovat síťový provoz při spouštění testů. Díky tomu poskytuje Cypress konzistentní výsledky testů, usnadňuje ladění díky čitelným chybovým hlášením a trasování zásobníku.
Mezi výhody používání nástrojů pro testování a automatizaci webových aplikací jako Playwright a Cypress patří:
Komplexní pokrytí testy
Nástroje jako Playwright a Cypress umožňují provádět velmi komplexní testy webových aplikací. S pomocí automatizovaných testovacích nástrojů lze spouštět velké množství testů v různých scénářích, kontextech, konfiguracích, prohlížečích a podmínkách.
Na rozdíl od manuálního testování, které často má velmi nízké pokrytí testem, automatizační a testovací nástroje vedou k mnohem vyššímu pokrytí. Umožňují spouštět různé typy testů a výsledkem jsou lépe otestované a kvalitnější webové aplikace.
Snadnější testování webových aplikací
Klíčovou výhodou webových testovacích a automatizačních nástrojů je to, že usnadňují proces testování a přinášejí lepší uživatelský zážitek. Manuální testování je velmi náročné, zvláště pokud je potřeba aplikaci důkladně otestovat v různých prohlížečích a podmínkách. Použitím nástrojů jako Playwright a Cypress se proces testování webové aplikace značně zjednodušuje.
Včasné odhalení chyb
Automatizační nástroje jsou velmi efektivní při odhalování chyb ve webových aplikacích. Dokážou zachytit chyby a nedostatky, které by vývojáři mohli přehlédnout. Navíc usnadňují proces ladění generováním čitelných trasovacích zásobníků a chybových hlášení a pořizováním snímků míst, kde dochází k chybám.
Rychlejší a přesnější testování
Pro správné otestování aplikací je nutné provést všechny akce, které mohou uživatelé aplikace provést a to v různých webových prohlížečích. Tento proces může být velmi časově náročný, pokud se provádí manuálně. S nástroji jako Playwright nebo Cypress se testování aplikací výrazně zrychlí a zefektivní, což zkracuje čas potřebný pro nasazení aplikací.
Lepší testovací reporty a analýzy
Automatizované testovací nástroje vytvářejí podrobné zprávy o testech. To umožňuje vývojovým a testovacím týmům snadno sledovat proces testování, sledovat, jak si aplikace vede v různých scénářích, identifikovat vzorce a získávat zprávy pro rozhodování. Tyto zprávy a analýzy se dají také využít k identifikaci oblastí aplikace, které potřebují vylepšení.
Jak funguje Playwright a Cypress
Playwright a Cypress jako frameworky pro webové testování a automatizaci fungují tak, že simulují interakce uživatelů s webovými aplikacemi. Tím se ověřuje, zda se aplikace chová podle očekávání, zobrazuje správné informace a splňuje požadavky uživatelů.
Vývojáři a testeři používají tyto nástroje k psaní skriptů, které simulují interakce uživatelů s webovou aplikací. Tím se automatizují akce, které uživatelé mohou provádět. Například lze psát skripty pro otevírání prohlížečů, přechod na konkrétní URL, přihlašování, vyplňování formulářů, klikání na tlačítka a další akce dostupné v aplikaci.
Skripty, které napíšete, určují typ testování, které se v aplikaci spustí. Nástroje jako Cypress umožňují spouštět různé typy testů, jako jsou end-to-end testy, unit testy, testy komponent a integrační testy.
Níže je uveden příklad testovacího skriptu v Cypressu:
describe('Příklad testovací sady', () => {
it('Měl by navštívit example.com a interagovat se stránkou', () => {
cy.visit('https://example.com');
// Interakce s prvky na stránce
cy.get('input[type="text"]').type('Ahoj světe!');
cy.get('button[type="submit"]').click();
// Ověření chování
cy.title().should('eq', 'Example Domain');
});
});
Níže je uveden příklad testovacího skriptu v Playwright:
const { chromium } = require('playwright');
(async () => {
// Otevření prohlížeče chromium
const browser = await chromium.launch();
// Vytvoření stránky
const page = await browser.newPage();
// Otevření URL
await page.goto('https://example.com');
// Práce s prvky na stránce
await page.fill('input[type="text"]', 'Ahoj světe!');
await page.click('button[type="submit"]');
// Potvrzení chování
const title = await page.title();
expect(title).toBe('Example Domain');
// Zavření prohlížeče
await browser.close();
})();
Pro interakci s prvky webové aplikace poskytují testovací nástroje selektory, které umožňují popsat, jak najít konkrétní prvky, jako jsou tlačítka, odkazy a vstupní pole.
Jakmile se podaří identifikovat prvky, testovací nástroje poskytují mechanismy, které umožňují provádět tvrzení a ověřit, zda se různé části webové aplikace chovají podle očekávání.
Playwright i Cypress nabízejí možnost zaznamenávat testy a pořizovat snímky během jejich průběhu. To umožňuje podívat se zpětně a zjistit, co se přesně stalo v každé fázi testu.
Testovací a automatizační nástroje také poskytují podrobné výsledky testů, protokoly a zprávy, které pomáhají identifikovat problémy v testovaných aplikacích, ladit a také sledovat pokrytí testy.
Playwright vs. Cypress
Playwright i Cypress jsou velmi výkonné nástroje pro automatizaci testování, ale liší se v nabízených funkcích. Zde je srovnání:
| Funkce | Cypress | Playwright |
|---|---|---|
| Testovací jazyk | JavaScript je hlavní jazyk pro psaní testů. Může testovat aplikace v jakémkoliv jazyce, pokud je lze spustit v prohlížeči. | Podporuje psaní testů v TypeScriptu, JavaScriptu, Pythonu, .NET a Javě. |
| Podpora prohlížečů | Podporuje testování pouze ve Firefoxu a prohlížečích založených na Chromiu. | Podporuje testování ve Firefoxu, prohlížečích založených na Chromiu a prohlížečích založených na WebKitu. |
| Podpora více záložek | Nepodporuje testování na více záložkách. | Umožňuje spouštět testovací scénáře, které zahrnují více záložek. |
| Podpora více prohlížečů | Neumožňuje testování ve více prohlížečích současně. | Umožňuje spouštět testy ve více prohlížečích současně. |
| Testování na různých platformách | Lze ho instalovat a používat v systémech Mac, Linux a Windows. | Lze ho instalovat a používat v systémech Windows, Linux a macOS, lokálně nebo na CI, bezhlavě nebo s uživatelským rozhraním. |
| Zesměšňování a nahrazování sítí | Podporuje zesměšňování a nahrazování sítí. | Podporuje zesměšňování a nahrazování sítí. |
| Asynchronní testování | Automaticky čeká na příkazy a tvrzení před pokračováním. | Vyžaduje explicitní zpracování asynchronních operací pomocí async/await. |
| Paralelní testování | Lze spouštět nahrané testy paralelně na více počítačích. Paralelní testování na jednom počítači se nedoporučuje. | Testy se spouštějí paralelně spuštěním několika pracovních procesů pro každé dostupné jádro CPU. |
Případy použití Playwright a Cypress
Testování je nedílnou součástí každého vývojového cyklu, a proto mnoho společností používá Cypress a Playwright.
Například DHL, logistická společnost, potřebovala způsob, jak urychlit nasazení svých softwarových řešení bez kompromisů v kvalitě. Použitím Cypressu se jim podařilo zvýšit provádění testů, pokrytí, zlepšit kulturu testování front-endu a dosáhnout o 65 procent rychlejších testovacích běhů.
Spotahome, online služba pro rezervaci bydlení v Evropě, také používá Cypress pro testování. Díky tomu mohli otestovat přes 160 scénářů, zvládnout 250 nasazení týdně, spustit přes 130 testů týdně a využít paralelizaci pro úsporu 70 procent času na testování.
Gatsby, generátor webů s otevřeným zdrojovým kódem, díky použití Cypressu pro testování dokázal přijmout více příspěvků s otevřeným zdrojovým kódem. Díky tomu může Gatsby rychleji dodávat nové funkce, snížil stáří otevřených PR o 54 procent a zvýšil spolehlivost.
Playwright je také oblíbený mezi společnostmi, startupy i v open-source projektech. Aplikace jako Visual Studio Code, Bing, Outlook a Disney Hotstars používají Playwright k testování svých aplikací, aby zajistily jejich vysokou kvalitu.
Open-source projekty jako Material UI, webové komponenty Adobe Spectrum, Lion a React Navigation také používají Playwright pro webové testování a automatizaci.
Závěr
Testování je kritická fáze ve vývoji softwaru a neměla by být nikdy opomíjena, pokud chceme vytvořit kvalitní software, který splňuje požadavky uživatelů. Jak ukazují zmíněné případy použití, testování má mnoho výhod pro celkovou výkonnost společnosti.
Cypress i Playwright jsou velmi solidní a robustní nástroje pro testování a automatizaci webu, pokud jde o výběr testovacího nástroje.
Pokud potřebujete nástroj, který umožňuje snadné paralelní spouštění testů na více záložkách, psaní testů v různých programovacích jazycích, spouštění testů ve všech populárních prohlížečích a přístup k pokročilým funkcím, je Playwright tou správnou volbou.
Pokud se testování zaměřuje více na front-end, zejména na aplikace vyvíjené v JavaScriptových frameworkách jako Angular, Vue a React, měl by být Cypress tou volbou.
Cypress by měl být také zvolen, pokud je požadován velmi rychlý výkon, vývoj řízený testováním, lokální vývoj a ladění, a pokud je potřeba spolehlivý nástroj pro malé až středně velké projekty.