# 166: Tanuld meg integrálni a vizuális tesztelést Percy-vel - CSS-trükkök

Anonim

Tudta, hogy beállíthat egy ellenőrző rendszert úgy, hogy minden elküldött kérése pontosan megmutassa, mi változott vizuálisan a webhelyén?

Percy pontosan ezt teszi. Feltételezi, hogy a masteren helyesen van (konfigurálható), és amikor egy pull kérést hajt végre, szó szerint képernyőképeket készít és összehasonlítja őket a masteren található képernyőképekkel. Ha bármi megváltozott, akkor tudatja veled, akárcsak az egység vagy az integrációs tesztek. Jóváhagyja őket, és észreveszi, hogy valami nincs rendben? Javítsa ki, és ellenőrizze újra a módosításokat.

Hihetetlen, hogy ez a fajta teszt elérhető. Így igazán magabiztosságot szerezhet a csapatában abban, hogy pontosan azt csinálja, amire gondol, amikor az emberek változtatnak a tervezésen vagy a tartalomon.

Ebben a videóban Mike Fotinakisszel (a Percy társalapítója) állok párhuzamosan, hogy mindezt bemutassam, majd szó szerint mindezt felállítom és elindítom egy oldalon. Dolgozni fogunk egy helyi oldalon az Eleventy használatával, élőben dobjuk fel a Netlify-n, integráljuk a CircleCI-t a webhely GitHub-repójába, és konfiguráljuk a Percy futtatásához.

Elég varázslatos, és nagyon ajánlom, hogy nézze meg, hogy tudja a vizuális tesztelés szintjét, amely manapság lehetséges.