Saat menambahkan kode baru ke situs web Anda, penting untuk memastikan semuanya tetap berfungsi dengan baik sesudahnya. Uji fungsionalitas baru membantu Anda memastikan tidak ada yang salah selama proses tersebut. Namun, Anda juga ingin memastikan bahwa setiap perubahan terkait desain diterapkan dengan lancar.
Di situlah alat pengujian regresi visual berperan. Mereka dapat membantu Anda memastikan bahwa laman web Anda masih terlihat sebagaimana mestinya setelah membuat perubahan pada kode situs Anda. Menggunakan alat semacam ini meminimalkan risiko terkait dengan pembaruan WordPress, serta perubahan kustom apa pun.
Dalam posting ini, kami akan menjelaskan apa itu pengujian regresi visual dan cara kerjanya. Kemudian kami akan mempresentasikannya empat alat pengujian regresi visual Anda dapat mencoba Ayo mulai!
Dalam artikel ini 🔍
Apa tes regresi visual? 🧐
Ketika Anda membuat perubahan pada situs WordPress Anda, selalu ada risiko yang ditimbulkan oleh pembaruan perubahan yang tidak diinginkan dengan fungsionalitas dan / atau desain halamannya. Kode baru dapat memengaruhi tampilan dan cara kerja item sebelumnya.
Sederhananya, uji regresi visual adalah bentuk identifikasi cacat visual di halaman web Anda. Ini dapat membantu Anda memastikan bahwa pembaruan dan modifikasi WordPress Anda tidak merusak tata letak dan tata letak Anda.
Tes regresi visual. Ini melibatkan pengambilan screenshot halaman web Anda dan membandingkannya dengan versi referensi asli (hasilnya sering disebut sebagai ‘diff’). Tujuannya adalah untuk menemukan penyimpangan antar versi, sehingga Anda dapat menyelesaikan perbedaan yang tidak diinginkan dengan cepat.
Ini sangat penting dalam hal desain seluler dan responsif. Misalkan seseorang mencoba menggunakan halaman di situs Anda dari perangkat selulernya. Namun, mereka kesulitan membaca atau menavigasi halaman karena teks atau gambar yang tumpang tindih. Tentu hal ini akan menggagalkan pengalaman pengguna (UX) dan dapat meningkatkan rasio pentalan Anda mengusir pengunjung.
Tes regresi visual membantu Anda menghindari masalah semacam itu. Selain itu, ini memungkinkan Anda untuk meningkatkan antarmuka pengguna atau antarmuka pengguna (UI) dari situs WordPress Anda.
Tes regresi visual, pada dasarnya, melibatkan tangkap dan bandingkan tangkapan layar. Meskipun Anda melakukannya secara manual, itu bukanlah metode yang sangat efisien. Sebaliknya, pengujian otomatis dapat menghemat banyak waktu.
Alat pengujian regresi visual. menyajikan pendekatan alternatif dan otomatis untuk menguji halaman web. Mereka dijalankan melalui situs atau aplikasi, mengambil screenshot dan membandingkan versi untuk memastikan bahwa setiap halaman muncul dengan benar di browser yang berbeda.
Selain itu, alat ini tidak hanya memeriksa halaman secara keseluruhan, tetapi juga blok dan elemen tertentu. Misalnya, jika Anda menambahkan blok teks ke halaman web, pengujian regresi visual tidak hanya memastikan bahwa teks tersebut terlihat. Ini juga membantu Anda memastikan teks muncul persis seperti yang Anda inginkan.
Selain itu, alat pengujian ini dapat membantu Anda mendeteksi perubahan yang paling halus sekalipun, termasuk detail halus dan perbedaan tingkat piksel. Misalnya, perubahan menyebabkan ukuran font tombol Ajakan Bertindak (CTA) meningkat hanya beberapa piksel. Ini bukanlah sesuatu yang mungkin akan Anda deteksi sendiri.
Namun, saat Anda menggunakan alat pengujian regresi visual, ini akan mengambil tangkapan layar dari laman baru dan bandingkan dengan aslinya atau versi referensi. Jika ada perubahan, itu akan menyoroti dengan tepat apa yang berbeda, sehingga Anda dapat mengambil tindakan jika perlu.
Sekarang setelah Anda memiliki pemahaman yang lebih baik tentang apa itu pengujian regresi visual dan untuk apa digunakan, sekarang saatnya menjelajahi beberapa alat yang dapat lakukan pekerjaan untukmu. Empat alat pengujian visual yang akan kami perkenalkan adalah:
- Screenster
- Hantu
- PhantomCSS
- BackstopJS
1. Layar
Jika Anda mencari file alat pengujian regresi visual berbasis web yang tidak memerlukan pengkodean apa pun, Screenster layak dipertimbangkan:
Alat ini menggabungkan tangkapan layar dengan Pemeriksaan DOM dan CSS. Algoritmanya menjalankan uji perbandingan dan secara otomatis mendeteksi perubahan visual dalam konten Anda. Gunakan pemilih cerdas untuk mengidentifikasi elemen pada halaman yang telah dipindahkan atau dimodifikasi. Selain itu, tidak memerlukan instalasi atau plug-in browser.
Fitur tambahannya meliputi:
- Tes berkode dan tanpa kode
- Pengujian lokal dan offline
- Deteksi otomatis dan peralihan perbandingan
- Opsi untuk mengabaikan konten dinamis
Untuk memulai, Anda dapat mendaftar untuk mendapatkan akun gratis. Anda juga dapat memilih dari beberapa paket dan paket premium, tergantung pada kebutuhan spesifik Anda. Karena ini adalah alat berbasis web, Anda juga dapat mengujinya secara online hanya dengan menggunakan alamat email Anda. Dari sana, Anda bisa buat tes:
Screenster akan merekam tindakan Anda, kemudian menggunakan hasilnya sebagai dasar visual. UNTUK Pelajari lebih lanjut tentang menggunakan Screenster, Anda dapat mengunjungi halaman dokumentasi dan dukungan mereka.
2. Hantu
Wraith adalah a alat perbandingan tangkapan layar dikembangkan oleh tim BBC News:
Alat pengujian visual ini menggunakan browser tanpa kepala untuk membandingkan screenshot halaman web di lingkungan yang berbeda, dari situs web langsung hingga platform pementasan dan pengujian. Ini bisa sangat berguna untuk melacak dua situs web pada waktu yang samadan menguji situs dengan konten dinamis melalui “mode pengambilan”. Anda juga dapat menggunakannya untuk membandingkan halaman di situs web dari waktu ke waktu.
Fitur tambahannya meliputi:
- Variasi resolusi
- Tes break point
- Tes daya tanggap halaman
Wraith bekerja dengan mengambil screenshot dari halaman web Anda, lalu membuat perbandingan di antara mereka. Anda akan mendapatkan paket yang berisi file ‘diff’ PNG dengan perbandingan gambar (perubahan disorot dengan warna biru). Ini juga mencakup file yang memungkinkan Anda mengetahui berapa persentase piksel yang telah berubah.
Tidak seperti Screenster, Wraith membutuhkan instalasi dan scripting untuk menggunakannya. Ada juga beberapa prasyarat yang Anda perlukan, termasuk:
Pantheon menawarkan panduan bermanfaat tentang menggunakan Wraith untuk uji regresi visual. Anda juga dapat merujuk ke pengaturan Wraith dan dokumentasi instalasi untuk lebih jelasnya.
3. PhantomCSS
PhantomCSS adalah alat pengujian regresi visual gratis lainnya untuk dipertimbangkan. Anda dapat menggunakan PhantomCSS untuk tes visual dasar dan uji desain responsif. Ini adalah opsi yang bagus jika Anda mahir dalam JavaScript.
PhantomCSS berjalan CasperJS, PhantomJS dan Resemble.js. CasperJS menangkap tangkapan layar, dan kemudian PhantomCSS menggunakan Resemble.js untuk membandingkan tangkapan layar dengan gambar dasar. Menemukan perbedaan piksel dan menciptakan perbedaan gambar yang dapat Anda rujuk.
Ada beberapa cara untuk melakukannya menginstal dan menggunakan PhantomCSS. Namun, salah satu opsi termudah adalah menggunakan plugin Grunt:
Bersama-sama, PhantomCSS dan Grunt dapat melakukannya integrasi dan otomatisasi uji regresi visual lebih mudah. Untuk menggunakan PhantomCSS dan Grunt, Anda harus menginstal Grunt dan membuat Gruntfile terlebih dahulu. Setelah selesai, Anda dapat menginstal plugin Grunt dan memuat tugas PhantomCSS.
Pada awalnya ini mungkin tampak seperti proses yang membosankan dan rumit, terutama jika Anda belum pernah menggunakan Grunt sebelumnya. Namun, salah satu keuntungan menggunakan PhantomCSS adalah jumlahnya yang besar Bimbingan, tutorial dan dukungan tersedia untuk menggunakannya. Sudah ada beberapa lama, jadi ada sumber sumber daya dan informasi di GitHub untuk diperiksa.
4. BackstopJS
Terakhir, Anda dapat menggunakan BackstopJS untuk mengotomatiskan pengujian regresi visual situs web dan aplikasi responsif:
BackstopJS memungkinkan Anda bandingkan tangkapan layar DOM dari waktu ke waktu. Buat screenshot halaman web dalam berbagai ukuran layar untuk digunakan sebagai referensi. Anda dapat menggunakannya untuk menemukan regresi apa pun yang mungkin ada setelah mengubah CSS situs Anda.
Seperti PhantomCSS, BackstopJS juga menggunakan Resemble.js, CasperJS, dan PhantomJS (atau SlimerJS). Fitur tambahannya meliputi:
- Pemfilteran visualisasi skenario
- Pemeriksa perbedaan visual
- Laporan CLI
- Rendering tanpa kepala Chrome
Salah satu keunggulan utama BackstopJS adalah betapa mudahnya digunakan. Untuk memulai, Anda hanya perlu menjalankan penginstal npm global. Dari sana Anda dapat menemukan direktori proyek Anda dan menjalankan backup init.
Untuk menjalankan pengujian, Anda akan menggunakan pengujian backup dari direktori root. Untuk menyetujui sekumpulan perubahan, Anda dapat menggunakan persetujuan cadangan. oleh bimbingan dan instruksi lebih lanjutLihat halaman BackstopJS di GitHub.
Berakhir 💡
Saat kamu melakukan pembaruan ke situs WordPress Anda, sangat penting untuk memverifikasi bahwa perubahan tidak merusak apa pun. Ini berarti memastikan bahwa fungsionalitas dan desain situs tetap utuh.
Di posting ini, kita telah melihat empat alat pengujian regresi visual yang dapat Anda gunakan untuk pembaruan WordPress tanpa risiko:
- Screenter: Alat perbandingan visual berbasis web yang menggabungkan tangkapan layar dengan pemeriksaan DOM dan CSS (tanpa memerlukan pengkodean apa pun).
- Hantu: Alat yang berguna untuk menguji dan membandingkan situs dengan konten dinamis.
- PhantomCSS: Alat pengujian regresi visual gratis yang ideal jika Anda memahami JavaScript dengan baik.
- BackstopJS: Otomatiskan pengujian regresi visual untuk situs web dan aplikasi yang responsif.
Apakah Anda ingin memberikan pendapat Anda atau bergabung dalam percakapan? Tambahkan komentar Anda 🐦 di Twitter.
