Úvod do testování v Playwright

Hledáš nástroj pro automatizaci testování? V dnešním článku se podíváme na zoubek nástroji Playwright. Zaměříme se na to jaké je testování v Playwright, jaké má výhody či nevýhody, a také se podíváme jak se s ním testuje. Návod je vytvořený v jazyce TypeScript.

Co je to Playwright?

Vyvinut Microsoftem, Playwright je jeden z dalších nástrojů dynamicky se vyvíjejícího oboru automatizace testování. Zaměřuje se jak na webové, mobilní i API testování. Cílem vývojářů je vytvořit end-to-end automatizační nástroj, který je schopen zautomatizovat velkou část webových aplikací.

Proč zvolit Playwright

Proč zvolit testování v Playwright a ne například Selenium, Cypress nebo Robot Framework?

Jeden z důvodu je ten, že vývojáři Playwright se snaží vytvořit nástroj, který bude podporovat otestování většiny operačních systémů a aplikací. Používají k tomu moderní přístup, který se zaměřuje na to, aby Test Automation Engineer mohl testovat a nemusel automatizovat desítky hodin do vyvíjení automatizačního frameworku.

Ihned po instalaci můžeš:

• Vytvářet stabilní Frontend i API testy,
• Používat Playwright UI k debugování a vytváření testů,
• Reportovat a logovat,
• Spouštět testy paralelně,
• Spouštět testy na cloudu (GitHub Actions).

Podporuje velkou část prohlížečů. Například:

• Chromium (Google Chrome, Edge)
• Firefox
• WebKit (Safari)

Můžeš vytvářet i testy na mobilní zařízení pomocí jejich emulace (pouze web).

Jaké jazyky Playwright podporuje?

Pro psaní skriptů můžeš použít:

• JavaScript
• TypeScript
• Python
• Java
• .NET

Díky jeho vzrůstající oblibě je také čím dál jednodušší najít řešení problémů a chyb.

Playwright vyniká zejména podporou mobilního testování, jednoduchostí používání a také API testováním.

Hledáš-li porovnání Playwright a Cypress, podívejte se náš článek!

Začátek testování Playwright

Instalace Playwright

Potom v této složce vytvoříš Node.js projekt, který bude uchovávat informace.

Uděláš to příkazem:

npm init playwright@latest

Terminál se tě po potvrzení doptá na detaily konfigurace:

• Potvrzení instalace – napiš „y“ a potvrď enterem.
• Výběr programovacího jazyka – Typescript.
• Umístění testů – potvrď výchozí.
• Vytvoření GitHub Actions workflow – napiš „y“ a potvrď enterem.
• Instalace prohlížečů – napiš „y“ a potvrď enterem.

Po potvrzení všech kroků ti npm stáhne a nainstaluje Playwright i všechny potřebné nástroje. Pozor, toto může zabrat několik minut v závislosti na rychlosti tvého internetu.

Spuštění testů

V rámci instalace nám Playwright vytvořil i ukázkové testy. Můžeš je ihned vyzkoušet spustit pomocí příkazu:

npx playwright test

Tento příkaz spustí všechny vzorové testy. Všimni si, že testy běží pomocí takzvaných „workerů“. Znamená to, že testy jsou bez jakékoliv dodatečné konfigurace spouštěny paralelně (více testů zároveň).

A to je vše, co musíš pro spuštění testů udělat. Nyní se podíváme na to, jak testy můžeš vytvářet a nastartujeme tvé reálné testování v Playwright

Vytvoření prvního testu

Pro vytvoření tvého prvního testu budeme potřebovat editor, takzvaný IDE (Integrated Development Environment). Já používám a doporučuji Visual Studio Code.

První krok je otevření tvého projektu v IDE. Po zapnutí Visual Studio Code otevři složku s tvým Playwright projektem. Uděláš to pomocí možnosti „Otevřít složku…“ (Open folder… v angličtině).

Testy jsou umístěny ve složce tests, vytvoř v ní nový soubor s příponou .spec.ts.

Tento test bude provádět:

• Otevření Tredgate webu.
• Kliknutí na sekci Kurzy.
• Kliknutí na kontaktní formulář.
• Vyplnění Jména a příjmení ve formuláři.

import { test } from "@playwright/test";

test("Open tredgate contact form and fill name", async ({ page }) => {
  await page.goto("https://tredgate.cz/");
  await page.locator("#menu-item-2782").click();
  await page
    .locator("//a[contains(text(),'Máš dotazy? Kontaktuj nás')]")
    .click();
  await page.locator("#g2277-jmno").type("Josef Test");
});

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

Příkaz	Vysvětlení
import	Slouží k tomu, abychom v našem testu vytvořili vazby na Playwright knihovnu a mohli použít příkaz test()
test()	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.
goto()	Slouží k otevření webové stránky.
locator()	Slouží k identifikaci elementu pomocí CSS selektoru či xPath.
click()	Klikne na element.
type()	Napíše text do elementu.

Více informací nalezneš v dokumentaci Playwrightu.

Spuštění prvního testu

Nyní jsi připravený tvůj test spustit. Pro spuštění využijeme možnosti vytvoření reportu přímo v terminálu.

Použiješ pro to upravený spouštěcí příkaz:

npx playwright test --reporter=list

Report je v terminálu nyní zřetelnější a vidíš zde výpis výsledků všech tvých testů.

Testování v Playwright

Playwright je vytvořený tak, aby tester, který vytváří testy měl jednoduchý a otevřený přístup k jeho API. Ihned po instalaci je tedy možné skriptovat testy včetně doplňkových vlastností jako je reportování či paralelní běh. Díky tomuto přístupu je učení Playwright rychlé a jednoduché. Je ale ovšem jako u všech skriptovacích nástrojů ovládat programovací jazyk ve kterém testy píšeš. Chceš se stát expertem na Playwright? Přihlas se na naši 3 měsíční akademii, více informací a přihlášku nalezneš na stránkách kurzu.

Závěr

Playwright je jeden z moderních automatizačních nástrojů, který ukazuje kam směřuje budoucnost automatizace testování. Je to také výborná volba pro osobní rozvoj v rámci testování.

Doufám, že se ti dnešní článek líbil, a že jsi v něm nalezl/a informace, které jsi hledal. Budeme moc rádi pokud článek budeš sdílet či napíšeš tvůj názor do komentářů.