Ujian Ecom Cypress

Ujian E2E dengan Cypress mengajar anda cara melakukan ujian hujung ke hujung (E2E) menggunakan Cypress , salah satu alat yang paling popular untuk ujian automatik dalam JavaScript, terutamanya untuk aplikasi web. Saya akan menerangkan semua konsep dan langkah secara terperinci.

---

Apakah itu Ujian E2E?

Ujian Hujung-ke-Hujung (E2E) ialah ujian automatik yang mengesahkan kelakuan lengkap aplikasi, dari awal hingga akhir, mensimulasikan interaksi pengguna dengan antara muka. Ujian ini penting kerana ia mengesahkan bahawa semua bahagian aplikasi berfungsi dengan betul bersama-sama, seperti yang diharapkan, dalam persekitaran sebenar.

Cypress: Apakah itu dan Bagaimana Ia Berfungsi?

Cypress ialah alat untuk ujian automatik aplikasi web. Ia direka bentuk untuk mudah digunakan, berkuasa dan pantas. Ia membolehkan anda menulis ujian yang berinteraksi dengan antara muka pengguna aplikasi dengan cara yang sama seperti pengguna, mengklik butang, mengisi borang, mengesahkan teks dan banyak lagi.

Beberapa ciri penting Cypress:

• Ujian masa nyata: Ia menjalankan ujian dalam penyemak imbas itu sendiri, membolehkan anda melihat ujian berjalan secara langsung.
• Kemudahan persediaan: Tiada persediaan rumit diperlukan untuk bermula.
• Pelaksanaan pantas: Memandangkan Cypress dijalankan dalam penyemak imbas, pelaksanaan ujian lebih pantas berbanding alat ujian E2E yang lain.
• Penyatuan CI/CD: Ia mudah disepadukan dengan saluran paip CI/CD untuk automasi ujian.

---

Modul 34 Walkthrough

1. Mengkonsepkan alat Cypress

Cypress ialah alat ujian automatik untuk aplikasi web, terutamanya untuk ujian E2E. Ia direka bentuk untuk berinteraksi secara langsung dengan kod aplikasi dalam penyemak imbas, menjadikan ujian lebih cekap.

2. Memasang Cypress pada mesin

Untuk mula menggunakan Cypress, anda perlu memasangnya dalam projek anda. Berikut ialah arahan pemasangan:

npm install cypress --save-dev

Ini akan memasang Cypress sebagai pergantungan pembangunan dalam projek anda.

3. Memulakan Cypress

Selepas memasang Cypress, anda boleh membukanya menggunakan arahan berikut dalam terminal:

npm install cypress --save-dev

Ini akan membuka Cypress Test Runner di mana anda boleh melihat ujian berjalan dalam penyemak imbas. Ia juga mencipta folder cypress dalam projek anda, tempat semua ujian dan konfigurasi disimpan.

4. Menggunakan fungsi huraikan untuk mengumpulkan ujian

Dalam Cypress (dan Jest), kami menggunakan menghuraikan untuk mengumpulkan berbilang ujian yang merupakan sebahagian daripada suite atau modul yang sama. Ini membantu untuk mengatur ujian dengan cara yang lebih berstruktur.

npx cypress open

Dalam contoh di atas:

• huraikan digunakan untuk mengumpulkan ujian berkaitan log masuk.
• ia mentakrifkan ujian khusus dalam kumpulan. Apa yang berikut di dalamnya ialah kod yang melakukan pengesahan (langkah ujian).

5. Menggunakan fungsi it

Fungsi it digunakan untuk menentukan kes ujian individu. Setiap kes ujian mestilah bebas dan mewakili fungsi atau gelagat aplikasi tertentu.

6. Mendapatkan semula elemen dengan fungsi cy.get

Fungsi cy.get digunakan untuk memilih elemen halaman untuk berinteraksi dalam ujian.

Contoh:

describe('Teste de Login', () => {
  it('Deve realizar o login com sucesso', () => {
    cy.visit('https://exemplo.com/login');
    cy.get('input[name="username"]').type('usuario');
    cy.get('input[name="password"]').type('senha123');
    cy.get('button[type="submit"]').click();
    cy.url().should('include', '/dashboard');
  });
});

Di sini, cy.get mencari input dengan name="username" dan butang serah dengan type="submit", dan kemudian melakukan tindakan type dan klik.

7. Pengenalan kepada VScode dan Autolengkap

Anda boleh menggunakan VSCode untuk mengedit ujian anda dan memanfaatkan autolengkap Cypress, yang memudahkan untuk menulis ujian dengan betul dengan mencadangkan kaedah dan arahan semasa anda menaip.

8. Menggunakan Hubungan Hierarki

Cypress membolehkan anda memilih elemen berdasarkan hierarki halaman, menggunakan pemilih CSS yang lebih kompleks. Contohnya, anda boleh memilih butang yang berada di dalam div dengan kelas tertentu:

cy.get('input[name="username"]').type('usuario');
cy.get('button[type="submit"]').click();

9. Membina Ujian Penapisan

Contoh ujian penapisan adalah untuk menyemak sama ada, apabila menggunakan penapis, senarai item dikemas kini dengan betul. Cypress membolehkan anda melakukan ujian jenis ini dengan mudah, berinteraksi dengan penapis dan menyemak keputusan.

cy.get('.modal').find('button').click(); // Encontra o botão dentro de .modal e clica

10. Menggunakan fungsi beforeEach

Fungsi beforeEach berguna untuk mengkonfigurasi keadaan aplikasi sebelum setiap ujian. Ini amat penting apabila anda perlu memastikan bahawa aplikasi berada dalam keadaan awal sebelum menjalankan ujian.

npm install cypress --save-dev

11. Mengetahui Jenis Cypress Return

Cypress menggunakan Promises untuk mengurus masa tak segerak, tetapi ia secara automatik mengendalikan janji-janji ini, menjadikan ujian lebih mudah. Ia tidak perlu menggunakan await atau .then() dalam banyak kes kerana Cypress mengendalikan perkara ini secara dalaman.

12. Menyusun Kod untuk Mengurangkan Talian

Memastikan ujian teratur dan boleh digunakan semula adalah penting. Anda boleh membuat fungsi pembantu dan menggunakan semula coretan kod.

Contoh:

npx cypress open

13. Mengetahui Ciri-ciri Tambahan Cypress

• Ambil Tangkapan Skrin: Cypress boleh mengambil tangkapan skrin secara automatik semasa ujian. Ini membantu anda membayangkan perkara yang berlaku apabila ujian gagal.

describe('Teste de Login', () => {
  it('Deve realizar o login com sucesso', () => {
    cy.visit('https://exemplo.com/login');
    cy.get('input[name="username"]').type('usuario');
    cy.get('input[name="password"]').type('senha123');
    cy.get('button[type="submit"]').click();
    cy.url().should('include', '/dashboard');
  });
});

• Jana Laporan: Cypress membenarkan anda menjana laporan pelaksanaan ujian, yang memudahkan untuk menganalisis keputusan.

• Larian Cypress: Untuk menjalankan ujian dalam mod tanpa kepala (tanpa antara muka grafik), gunakan arahan:
  

cy.get('input[name="username"]').type('usuario');
cy.get('button[type="submit"]').click();

• Permintaan HTTP Mengejek: Anda boleh mensimulasikan respons pelayan dengan Cypress, tanpa perlu membuat panggilan sebenar. Ini berguna untuk menguji senario dengan data tertentu.

cy.get('.modal').find('button').click(); // Encontra o botão dentro de .modal e clica

14. Pemasangan Mock Service Worker (MSW)

Mock Service Worker ialah alat yang membolehkan anda memintas permintaan HTTP dalam ujian anda. Ia boleh digunakan dengan Cypress untuk mensimulasikan permintaan dan mengawal respons.

cy.get('.filter').select('Option 1');
cy.get('.item-list').should('have.length', 5);

Kemudian anda boleh mengkonfigurasi pengendali rangkaian untuk memintas permintaan.

---

Kesimpulan

Dalam Modul 34, anda mempelajari cara menggunakan Cypress untuk melaksanakan ujian E2E pada aplikasi anda, memastikan ia berfungsi dengan betul dalam situasi penggunaan sebenar. Anda mempelajari cara mengkonfigurasi Cypress, menulis ujian, berinteraksi dengan elemen halaman dan menggunakan ciri seperti beforeEach, cy.get, tangkapan skrin, laporan dan banyak lagi. Ujian ini penting untuk memastikan aplikasi anda berfungsi dengan betul dan pepijat baharu tidak diperkenalkan.

Atas ialah kandungan terperinci Ujian Ecom Cypress. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!