Playwright: teste end-to-end
Browser real, locatori, auto-waiting și ce merită testat E2E.
Actualizat
Ce este Playwright
Playwright e o unealtă pentru teste end-to-end (E2E): pornește un browser real (Chromium, Firefox, WebKit), deschide aplicația ta și o folosește ca un om — navighează, completează formulare, dă click — apoi verifică rezultatul.
E singurul tip de test care verifică totul împreună: frontend, backend, baza de date, routing, cookie-uri. Pentru Server Components async și Server Actions din Next, e varianta recomandată.
import { expect, test } from '@playwright/test'
test('userul rezolvă un exercițiu', async ({ page }) => {
await page.goto('/ro/js/functions')
await page.getByRole('button', { name: 'Verifică' }).first().click()
await expect(page.getByText('Rezolvat')).toBeVisible()
})Locatori — cum găsești elemente
| Locator | Când |
|---|---|
page.getByRole('button', { name: 'Trimite' }) |
implicit — la fel ca în Testing Library |
page.getByLabel('Email') |
câmpuri de formular |
page.getByText('Bine ai venit') |
text vizibil |
page.getByTestId('cart-total') |
când nimic semantic nu merge |
page.locator('.css') |
ultimă variantă — fragil |
Auto-waiting — de ce nu ai nevoie de sleep
Playwright așteaptă automat ca un element să fie vizibil, activ și stabil înainte de click, iar expect(...) reîncearcă verificarea până trece sau expiră timeout-ul (implicit 5s).
await expect(page.getByText('Salvat')).toBeVisible() // reîncearcă până apare
await page.waitForTimeout(2000) // ✗ niciodată „sleep” fixSleep-urile fixe fac testele lente și flaky (uneori trec, uneori nu).
Ce rulezi E2E — și ce nu
| E2E | Mai bine unit / integrare |
|---|---|
| fluxuri critice: înregistrare, login, checkout | toate variantele unei validări |
| integrarea cu backend-ul real | logică pură (calcule) |
| redirect-uri, cookie-uri, auth | stări de UI ale unei componente |
E2E sunt mai lente și mai scumpe de întreținut — câteva, pe fluxurile care aduc bani sau care, dacă se strică, blochează userii.
Unelte utile
npx playwright codegen localhost:3000 # înregistrezi pașii, Playwright scrie codul
npx playwright test --ui # mod vizual, pas cu pas
npx playwright show-report # raport HTML cu capturi și traceTrace viewer: la un test picat în CI vezi fiecare pas, DOM-ul, request-urile și consola — debugging fără să reproduci local.
În CI
Pornești aplicația (npm run build && npm run start) și rulezi testele împotriva ei — sau direct împotriva preview deploy-ului de pe Vercel al fiecărui PR.
Pe scurt
- Playwright = browser real, aplicație reală, pași ca un user.
- Locatori după rol / label / text; auto-waiting în loc de sleep.
- Puține teste E2E, pe fluxurile critice.