# 166: Belajar Mengintegrasikan Pengujian Visual dengan Percy - Trik CSS

Anonim

Tahukah Anda bahwa Anda dapat menyiapkan sistem peninjauan sehingga setiap permintaan tarik yang Anda buat menunjukkan kepada Anda secara tepat apa yang telah berubah secara visual di situs Anda?

Persis itulah yang dilakukan Percy. Ini mengasumsikan apa yang Anda miliki di master benar (dapat dikonfigurasi) dan, ketika Anda melakukan permintaan tarik, itu benar-benar mengambil tangkapan layar dan membandingkannya dengan tangkapan layar dari apa yang ada di master. Jika ada yang berubah, ini memberi tahu Anda, seperti yang dilakukan pengujian unit atau integrasi. Setujui mereka dan perhatikan ada yang salah? Perbaiki dan tinjau kembali perubahannya.

Sungguh luar biasa pengujian semacam ini tersedia. Ini adalah bagaimana Anda dapat benar-benar membawa kepercayaan kepada tim Anda bahwa mereka melakukan apa yang Anda pikirkan ketika orang membuat perubahan desain atau konten.

Dalam video ini, saya berpasangan dengan Mike Fotinakis (salah satu pendiri Percy) untuk mendemonstrasikan semua itu, lalu mengatur semuanya dan membuka situs. Kami akan bekerja di situs lokal menggunakan Eleventy, menampilkannya langsung di Netlify, mengintegrasikan CircleCI ke dalam repo GitHub untuk situs tersebut, dan mengonfigurasinya untuk menjalankan Percy.

Ini cukup ajaib dan saya sangat menyarankan Anda memeriksanya sehingga Anda tahu tingkat pengujian visual yang mungkin dilakukan hari ini.