Știi senzația aia când auzi „Playwright" la fiecare conferință — la DevTalks, la A4Q Summit, în fiecare thread de Slack al echipei de QA — și te gândești: „OK, dar eu când îl încerc?" Ei bine, azi e ziua respectivă. Promit că în mai puțin de o oră ai primul test care rulează pe mașina ta locală. Fără magie neagră, fără experiență de zece ani în automation. Shall we?
De ce Playwright și nu altceva?
Dacă ai lucrat cu Selenium 4 știi că setup‑ul poate fi o aventură în sine: WebDriver, browser drivers, compatibilități de versiuni... E drept că Selenium 4 a adus Grid îmbunătățit și W3C protocol nativ, și rămâne extrem de relevant în proiectele enterprise. Cypress, la rândul lui, a câștigat o armată de fani prin developer experience‑ul plăcut. Dar Playwright, lansat de Microsoft în 2020, a venit cu un avantaj simplu: un singur API care controlează Chromium, Firefox și WebKit — deopotrivă, din aceeași comandă.
Mai concret: Playwright suportă nativ multiple tabs, iframes, file downloads, network interception și auto‑wait. Auto‑wait înseamnă că nu mai scrii `Thread.sleep(3000)` și speri că pagina s‑a încărcat. Playwright așteaptă el singur ca elementul să fie acționabil. Ăsta singur e un motiv suficient să îl încerci.
Setup în 5 minute: Node, npm și o singură comandă
Nu ai nevoie de un mediu exotic. Ai nevoie de:
- Node.js (versiunea 18+ recomandată) — descărcat de pe nodejs.org
- Un editor de cod — VS Code e alegerea naturală, cu extensia oficială Playwright Test for VS Code
- Un terminal — cel integrat în VS Code e perfect
Deschizi terminalul și rulezi
`npm init playwright@latest`
Playwright îți pune câteva întrebări: JavaScript sau TypeScript? (alege TypeScript dacă vrei IntelliSense bun, JavaScript dacă vrei să ajungi mai repede la primul test), vrei să adaugi GitHub Actions workflow? (spune da, o să fie util mai târziu), instalezi browserele? (da, obligatoriu).
Comanda descarcă Chromium, Firefox și WebKit local. Prima rulare durează 2‑3 minute datorită browserelor. Structura de proiecte generată conține un folder `tests/` cu un exemplu funcțional — `example.spec.ts` — și fișierul de configurare `playwright.config.ts`. Deja ai un test gata de rulat. Serios.
Primul test scris de tine: pas cu pas
Creezi un fișier nou în `tests/` — să îi zicem `login.spec.ts`. Scenariul: deschizi o pagină de demo, completezi un formular de login și verifici că utilizatorul a ajuns pe dashboard.
```
import { test, expect } from '@playwright/test';
test('utilizatorul se poate loga cu succes', async ({ page }) => {
await page.goto('https://practicetestingsite.net/login');
await page.fill('#username', 'student');
await page.fill('#password', 'Password123');
await page.click('button[type="submit"]');
await expect(page).toHaveURL(/dashboard/);
await expect(page.locator('h1')).toContainText('Dashboard');
});
```
Câteva observații despre ce se întâmplă aici. `page.goto` navighează la URL. `page.fill` găsește input‑ul după selector CSS și îl completează. `page.click` apasă butonul. `expect(page).toHaveURL` este o assertie built‑in care verifică URL‑ul curent. Nu ai importat nimic extra, nu ai configurat niciun driver.
Rulezi testul cu
`npx playwright test tests/login.spec.ts`
Dacă totul e bine, terminalul îți arată un verde liniștitor și un raport HTML se deschide automat în browser — cu screenshot‑uri și timeline. Ăsta e un moment pe care îl reții.
Locators, selectori și de ce contează semantica
Una dintre lecțiile pe care le transmitem constant la Academia Testarii este că un test fragil e aproape mai rău decât niciun test. Un test care pică la fiecare deploy din cauza unui selector CSS instabil creează zgomot, nu siguranță.
Playwright promovează locatori semantici, apropiați de modul în care utilizatorul vede pagina:
- `page.getByRole('button', { name: 'Trimite' })` — găsește butonul după rol ARIA și text
- `page.getByLabel('Email')` — găsește input‑ul asociat unui label
- `page.getByTestId('submit‑btn')` — folosește atributul `data‑testid`, recomandat echipelor de dev
Acești locatori sunt mai rezistenți la schimbări de CSS sau restructurări de layout. Dacă lucrezi cu o echipă de dezvoltatori, roagă-i să adauge `data‑testid` pe elementele importante — e o convenție simplă care economisește ore de debugging.
Rapoarte, debugging și primul pipeline
Playwright vine cu Playwright HTML Reporter built‑in — nu ai nevoie de Allure sau de alt tool extern ca să ai rapoarte lizibile. Rulezi `npx playwright show‑report` după orice execuție și vezi: ce test a trecut, ce a picat, screenshot la momentul eșecului, video dacă activezi opțiunea, trace viewer pas cu pas.
Trace viewer merită o mențiune specială. Activezi tracing în `playwright.config.ts`:
`trace: 'on‑first‑retry'`
Și când un test pică la retry, Playwright salvează un fișier `.zip` cu tot ce s‑a întâmplat: DOM snapshot, network requests, console logs. Îl deschizi pe trace.playwright.dev și ai o cronologie completă. E genul de tool care te face să te simți detectiv, nu victimă.
Când ești gata să faci pasul următor, workflow‑ul de GitHub Actions generat automat la `npm init` poate rula testele la fiecare pull request. Pipeline‑ul de bază are sub 20 de linii de YAML. Nu e nevoie de un DevOps senior ca să îl configurezi.
Ce urmează după primul test
Un test e un început, nu un portofoliu. Dar pornind de la ce ai construit azi, poți adăuga:
- Page Object Model (POM) — structura care face testele scalabile și ușor de întreținut
- Test data management — parametrizare cu fișiere JSON sau cu variabile de mediu
- API testing — Playwright poate face request‑uri HTTP direct, fără Postman, și poate combina apeluri API cu UI în același test
- Visual testing — comparații de screenshot pixel‑perfect cu `expect(page).toHaveScreenshot()`
- Integrare cu JIRA — bug‑urile găsite de teste pot fi create automat prin API
Fiecare dintre aceste subiecte e un capitol separat, nu o lecție de cinci minute. Și exact asta face diferența dintre un tester care „a văzut Playwright" și unul care îl folosește eficient în producție.
---
Dacă ai ajuns până aici și testul tău rulează deja cu verde — felicitări, ai trecut de pragul psihologic al primului test automat. E mai greu să începi decât să continui.
Dacă vrei să treci de la experiment la competență reală, la Academia Testarii găsești cursuri hands‑on de Test Automation care acoperă Playwright, Selenium 4, structuri de proiecte reale și pregătire pentru certificări internaționale. Nu teoretizăm în gol — lucrăm pe scenarii din domenii reale: bancar, retail, energie, automotive. Exact ce ți se va cere la interviu.
Intră pe academiatestarii.ro, explorează oferta de cursuri și, dacă ai întrebări, scrie‑ne — răspundem fiecărui mesaj. 🚀
#DeAziEstiTester #AcademiaTestarii #TestAutomation #SoftwareTesting #TestareSoftware