„La mine a mers”, și alți patru au spus la fel

TL;DR - Docker rezolvă haosul testelor vizuale

Testele de regresie vizuală sunt extrem de sensibile la diferențele dintre medii (OS, fonturi, randare).
Creează toate baseline-urile vizuale în Docker, nu pe sistemul tău local.
Când mediul e clar, rezultatele devin previzibile.

Testarea vizuală în Playwright este fantastică… până când testele încep să pice fără niciun motiv real.

Dacă ai avut vreodată un test vizual care trece perfect local, dar pică în pipeline, să știi că nu ești singur. Am trecut prin exact aceeași problemă — și iată cum am rezolvat-o.

Problema din viața reală

Lucrez într-o echipă QA de 5+ persoane.

Cu toții rulăm aceleași teste Playwright pe același codebase, dar există o problemă:

Câțiva dintre noi folosim macOS
Ceilalți sunt pe Windows
Și pipeline-ul nostru? E pe Linux

Ai crede că asta nu ar conta, dar cel puțin cu testarea de regresie vizuală, contează mult.

Chiar și cele mai mici diferențe la nivel de OS, precum rendering-ul fonturilor, scrollbar-urile sau antialiasing-ul - pot cauza nepotriviri la nivel de pixeli.

Asta înseamnă:

Un QA scrie un test și face commit.
Altul trage repo-ul, rulează același test... și testul pică.
CI, de asemenea, vede o diferență, și pipeline-ul e roșu.
Toată lumea e confuză.

Pierdeam ore încercând să ne dăm seama de ce un simplu test UI pica când UI-ul nici măcar nu se schimbase.

De ce contează OS-ul în testarea vizuală

Playwright face comparația vizuală folosind capturi de ecran și le compară cu imaginile de bază (baseline) salvate anterior.

Ce nu realizează mulți până nu e prea târziu: Acele imagini sunt sensibile la OS.

Exact același test poate genera un snapshot diferit doar pentru că rulează pe macOS și nu pe Linux.

Asta devine un coșmar în echipe cross-platform, sau mai rău, când pipeline-ul și mediul local nu sunt aliniate.

Soluția: Rulează totul în Docker, exact ca în CI

După ce am încercat să „ne înțelegem” să nu actualizăm snapshot-urile decât atunci când chiar era nevoie (nu a funcționat), în final am ajuns la o soluție corectă:

Folosim Docker pentru a crea și valida toate snapshot-urile pe același sistem de operare ca pipeline-ul CI.

Iată ce s-a schimbat:

Am ales o imagine Docker partajată (mcr.microsoft.com/playwright:v1.41.0-jammy)
Toată lumea rulează teste folosind această imagine local
Snapshot-urile sunt create și validate în interiorul containerului Docker
Pipeline-ul nostru CI folosește aceeași imagine

Rezultat: Nu mai există false positive-uri, nu mai există build-uri eșuate după merge, decât dacă e o problemă validă.

E consistent. E predictibil. Funcționează.

Ghid rapid

1. Creează un Dockerfile

FROM mcr.microsoft.com/playwright:v1.44.0-jammy
 
WORKDIR /app
COPY . .
 
RUN npm ci
CMD ["npx", "playwright", "test", "--project=chromium"]

2. Adaugă un Makefile simplu

IMAGE_NAME := playwright-visual
 
.PHONY: build test
 
build:
	docker build -t $(IMAGE_NAME) .
 
test:
	docker run --rm \
	  -v "$(PWD)":/app -w /app \
	  -v "$(PWD)/.env":/app/.env:ro \
	  $(IMAGE_NAME) \
	  bash -lc "npx playwright test --grep @visual --project=chromium --workers=100% --retries=1"

3. Rulează-l

make build
make test

Și acum... testezi în același mediu ca CI. Fără surprize. Fără PR-uri eșuate din cauza unor deplasări de 2px.

Regula mea de bază: Rulează întotdeauna testele vizuale noi sau actualizate în Docker înainte de merge.

Mai puțin zgomot. Mai multă încredere în rezultate.

Dar ce facem cu pipeline-ul?

Da, poți configura pipeline-ul să ruleze pe orice sistem de operare, dar adevărata problemă e setup-ul echipei.

Dacă inginerii folosesc sisteme de operare diferite local și creează snapshot-uri vizuale pe ele, nu vei obține niciodată consistență.

De aceea Docker e arma ta secretă.

Îți oferă:

Un mediu comun si predictibil
Randare identică pentru snapshot-uri
Rezultate reproducibile (nu mai există „da la mine merge”)

Ce urmează?

Aceasta face parte din seria mea Playwright Chronicles, lecții reale pe care le-am învățat și încă învăț.

Următorul:

👉 👉 Cum să structurezi un proiect Playwright pentru a fi scalabil, stabil și rapid.

💬 Hai să vorbim:

Ai întâmpinat probleme similare cu testarea de regresie vizuală pe diferite sisteme de operare? Cum ai rezolvat-o? Împărtășește-ți experiența în comentarii! 👇