Cara menggunakan Cypress untuk ujian hujung ke hujung dalam Vue

Menggunakan Cypress untuk ujian hujung ke hujung dalam Vue boleh membantu kami mengesahkan aplikasi kami dengan lebih baik dan mengesan potensi pepijat dan kecacatan. Cypress ialah rangka kerja ujian hujung ke hujung JavaScript yang boleh menguji kefungsian aplikasi web. Dalam artikel ini, kami akan membincangkan cara menggunakan Cypress dengan Vue untuk ujian hujung ke hujung.

Langkah 1: Pasang Cypress

Mula-mula, kita perlu memasang Cypress, yang boleh dipasang melalui npm. Buka terminal dan jalankan arahan berikut:

npm install cypress -D

Langkah 2: Konfigurasikan Cypress

Selepas pemasangan selesai, kami perlu melakukan beberapa konfigurasi untuk menyesuaikan Cypress kepada aplikasi Vue kami. Folder ujian lalai Cypress berada dalam cypress/integration, jadi kami perlu menukarnya kepada folder aplikasi Vue. Kita boleh menukar folder dengan menetapkan atribut cypress.json dalam fail integrationFolder. Kod sampel adalah seperti berikut:

{
  "integrationFolder": "tests/e2e/specs"
}

Kami juga perlu menetapkan port dan URL asas untuk Cypress supaya ia boleh berkomunikasi dengan aplikasi Vue kami. Tetapkan sifat berikut dalam cypress.json:

{
  "baseUrl": "http://localhost:8080",
  "port": 3000
}

Langkah 3: Cipta fail ujian

Sekarang setelah kami menyelesaikan konfigurasi Cypress, kami boleh mencipta fail ujian pertama kami. Kami perlu mencipta fail baharu dalam folder cypress/integration, sebut hello.spec.js, dan masukkan kod berikut:

describe('HelloWorld.vue', () => {
  it('displays greeting', () => {
    cy.visit('/')
    cy.contains('h1', 'Hello World!')
  })
})

Ujian ini perlu membuka aplikasi Vue kami dan mengesahkan bahawa terdapat fail bertajuk Hello World!h1 elemen.

Langkah 4: Jalankan ujian

Kami telah mencipta fail ujian dan kini boleh menjalankan ujian. Jalankan arahan berikut dalam terminal:

npm run cypress:open

Ini akan membuka pelari ujian Cypress, di mana kami memilih fail ujian kami dan klik butang jalankan. Ujian kami akan dilaksanakan di Cypress dan laporan ujian akan dipaparkan selepas ujian selesai.

Kesimpulan

Melalui langkah di atas, kami mempelajari cara menggunakan Cypress dalam Vue untuk ujian hujung ke hujung. Cypress menyediakan API dan alatan yang kaya untuk mengesahkan kefungsian aplikasi web dengan mudah. Ujian hujung ke hujung dengan Cypress membantu meminimumkan pepijat dalam aplikasi kami untuk memberi perkhidmatan yang lebih baik kepada pengguna kami.

Atas ialah kandungan terperinci Cara menggunakan Cypress untuk ujian hujung ke hujung dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!