# 178: Percy fängt visuelle Änderungen in jedem Workflow ab - CSS-Tricks

Anonim

Ich wollte sicherstellen, dass Sie genau verstehen, was Percy für Sie tun kann, daher der Titel. Wenn Sie eine Änderung an Ihrem Git-Repo für Ihre Websites vornehmen, wie in einem Pull Request-Workflow, in dem die meisten von uns leben, teilt Percy Ihnen mit, ob diese Änderung visuelle Änderungen an Ihrer Website verursacht. Es zeigt Ihnen genau, was diese Änderungen sind: welche Seiten, welcher Haltepunkt für Medienabfragen, welcher Browser usw.

Es ist ziemlich erstaunlich.

Hier ist ein Screenshot des Percy-Dashboards, als ich eine Änderung vorgenommen habe, bei der die Größe einer Schaltfläche vergrößert wurde:

Hoffentlich habe ich diese Änderung beabsichtigt. Wenn ich es nicht getan habe, ist dies der Moment, in dem Percy meinen Hintern rettet. Ich kann leicht versehentlich visuelle Änderungen vornehmen, indem ich CSS ändere, das einen größeren Einfluss hat, als ich ursprünglich gedacht hatte.

Sobald Percy eingerichtet ist, ist es Teil der Pull-Request-Überprüfungen, die automatisch durchgeführt werden:

Diese Art von Tests in Ihr CI (Continuous Integration) zu integrieren, ist mächtig mächtig.

Percy verfügt über alle Arten von leistungsstarken Konfigurationen, kann aber auch recht einfach sein. Percy! Gehen Sie zu dieser URL und machen Sie einen Screenshot davon! Percy! Gehen Sie zu dieser URL, klicken Sie auf diese Schaltfläche und machen Sie einen Screenshot davon! Wenn Sie mit der fantastisch einfachen Browser-Automatisierungssprache Puppeteer vertraut sind, verwendet PercyScript diese.