Playwright (1. díl) - Úvod a porovnání se Selenium a Cypress

Co je Playwright?

Playwright je open-source nástroj (vyvinutý Microsoftem) pro end-to-end testování webových aplikací. Podporuje tři nejpoužívanější webové prohlížeče (Chromium/Chrome, Firefox a WebKit/Safari). Testy lze psát v JavaScriptu, TypeScriptu, Pythonu, Javě nebo .NETu a nástroj má vlastní vestavěný test runner (viz Co je to test runner?). Kromě použití na automatické testování funkcionality webových aplikací lze použít i na kontrolu vizuální stránky (screenshoty, videozáznamy) a API testy. Testy lze spouštět jak v režimu headed, tak i headless (při spuštění testu se zobrazí okno prohlížeče, nebo se test spustí „na pozadí“ - viz Co je headed a headless režim?).

Hlavní přednosti Playwrightu

• Podpora Chromium, Firefox a WebKit
• Automatické čekání na načtení prvků
• Možnost testovat více uživatelů nebo oken současně
• Zabudované screenshoty, videa a HTML reporty
• Možnost testování REST API
• Snadná integrace do CI/CD

Playwright vs. Selenium

Výhody Selenium oproti Playwrightu

1. Širší podpora programovacích jazyků

• Selenium podporuje Java, Python, C#, Ruby, JavaScript, Kotlin a další.
• Playwright oficiálně podporuje JavaScript/TypeScript, Python, Java a .NET.

2. Podpora více (i starších) prohlížečů

• Selenium umožňuje testování i ve starších verzích prohlížečů, včetně Internet Exploreru.
• Playwright podporuje pouze Chromium (Chrome), Firefox a WebKit (Safari), ale nepodporuje Internet Explorer a některé starší verze jiných prohlížečů.

3. Zavedený ekosystém a silná komunita

• Selenium je na trhu déle a má silnou a aktivní komunitu.

4. Integrace s nástroji třetích stran

• Selenium se dobře integruje s:
  • CI/CD nástroji
  • Testovacími frameworky (např. TestNG, JUnit)
  • Cloud službami (např. BrowserStack, Sauce Labs)
  • Reporting nástroji

5. Dodržuje W3C WebDriver standard

• Selenium používá oficiální WebDriver protokol, který je podporován přímo výrobci prohlížečů. Nabízí tak stabilní a oficiálně podporovaný způsob testování reálného chování prohlížeče.

Nevýhody Selenium oproti Playwrightu

1. Chybí vizuální debugovací prostředí a tracing

(Co to je tracing? viz Co znamená tracing v Playwrightu?)

• Selenium nemá na rozdíl od Playwrightu UI mode pro sledování jednotlivých kroků v testu. Tento režim umožňuje interaktivní spouštění a ladění testů pomocí grafického rozhraní, které zobrazuje průběh testu, aktuální stav stránky a umožňuje krokovat jednotlivé části testovacího kódu. Každý krok testu lze rozkliknout, vidět jeho výsledek a případně zopakovat.
• Playwright podporuje nahrávání videa spuštěného testu

2. Slabší podpora některých funkcí

• Selenium nemá přímou podporu pro:
  • Více záložek (tabs)
  • Kontexty prohlížeče (browser contexts)
  • Shadow DOM
  • Automatické čekání na prvky

3. Větší nestabilita a flaky testy

• V Selenium často svádí k použití tvrdých waitů (Thread.sleep())

• Playwright nabízí:

  • Automatické čekání
  • Vestavěné retry mechanismy

4. Chybí podpora pro API testy

• Selenium se zaměřuje čistě na UI (API testy je třeba zajistit jinými frameworky - v Javě např. REST Assured)

• Playwright podporuje:

  • Testování REST API
  • Zachytávání síťové komunikace

5. Pomalejší běh testů

• Zatímco Selenium komunikuje s prohlížečem přes síť pomocí WebDriver protokolu, Playwright běží v rámci jednoho procesu, a proto bývá výrazně rychlejší.

6. Složitější nastavení a konfigurace

• Selenium: Vyžaduje instalaci a správu chromedriver, geckodriver atd. (není až takový problém při použití Maven apod.)
• Playwright: Instaluje a spravuje prohlížeče automaticky.

Playwright vs. Cypress

Jednou z hlavních vlastností Cypressu je, že běží přímo uvnitř prohlížeče, v kterém zároveň běží i testovaná stránka. To přináší jak výhody, tak nevýhody:

Výhody běhu uvnitř prohlížeče

1. Přímý přístup k webové aplikaci

Cypress má přístup ke všem objektům stránky, jako kdyby byl součástí aplikace:

• Může číst a upravovat DOM
• Přistupuje k JavaScriptovým proměnným aplikace
• Snadno kontroluje stavy (např. cookies, Redux)

2. Rychlejší debugování a výpisy chyb

• Cypress má GUI s výpisy přímo ve stránce.
• Umožňuje sledovat jednotlivé kroky testu a aktuální stav DOM.

3. Automatické čekání

Díky napojení na běžící aplikaci může Cypress:

• Automaticky čekat na načtení prvků

Nevýhody běhu uvnitř prohlížeče

1. Zkreslení reálného prostředí

• Cypress běží jako součást aplikace, a tak s ní sdílí paměť, kontext, proměnné (není zcela izolovaný, jako by byl skutečný uživatel)

2. Omezená podpora více oken, tabů a kontextů

• Cypress nepodporuje nativně více oken či tabů
• Neumí izolovat testy pomocí „browser context“ jako Playwright.

Výhody Cypressu oproti Playwrightu

1. Jednodušší start

• Cypress je vhodný i pro úplné začátečníky. Instalace, UI prostředí i základní testy jsou velmi intuitivní

2. Nástroje pro vizuální ladění

• Možnost „time-travel“ – při ladění testů v UI prostředí se lze vracet i do minulosti

3. Výborná integrace s front-end frameworky

• Skvělá integrace s Reactem, Vue, Angular.
• Možnost mountování jednotlivých komponent (component testing).

Nevýhody Cypressu oproti Playwrightu

1. Omezená podpora prohlížečů

• Cypress podporuje především Chromium (Chrome, Edge) a Firefox.
• Playwright navíc podporuje i WebKit (Safari).

2. Vlastní asynchronní řetězení příkazů

Běžné způsoby práce s proměnnými (např. přes const, let) nefungují očekávaným způsobem. Důvodem je, že Cypress používá vlastní systém asynchronního řetězení příkazů (tzv. command queue), který ovlivňuje i logikou psaní testů. Například tento kód nefunguje:

const text = cy.get('h1').text() // text je undefined

• cy.get() nevrací hodnotu hned, ale pouze zařadí příkaz do fronty
• test běží asynchronně a Cypress sám řídí, kdy se co provede

V Cypressu je třeba k takové proměnné přistupovat např. pomocí .then() (případně použitím aliasů):

cy.get('button').then(($btn) => {
  const txt = $btn.text()
  cy.get('form').submit()
  cy.get('button').should(($btn2) => {
    expect($btn2.text()).not.to.eq(txt)
  })
})

Jak to ovlivňuje použitelnost?

• Ztráta plynulosti při psaní testů.

  • Nelze jednoduše ukládat hodnoty do běžných proměnných. Je třeba psát více vnořených .then() nebo používat aliasy.

• Nedá se použít await a async

  • Cypress není kompatibilní s klasickou async/await syntaxí.

• Složitější logika a čitelnost

  • Testy často končí jako vnořená "callback hell", pokud je potřeba více kroků. Oproti tomu v Playwrightu lze použít běžnou await syntaxi.

3. Menší možnosti paralelizace

• Cypress má určitá omezení při běhu více testů paralelně (zejména v open-source verzi).
• Playwright umožňuje snadné paralelní spouštění testů i bez placených nástrojů.

Selenium vs. Cypress vs. Playwright

Slovníček

Co je to test runner?

Zpět do textu

test runner zajišťuje spuštění, organizaci a vyhodnocení testů. Playwright používá svůj vlastní integrovaný test runner.

Co má test runner na starosti?

• Spouští testy – najde soubory s testy (např. *.spec.ts) a postupně je vykonává
• Izoluje testy – každý test běží ve vlastním kontextu
• Zajišťuje paralelizaci – umí spouštět testy současně v několika vláknech (workers)
• Spravuje hooky (beforeEach, afterEach apod.)
• Reportuje výsledky
• Podporuje projektové konfigurace, např. spuštění testů ve více prohlížečích (Chromium, Firefox, WebKit)

Co je headed a headless režim?

Zpět do textu

Headless režim

headless znamená spuštění testu bez grafického rozhraní. Prohlížeč se spustí na pozadí bez otevření okna na obrazovce.

• Výhody

  • Rychlejší běh testů.
  • Vhodné pro CI/CD prostředí (např. GitHub Actions, GitLab CI).
  • Méně zatěžuje systém.

• Nevýhody

  • Není možné vidět, co se v prohlížeči děje.
  • Může být obtížnější ladit vizuální chyby.

Headed režim

V headed režimu se prohlížeč skutečně otevře a test probíhá s viditelným oknem.

• Výhody

  • vhodné pro ladění – vidíte, co test skutečně dělá
  • Lze snadno identifikovat chyby v uživatelském rozhraní

• Nevýhody

  • Pomalější než headless
  • Nevhodné pro automatizované prostředí

Co znamená tracing v Playwrightu?

Zpět do textu

Tracing je mechanismus pro detailní zaznamenání průběhu testu, který lze zpětně analyzovat.

Co tracing zaznamenává:

• Snímky stránky (snapshots) po každé akci
• Snímky DOMu (jak vypadal HTML strom v danou chvíli)
• Síťovou komunikaci – požadavky a odpovědi (včetně hlaviček, status kódů)
• Kroky testu – každý příkaz a jak dlouho trval
• Konzolové logy a chyby
• Screenshoty, videa (pokud je zapnuto)

Po běhu testu vyrobí Playwright .zip soubor, který lze otevřít v interaktivním Trace vieweru.

Co bude dál?

V dalších dílech se podívám na první testy v Playwrightu a jeho konfiguraci.