Panduan untuk ujian visual dengan Percy

Percy: mengautomasikan ujian visual untuk kualiti UI yang lancar

Artikel ini, yang dibuat dengan kerjasama Percy, meneroka cara melaksanakan ujian visual automatik untuk memastikan antara muka pengguna anda (UI) tetap konsisten merentasi penyemak imbas dan saiz skrin yang berbeza. Walaupun ujian unit dan integrasi mengesahkan logik aplikasi, mereka sering terlepas kecacatan visual. Percy menyediakan penyelesaian dengan mengautomasikan proses menangkap dan membandingkan gambar visual, menonjolkan percanggahan dan menyelaraskan proses semakan.

Tutorial ini menggunakan aplikasi satu halaman yang didorong oleh API sebagai contoh praktikal. Anda akan belajar bagaimana Percy mengendalikan data dinamik dan mengintegrasikan dengan aliran kerja anda untuk ulasan dan kelulusan visual yang cekap.

Manfaat utama Percy:

• Pengesanan awal isu UI: menangkap pepijat visual yang terlepas oleh ujian tradisional, memastikan UI yang konsisten merentasi pelayar dan saiz skrin.
• Perbandingan snapshot automatik: mengautomasikan penangkapan dan perbandingan gambar visual, menonjolkan perbezaan untuk semakan mudah. ​​
• Integrasi mudah: pemasangan dan integrasi adalah mudah, sama seperti menubuhkan rangka kerja ujian standard.
• Pengendalian Data Dinamik: Menguruskan secara berkesan UIS memaparkan data dinamik, mencegah positif palsu dari perubahan data.
• Aliran Kerja Kelulusan yang Dilancarkan: Memudahkan kajian pasukan dan kelulusan perubahan visual, memastikan hanya pengubahsuaian yang dimaksudkan.
SDKS serba boleh:
• menawarkan SDK untuk pelbagai kerangka ujian, meningkatkan keserasian dengan persekitaran pembangunan yang sedia ada.

Prasyarat:

Tutorial ini mensasarkan pertengahan kepada pemaju JavaScript yang maju yang biasa dengan sintaks ES6, Express.js (untuk API RESTful), jQuery, Axios, kerangka CSS, strategi cawangan git, dan idealnya, pengalaman dengan rangka kerja ujian. Akaun GitHub diperlukan. Kami akan menggunakan aplikasi mata wang sampel yang tersedia di GitHub.

Memahami Percy:

Percy menawarkan platform dan aliran kerja untuk ujian visual aplikasi web, tapak statik, dan perpustakaan komponen. Pelan percuma termasuk ahli pasukan tanpa had, 5,000 snapshots bulanan (dengan sejarah satu bulan), dan projek yang tidak terhad. Proses ini melibatkan memasang SDK, mewujudkan papan pemuka projek, dan mengintegrasikan dengan asas anda. Percy membuat gambar dalam Chrome dan Firefox, menyokong sehingga sepuluh resolusi skrin.

Langkah -langkah pelaksanaan:

1. Menyediakan projek demo: garpu Repositori GitHub yang disediakan dan ikuti arahan ReadMe untuk menubuhkan aplikasi mata wang sampel.

2. Menyediakan papan pemuka Projek Percy: Daftar untuk akaun Percy percuma, buat projek ("Percy-Tutorial"), dan hubungkannya ke repositori GitHub anda. Dapatkan PERCY_TOKEN anda.

3. Menjana Percy Snapshots: Pasang pakej @percy/script (npm install -D @percy/script). Buat snapshots.js (lihat artikel asal untuk kod). Skrip ini menggunakan dalang untuk berinteraksi dengan aplikasi dan menghasilkan gambar untuk setiap halaman. Ingatlah untuk menjalankan npm start dalam terminal yang berasingan untuk memulakan permohonan sebelum menjalankan skrip Percy. Jalankan skrip menggunakan export PERCY_TOKEN=<your_token> && npx percy exec -- node snapshots.js</your_token>.

4. Mengendalikan data dinamik: Ubah suai snapshots.js untuk memintas permintaan API dan menggantikan respons dengan data mengejek untuk memastikan snapshot yang konsisten. (Lihat artikel asal untuk kod yang dikemas kini).

5. Aliran Kerja Kelulusan:

   Buat cawangan ciri, membuat perubahan visual, komit, menolak, membuat permintaan tarik pada GitHub, menjalankan ujian Percy, meluluskan binaan di papan pemuka Percy, dan menggabungkan cawangan. Akhirnya, kemas kini cawangan induk dan jalankan ujian Percy sekali lagi untuk menubuhkan garis dasar baru.

integrasi berterusan (CI) dan integrasi SDK:

Percy mengintegrasikan dengan pelbagai platform CI/CD (Appveyor, Azure Pipelines, dll.) Untuk ujian automatik. Ia juga menyokong pelbagai SDK untuk integrasi dengan kerangka ujian yang berbeza (mis., Cypress). Artikel asal memberikan contoh integrasi Cypress.

Kesimpulan:

Percy dengan ketara meningkatkan ujian UI dengan mengautomasikan proses dan menyediakan aliran kerja yang diselaraskan untuk mengkaji dan meluluskan perubahan visual. Dengan mengintegrasikan Percy ke dalam proses pembangunan anda, anda dapat mengurangkan risiko melepaskan produk dengan kecacatan visual. Soalan Lazim dalam artikel asal memberikan butiran lanjut mengenai konsep ujian visual dan keupayaan Percy.

Atas ialah kandungan terperinci Panduan untuk ujian visual dengan Percy. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!