Playwright

1. Co je Playwright?

Playwright je moderní framework pro automatizované end-to-end testování webových aplikací.

Umožňuje ovládat reálný prohlížeč, simulovat chování uživatele a ověřovat chování aplikace z pohledu frontend UI.

Playwright je vhodný zejména pro:

Web portály
Internet banking
E-commerce aplikace
Admin portály
SPA aplikace (React, Angular, Vue)
Cross-browser testing
CI/CD automatizaci

2. Hlavní výhody Playwright

Moderní a rychlý framework
Vestavěný auto-waiting
Výborná stabilita testů
Cross-browser podpora
Paralelní spouštění testů
Vestavěný trace viewer
Podpora API testingu
Mockování network requestů
Screenshoty a video recording
Silná podpora accessibility selectorů

3. Podporované prohlížeče

Browser Engine	Playwright Browser
Chromium	Chrome / Edge
Firefox	Firefox
WebKit	Safari engine

Díky WebKit podpoře lze testovat i Safari behavior, což je častý problém u jiných frameworků.

4. Klíčové vlastnosti Playwright

Cross-browser testy

Jeden test lze spouštět nad více browsery bez změny kódu.

projects: [
  { name: 'chromium' },
  { name: 'firefox' },
  { name: 'webkit' }
]

Locators

Playwright používá moderní a stabilní systém locatorů.

Doporučené přístupy:

getByRole()
getByLabel()
getByText()
getByPlaceholder()
getByTestId()

Příklad:

page.getByRole('button', { name: 'Submit payment' })

Accessibility-based selektory bývají stabilnější a čitelnější než CSS selektory.

Auto-waiting

Playwright automaticky čeká, až je prvek:

visible
enabled
attached to DOM
ready for interaction

Díky tomu výrazně snižuje flaky testy.

Špatně:

await page.waitForTimeout(5000);

Lépe:

await expect(button).toBeVisible();

Trace Viewer

Playwright umí ukládat detailní trace průběhu testu.

Obsahuje:

Kroky testu
Screenshoty
DOM snapshoty
Network requesty
Console logy
Timing jednotlivých akcí

npx playwright show-trace trace.zip

API a network testing

Playwright podporuje:

Intercept requestů
Mockování API
Monitoring network traffic
API testing bez browseru

await page.route('**/payments', route => {
  route.fulfill({
    status: 200,
    body: JSON.stringify({ success: true })
  });
});

5. Instalace Playwright

V Node.js projektu se Playwright typicky instaluje jako development dependency.

npm init playwright@latest

Instalátor vytvoří:

ukázkové testy
playwright.config.ts
test adresář
CI konfiguraci

Spuštění testů

npx playwright test

HTML report

npx playwright show-report

Spuštění konkrétního testu

npx playwright test login.spec.ts

Debug mode

npx playwright test --debug

6. Struktura Playwright projektu

project/
│
├── tests/
├── pages/
├── fixtures/
├── utils/
├── playwright.config.ts
├── package.json
└── test-results/

Doporučená struktura:

tests/ — samotné testy
pages/ — Page Object Model
fixtures/ — reusable setup
utils/ — helper funkce

7. Ukázkový test webového portálu

import { test, expect } from '@playwright/test';

test('user can see account overview after login', async ({ page }) => {
  await page.goto('https://banking-test.example.com/login');

  await page.getByLabel('Username').fill('test.user');

  await page.getByLabel('Password').fill('correct-password');

  await page.getByRole('button', { name: 'Log in' }).click();

  await expect(
    page.getByRole('heading', {
      name: 'Account overview'
    })
  ).toBeVisible();

  await expect(
    page.getByTestId('account-balance')
  ).toContainText('EUR');
});

8. Assertions

Assertions ověřují očekávaný stav aplikace.

Časté assertions:

await expect(locator).toBeVisible();

await expect(locator).toContainText('Success');

await expect(locator).toHaveValue('John');

await expect(page).toHaveURL(/dashboard/);

await expect(locator).toBeEnabled();

9. Page Object Model (POM)

POM odděluje UI logiku od testů.

Výhody:

Lepší maintenance
Menší duplicita
Přehlednější testy
Znovupoužitelný kód

Příklad:

export class LoginPage {

  constructor(page) {
    this.page = page;
  }

  async login(username, password) {
    await this.page.getByLabel('Username').fill(username);
    await this.page.getByLabel('Password').fill(password);

    await this.page
      .getByRole('button', { name: 'Log in' })
      .click();
  }
}

10. Test hooks

Hooks umožňují setup a cleanup testů.

test.beforeEach(async ({ page }) => {
  await page.goto('/');
});

test.afterEach(async () => {
  console.log('Cleanup');
});

11. Paralelní běh testů

Playwright podporuje paralelní execution.

Výhody:

Rychlejší CI pipeline
Kratší execution time
Lepší škálovatelnost

npx playwright test --workers=4

12. Screenshoty a video

Playwright umí automaticky ukládat:

Screenshoty
Video recording
Trace files

use: {
  screenshot: 'only-on-failure',
  video: 'retain-on-failure',
  trace: 'retain-on-failure'
}

13. Debugging

Inspector mode

npx playwright test --debug

Codegen

Playwright umí generovat testy z uživatelských akcí.

npx playwright codegen https://example.com

Codegen je vhodný pro rychlý start, ale výsledný kód bývá potřeba refaktorovat.

14. Mockování API

Mockování pomáhá:

izolovat frontend
zrychlit testy
simulovat error scénáře
odstranit závislost na backendu

await page.route('**/balance', async route => {
  await route.fulfill({
    status: 200,
    body: JSON.stringify({
      balance: 1500
    })
  });
});

15. Environment konfigurace

Playwright podporuje různé prostředí:

DEV
TEST
UAT
PROD-like

use: {
  baseURL: 'https://test.example.com'
}

16. CI/CD integrace

Playwright se často používá v:

GitHub Actions
Azure DevOps
GitLab CI
Jenkins

Typický pipeline flow:

Install dependencies
↓
Build application
↓
Run Playwright tests
↓
Generate report
↓
Publish artifacts

17. Best practices

Používej accessibility locators
Minimalizuj waitForTimeout()
Piš krátké a izolované testy
Používej Page Object Model
Odděluj test data
Mockuj nestabilní externí služby
Spouštěj testy paralelně
Pravidelně refaktoruj automation code

18. Nejčastější chyby

Používání nestabilních CSS selectorů
Příliš mnoho sleep/wait timeoutů
Závislost mezi testy
Sdílená test data
Příliš dlouhé E2E scénáře
Ignorování flaky testů
Chybějící cleanup

19. Výhody Playwright oproti Selenium

Playwright	Selenium
Vestavěný auto-waiting	Často nutné explicit waits
Modern API	Starší API
Vestavěný trace viewer	Nutné externí nástroje
Rychlejší execution	Pomalejší
Lepší DX	Více konfigurace

20. Shrnutí

Playwright je moderní a velmi silný framework pro automatizaci webových aplikací.

Je vhodný zejména pro:

Moderní web aplikace
CI/CD pipelines
Cross-browser testing
Stabilní E2E automatizaci
API + UI kombinované testy

„Playwright pomáhá vytvářet rychlé, stabilní a maintainable automatizované testy.“