# 178: Percy Her İş Akışında Görsel Değişiklikleri Yakaladı - CSS Hileleri

Anonim

Percy'nin sizin için tam olarak neler yapabileceğini anladığınızdan emin olmak istedim, dolayısıyla başlık. Çoğumuzun yaşadığı bir Çekme İsteği iş akışında olduğu gibi, web sitenizin Git deposunda bir değişiklik yaptığınızda, Percy bu değişikliğin sitenizde herhangi bir görsel değişikliğe neden olup olmadığını size bildirecektir. Size bu değişikliklerin tam olarak ne olduğunu gösterecektir: hangi sayfalar, hangi medya sorgusu kesme noktası, hangi tarayıcı vb.

Oldukça şaşırtıcı.

Bir düğmenin boyutunu artıran bir değişiklik yaptığımda Percy kontrol panelinin ekran görüntüsü:

Umarım bu değişikliği niyet ettim. Yapmadıysam, bu Percy'nin kıçımı kurtardığı an. Başlangıçta düşündüğümden daha geniş bir etkiye sahip olan CSS'yi değiştirerek yanlışlıkla görsel değişiklikler yapabilirim.

Percy kurulduktan sonra, otomatik olarak gerçekleşen Çekme İsteği kontrollerinin bir parçası olacaktır:

Bu tür testleri CI'nize (Sürekli Entegrasyon) koymak çok güçlüdür.

Percy'nin her türden güçlü yapılandırması vardır, ancak oldukça basit de olabilir. Percy! Bu URL'ye gidin ve ekran görüntüsünü alın! Percy! Bu URL'ye gidin, bu düğmeyi tıklayın ve bunun bir ekran görüntüsünü alın! Fevkalade basit tarayıcı otomasyon dili Puppeteer'a aşinaysanız, PercyScript bunu kullanır.