# 178: Percy detecta cambios visuales en cualquier flujo de trabajo - Trucos CSS

Anonim

Quería asegurarme de que entendieras exactamente lo que Percy puede hacer por ti, de ahí el título. Cuando realiza un cambio en el repositorio de Git de su sitio web, como en un flujo de trabajo de solicitud de extracción en el que vivimos la mayoría de nosotros, Percy le informará si ese cambio causa algún cambio visual en su sitio. Le mostrará exactamente cuáles son esos cambios: qué páginas, qué punto de interrupción de la consulta de medios, qué navegador, etc.

Es bastante asombroso.

Aquí hay una captura de pantalla del panel de Percy cuando hice un cambio aumentando el tamaño de un botón:

Con suerte, tenía la intención de ese cambio. Si no lo hice, este es el momento en que Percy está salvando mi trasero. Puedo realizar fácilmente cambios visuales accidentalmente cambiando CSS que tiene un impacto más amplio de lo que originalmente pensé que tendría.

Una vez que Percy esté configurado, será parte de las verificaciones de Pull Request que se realizan automáticamente:

Poner este tipo de pruebas en su CI (Integración continua) es muy poderoso.

Percy tiene todo tipo de configuraciones poderosas, pero también puede ser bastante simple. Percy! ¡Vaya a esta URL y tome una captura de pantalla! Percy! Vaya a esta URL, haga clic en este botón y, a continuación, tome una captura de pantalla. Si está familiarizado con el lenguaje de automatización de navegador increíblemente simple Puppeteer, eso es lo que usa PercyScript.