# 178: Percy vangt visuele veranderingen op in elke workflow - CSS-trucs

Anonim

Ik wilde er zeker van zijn dat je precies begrijpt wat Percy voor je kan doen, vandaar de titel. Als je een wijziging doorvoert in de Git-opslagplaats van je website, zoals in een Pull Request-workflow waar de meesten van ons in leven, zal Percy je laten weten of die wijziging visuele veranderingen op je site veroorzaakt. Het laat u precies zien wat die wijzigingen zijn: welke pagina's, welk breekpunt voor mediaquery's, welke browser, enz.

Het is nogal verbazingwekkend.

Hier is een screenshot van het Percy-dashboard toen ik een wijziging aanbracht door de grootte van een knop te vergroten:

Hopelijk bedoelde ik die verandering. Als ik dat niet deed, is dit het moment dat Percy mijn kont redt. Ik kan gemakkelijk per ongeluk visuele wijzigingen aanbrengen door CSS te wijzigen die een grotere impact hebben dan ik oorspronkelijk dacht dat het zou zijn.

Zodra Percy is ingesteld, maakt het deel uit van de Pull Request-controles die automatisch plaatsvinden:

Dit soort testen in uw CI (Continous Integration) plaatsen is de machtigste.

Percy heeft allerlei krachtige configuraties, maar het kan ook vrij eenvoudig zijn. Percy! Ga naar deze URL en maak er een screenshot van! Percy! Ga naar deze URL, klik op deze knop en maak daar een screenshot van! Als u bekend bent met de fantastisch eenvoudige browserautomatiseringstaal Puppeteer, dan gebruikt PercyScript dat.