Stabilizace testů Playwright v CI

Stabilizace Playwright testů v CI: Projekt závislostí a web-first tvrzení

Vložení řetězových závislostí do Playwright zabrání spuštění testů v nestabilním prostředí. Tím se šetří prostředky CI a snižuje se počet falešných signálů.

Nejprve probíhá ověření přes API s uložením stavu úložiště. Poté provádí health check dostupnost API. Teprve poté se spouštějí hlavní UI testy.

Výhody oproti globalSetup:

• Plné trasování s webovými požadavky, snímky obrazovky a konzolovými protokoly.
• Mechanismus fail-fast: selhání setupu zastaví závislé projekty.
• Izolace: lze testovat jednotlivé kroky pomocí npx playwright test --project=auth-setup.

Konfigurace v playwright.config.ts:

export default defineConfig({
  projects: [
    {
      name: 'auth-setup',
      testMatch: /.*\.auth\.setup\.ts/,
    },
    {
      name: 'healthcheck',
      testMatch: /.*\.health\.setup\.ts/,
      dependencies: ['auth-setup'],
    },
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
      dependencies: ['healthcheck'],
    },
  ],
});

Ověření přes API minimalizuje čas: POST požadavek trvá 50–100 ms ve srovnání s 2–5 sekundami u UI přihlášení.

Příklad testu auth-setup:

test('setup', async ({ request }) => {
  await request.post('/api/login', { data: { user, pass } });
  await request.storageState({ path: '.auth/user.json' });
});

Závislostní graf vylučuje race conditions při paralelním spuštění.

Správný výběr lokátorů

Lokátory určují odolnost testů vůči změnám rozhraní. Rozdělte je podle účelu: pro akce – getByTestId, pro ověření – getByRole nebo getByLabel.

Principy výběru:

• Akce (klik, zadání): page.getByTestId('add-to-cart-button').click() – nezávisle na textu nebo stylu.
• Ověření textu/stavu: expect(page.getByRole('heading')).toHaveText('Osobní účet').
• Vstupní pole: page.getByLabel('Email').fill('[email protected]').
• Počítadla: expect(locator).toHaveText('3').

CSS selektory jsou povoleny pouze jako rezerva. Přeškolení týmu na správné lokátory se vyplácí násobně při škálování.

Web-first tvrzení vs. flaky testy

Snímkové kontroly typu await loc.isVisible() jsou zranitelné vůči race conditions. Web-first tvrzení s polingem zajišťují stabilitu.

Srovnání tvrzení:

| Kontrola | Snímek (nečeká) | Web-first (poling) |

|----------|-------------------|---------------------|

| Viditelnost | await loc.isVisible() | expect(loc).toBeVisible() |

| Text | await loc.textContent() | expect(loc).toHaveText('Text') |

| Počet | await loc.count() | expect(loc).toHaveCount(3) |

| Atribut | await loc.getAttribute('href') | expect(loc).toHaveAttribute('href', '/path') |

| Zaškrtávací políčko | await loc.isChecked() | expect(loc).toBeChecked() |

| Stav | await loc.isEnabled() | expect(loc).toBeEnabled() |

Poling opakuje kontrolu každých 100 ms do vypršení časového limitu, ignoruje dočasné mžiknutí rozhraní.

Hydratace a force: true

Hydratační neshoda vzniká u aplikací SSR/SSG: serverová struktura je vykreslena, ale JS obsluhy nejsou připojeny.

Čekejte na indikátory připravenosti:

• await page.waitForSelector('.hydrated', { state: 'attached' })
• await expect(page.locator('#global-loader')).toBeHidden()

force: true deaktivuje ověření akceptability (viditelnost, stabilita, povolení, přijímání událostí), převádí test na DOM skript. Používejte s komentářem a jen pokud je to nutné (např. pro file input).

Co je důležité

• Projekty závislostí vytvářejí graf závislostí, zabrání spuštění testů v nepřipraveném prostředí.
• Web-first tvrzení s polingem odstraňují 80 % flaků způsobených race conditions.
• Rozdělení lokátorů podle role zvyšuje odolnost vůči refaktoringu rozhraní.
• Ověření přes API zrychluje setup 20–50× ve srovnání s UI přihlášením.
• Trasování místo snímků obrazovky poskytuje kompletní pohled na pády v CI.

— Editorial Team