Cara menguji tapak web: Menggunakan SIRV dan Penulis Drama untuk pembangunan dipacu ujian (TDD)

Saya telah mengusahakan beberapa tapak web, untuk perkahwinan kami dan untuk laman web terjemahan makanan untuk menterjemah makanan semasa melancong. Salah satu perkara yang menyeronokkan yang saya temui ialah cara menguji tapak web ini dan memastikan semuanya berfungsi.

Apakah pembangunan dipacu ujian (TDD)?

Dua alat yang saya temui—atau lebih tepat, diberitahu tentang—yang dipanggil SIRV dan Penulis Drama, boleh membantu anda menjalankan tapak web anda dan menguji bahagian tapak. Sebaik sahaja anda telah melakukan beberapa ujian dan mengetahui cara untuk memperbaiki keadaan, anda boleh membuat kemas kini dan perubahan berdasarkan ujian tersebut. Ini dipanggil pembangunan dipacu ujian, di mana ujian mendedahkan jurang dalam aplikasi anda dan anda membuat perubahan berdasarkan ujian anda.

Biasanya jurang ini datang dalam bentuk ujian yang gagal. Contohnya, jika anda mempunyai borang di tapak web anda dan ia gagal apabila memasukkan tanda baca di bawah keperluan diet, maka anda boleh menukar input borang untuk membenarkan tanda baca. Ini menjadikan aplikasi anda lebih baik untuk pengguna anda dan anda kini mempunyai ciri baharu berdasarkan ujian asal yang anda jalankan.

Jadi bagaimana anda menulis ujian untuk aplikasi anda?

Apakah SIRV dan Penulis Drama?

SIRV ialah pelayan tapak statik. Ia adalah perisian tengah yang dioptimumkan untuk menyampaikan permintaan kepada aset statik. Oleh itu, SIRV berfungsi paling baik jika anda mempunyai tapak statik.

Penulis drama sebaliknya ialah kaedah ujian untuk aplikasi web. Menggunakan ini bersama-sama, bermakna Playwright ialah alat yang akan kami gunakan untuk menulis dan menjalankan ujian. SIRV ialah antara muka di mana kita boleh melihat aplikasi kita berjalan dan melihat ujian mana yang lulus atau gagal.

Ujian menulis

Untuk menguji kod anda, anda perlu menulis ujian. Dalam contoh ini, saya sedang menulis ujian untuk melihat sama ada saya mempunyai perkataan atau tajuk tertentu pada halaman web. Saya menggunakan GitHub Copilot untuk membantu menulis ujian untuk melakukan ini. Dokumentasi Penulis Drama memberi saya titik permulaan yang betul untuk menulis ujian.

Untuk menggunakan Penulis Drama untuk menulis ujian, anda perlu mengimportnya. Inilah titik permulaan untuk menulis ujian anda:

import { ujian, jangkakan } daripada '@playwright/test';

Saya membina tapak web untuk perkahwinan kami dan saya ingin menguji sama ada tajuk "Mish dan Max" dikesan pada halaman tersebut. Jadi inilah kod yang saya gunakan untuk menguji ini:

test('Contact Mish and Max', async ({ page }) => {
    // Navigate to the page
    await page.goto('http://localhost:8080/contact.html');

    // Assert that the title says "Contact Mish and Max"
    await expect(page).toHaveTitle("Contact Mish and Max")
});

Anda perlu menambah fail baharu pada projek anda dengan sambungan .spec.test. Pastikan anda menyimpannya dan menyimpannya setiap kali anda membuat perubahan. Memandangkan ujian sudah tertulis, mari jalankan ujian itu.

Menggunakan SIRV dan Penulis Drama untuk ujian

Pertama sekali, anda memerlukan Node untuk ini berfungsi. Ikuti panduan dalam dokumen Node.js untuk memasang Node untuk Windows, MacO atau Linux.

Apabila anda bersedia untuk menguji kod anda, buka terminal dalam Kod VS, atau editor pilihan anda. Saya menggunakan Kod VS jadi demo di sini menggunakan Kod VS. Buka terminal dengan memilih Lihat > Terminal dari bar menu, atau dengan menekan pintasan papan kekunci Ctrl + `.

Sebaik sahaja anda mempunyai terminal, terdapat beberapa arahan yang anda perlu jalankan:

npm install @playwright/test - ini menyediakan ujian Playwright dengan memasang pustaka ujian.

pemasangan pengarang drama npx - ini memuat turun versi ujian Chrome, FireFox, Safari dan lain-lain.

npx sirv-cli . - ini menjalankan versi tempatan SIRV untuk ujian.

Sekarang anda mempunyai persediaan SIRV dan Penulis Drama dan bersedia, kami boleh menjalankan ujian. Buka terminal baharu dalam Kod VS (atau editor pilihan anda), dan jalankan arahan berikut:

ujian penulis drama npx --ui Ini menjalankan ujian dan membuka tetingkap baharu di mana kita akan dapat menjalankan dan melihat ujian berjalan.

Berikut ialah semua arahan di atas yang dijalankan:

Tetingkap ujian terminal Penulis drama:

Membaca dan membetulkan ujian

Kita dapat lihat dalam ujian di atas bahawa ia gagal dalam larian. Apabila kita melihat mengapa ini berlaku, kita boleh menentukan cara untuk membetulkannya. Dengan melihat tab "Ralat", kita boleh melihat ralat yang berlaku:

Dalam keadaan ini, ia berkata:

Rentetan yang dijangkakan: "Hubungi Mish dan Max"
Rentetan yang diterima: "Hubungi"

Dalam erti kata lain, ia dijangka menerima "Hubungi Mish dan Max", tetapi sebaliknya, ia berkata "Hubungi". Jika saya melihat fail *.html saya, kita dapat melihat saya mempunyai dua tag:

HMTL membaca tag tajuk pertama sahaja, walaupun terdapat tag tajuk lain. Kami boleh membetulkan ralat ini dengan cepat dengan menukar teg tajuk pertama untuk membaca . Kini kita boleh menjalankan ujian semula:

Kali ini, kita lihat ✔️ dan ujian itu lulus ?.

Ujian menulis dan menulis kod

Sekarang anda tahu cara menulis dan menjalankan ujian dengan SIRV dan Penulis Drama, anda boleh meneruskan dan menulis ujian yang lebih kompleks. Contohnya, pada borang hubungan yang sama di atas, saya menulis ujian—menggunakan bantuan GitHub Copilot—untuk menyemak sama ada borang hubungan boleh diisi dan diserahkan:

Saya boleh menjalankan ujian ini dan melangkah melalui setiap bahagian ujian, melihat dalam UI tempat perubahan dibuat di tapak web:

Cuba sendiri, dan beritahu saya ujian yang anda tulis, dan jika panduan ini membantu.

Atas ialah kandungan terperinci Cara menguji tapak web: Menggunakan SIRV dan Penulis Drama untuk pembangunan dipacu ujian (TDD). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!