Ujian Regresi Visual dengan Cypress dan Percy: Panduan Komprehensif

pengenalan

Ujian regresi visual ialah bahagian penting dalam memastikan aplikasi web anda mengekalkan integriti visualnya dari semasa ke semasa. Apabila aplikasi berkembang, perubahan visual yang tidak diingini boleh berlaku, yang berpotensi memberi kesan kepada pengalaman pengguna. Menggabungkan Cypress dengan Percy, alat ujian visual yang berkuasa, membolehkan anda mengautomasikan ujian regresi visual dengan lancar. Dalam siaran ini, kami akan meneroka cara menyediakan dan menggunakan Cypress dan Percy untuk menangkap percanggahan visual dalam aplikasi web anda.

Mengapa Ujian Regresi Visual Penting

1. Pengalaman Pengguna: Memastikan perubahan UI tidak memberi kesan negatif kepada pengalaman pengguna.
2. Ketekalan: Mengekalkan konsistensi visual merentas keluaran dan persekitaran yang berbeza.
3. Pengesanan Awal: Mengesan perubahan visual yang tidak diingini pada awal proses pembangunan.
4. Aliran Kerja Automatik: Bersepadu ke dalam saluran paip CI/CD untuk ujian visual berterusan.

Bermula dengan Cypress dan Percy

Untuk bermula dengan ujian regresi visual menggunakan Cypress dan Percy, ikut langkah ini:

Langkah 1: Pasang Cypress dan Percy
Pertama, pastikan anda telah memasang Cypress dalam projek anda. Jika tidak, anda boleh memasangnya menggunakan arahan berikut:

npm install cypress --save-dev

Seterusnya, pasangkan Percy CLI dan pakej @percy/cypress:

npm install --save-dev @percy/cli @percy/cypress

Langkah 2: Konfigurasikan Percy
Buat projek Percy pada papan pemuka Percy. Setelah dibuat, anda akan mendapat token projek Percy. Tetapkan token ini sebagai pembolehubah persekitaran:

export PERCY_TOKEN=<your_percy_project_token>

Langkah 3: Integrasikan Percy dengan Cypress
Dalam fail cypress/support/index.js anda, tambahkan baris berikut untuk mengimport Percy:

import '@percy/cypress';

Ini akan menambahkan perintah Percy pada Cypress, membolehkan anda mengambil gambar visual semasa ujian anda.

Menulis Ujian Regresi Visual

Mari tulis beberapa ujian regresi visual menggunakan Cypress dan Percy. Kami akan mulakan dengan ujian mudah untuk menangkap gambar visual halaman web.

Contoh: Menangkap Syot Kilat Visual
Buat fail ujian baharu dalam direktori cypress/e2e, contohnya, visual-regression.spec.js dan tambah kod berikut:

describe('Visual Regression Testing with Cypress and Percy', () => {
    beforeEach(() => {
        cy.visit('/');
    });

    it('should capture a visual snapshot of the homepage', () => {
        cy.percySnapshot('Homepage');
    });
});

Dalam ujian ini:

• cy.visit('/'): Navigasi ke URL akar aplikasi.
• cy.percySnapshot('Homepage'): Menangkap gambar visual halaman dan menamakannya "Homepage".

Contoh: Menguji Komponen Tertentu
Anda juga boleh menangkap gambar visual komponen atau bahagian tertentu halaman. Sebagai contoh, mari tangkap gambar borang log masuk.

describe('Visual Regression Testing with Cypress and Percy', () => {
    beforeEach(() => {
        cy.visit('/login');
    });

    it('should capture a visual snapshot of the login form', () => {
        cy.get('.login-form').percySnapshot('Login Form');
    });
});

Dalam ujian ini:

• cy.visit('/login'): Navigasi ke halaman log masuk.
• cy.get('.login-form'): Memilih elemen borang log masuk.
• cy.percySnapshot('Borang Log Masuk'): Menangkap petikan visual borang log masuk.

Ujian Regresi Visual Lanjutan

Merakam Syot Kilat dalam Keadaan Berbeza
Anda boleh menangkap syot kilat aplikasi anda dalam keadaan berbeza, seperti selepas interaksi pengguna.

describe('Visual Regression Testing with Cypress and Percy', () => {
    beforeEach(() => {
        cy.visit('/login');
    });

    it('should capture visual snapshots in different states', () => {
        cy.get('input[name="username"]').type('testuser');
        cy.get('input[name="password"]').type('password123');
        cy.percySnapshot('Login Form - Filled');

        cy.get('button[type="submit"]').click();
        cy.percySnapshot('Dashboard');
    });
});

Dalam ujian ini:

• Kami menangkap gambar borang log masuk selepas mengisinya.
• Kami menangkap satu lagi gambar papan pemuka selepas log masuk.

Menjalankan Ujian Regresi Visual

Untuk menjalankan ujian regresi visual anda, gunakan arahan berikut:

npx percy exec -- cypress run

Arahan ini menjalankan ujian Cypress dengan Percy, menangkap dan membandingkan syot kilat visual.

Menyemak Perubahan Visual

Selepas menjalankan ujian, Percy memuat naik syot kilat ke papan pemuka Percy, tempat anda boleh menyemak perubahan visual. Papan pemuka menyerlahkan sebarang perbezaan antara syot kilat baharu dan imej garis dasar, membolehkan anda meluluskan atau menolak perubahan.

Amalan Terbaik untuk Ujian Regresi Visual

1. Asingkan Elemen Visual: Tangkap syot kilat komponen atau bahagian terpencil untuk menentukan perubahan visual dengan lebih berkesan.
2. Gunakan Nama Syot Kilat Deskriptif: Gunakan nama deskriptif untuk syot kilat untuk memudahkan mengenal pasti dan menyemaknya.
3. Bersepadu dengan CI/CD: Tambahkan ujian regresi visual pada saluran paip CI/CD anda untuk menangkap perubahan visual secara automatik dengan setiap penempatan.
4. Semak Perubahan Secara Kerap: Semak dan luluskan perubahan secara kerap dalam papan pemuka Percy untuk mengekalkan garis dasar visual yang tepat.

Kesimpulan

Ujian regresi visual dengan Cypress dan Percy ialah cara yang berkesan untuk memastikan aplikasi web anda mengekalkan integriti visualnya dari semasa ke semasa. Dengan menyepadukan ujian visual ke dalam aliran kerja anda, anda boleh mengesan dan menangani perubahan visual yang tidak diingini lebih awal, memberikan pengalaman pengguna yang konsisten dan digilap. Ikut langkah dan amalan terbaik yang digariskan dalam panduan ini untuk menyediakan dan memanfaatkan ujian regresi visual dalam projek anda.

Selamat menguji!

Atas ialah kandungan terperinci Ujian Regresi Visual dengan Cypress dan Percy: Panduan Komprehensif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!