Ketahui ujian akhir-ke-akhir dengan dalang

Tutorial ini meneroka dunia ujian perisian dan menunjukkan cara menggunakan dalang, perpustakaan nod, untuk ujian end-to-end yang cekap aplikasi web. Kami akan merangkumi jenis ujian yang berbeza dan kemudian membina contoh praktikal menggunakan aplikasi kaunter mudah. ​​

Konsep Utama:

• Puppeteer: Perpustakaan Node.js yang kuat mengawal krom atau kromium melalui protokol DevTools. Sesuai untuk ujian akhir-ke-akhir dan automasi penyemak imbas. Ia mungkir ke mod tanpa kepala tetapi boleh berjalan dengan tetingkap pelayar yang kelihatan.
• Jenis Ujian: Kami akan mengkaji empat metodologi ujian utama: ujian statik (menggunakan linter dan sistem jenis), ujian unit (ujian unit kod individu), ujian integrasi (menguji interaksi pelbagai unit) , dan ujian akhir-ke-akhir (mensimulasikan interaksi pengguna sebenar di seluruh aplikasi).
• Ujian akhir-ke-akhir dengan dalang: Tutorial menyediakan panduan langkah demi langkah untuk menubuhkan dan melaksanakan ujian akhir-ke-akhir menggunakan dalang. Ini termasuk halaman menavigasi, menunggu unsur -unsur tertentu, mengekstrak data, dan mengesahkan tingkah laku aplikasi.

Apa itu Puppeteer?

Puppeteer menawarkan API peringkat tinggi untuk berinteraksi dengan krom atau kromium. Walaupun terutamanya tanpa kepala, ia boleh dikonfigurasikan untuk pengalaman penyemak imbas penuh.

Prasyarat:

Tutorial ini menganggap kebiasaan dengan JavaScript (ES6), Node.js, dan Benang (Pengurus Pakej). Pengetahuan dalang asas membantu tetapi tidak diperlukan dengan ketat. Tutorial menggunakan:

node 13.3.0
npm 6.13.2
benang 1.21.1
Puppeteer 2.0.0
create-react-app 3.3.0

Pengenalan kepada Ujian:

Ujian mengesahkan fungsi aplikasi dan membantu mengenal pasti pepijat lebih awal. Empat jenis ujian yang disebutkan di atas membentuk strategi ujian yang komprehensif. "Trofi ujian" (digambarkan di bawah) secara visual mewakili sifat hierarki ujian ini.

ujian akhir-ke-akhir dengan dalang: contoh praktikal

kami akan membuat aplikasi kaunter mudah menggunakan

dan kemudian mengujinya dengan dalang.

1. Persediaan Projek: Buat Projek React baru: npx create-react-app e2e-puppeteer
2. Jalankan aplikasi: cd e2e-puppeteer && yarn start
3. Pasang dalang: yarn add -D puppeteer
4. Pelaksanaan aplikasi kaunter: Ubah suai App.js dan App.css untuk membuat kaunter dengan butang kenaikan dan penurunan.
5. Ujian Puppeteer: Tulis ujian dalang dalam App.test.js untuk mengesahkan fungsi kaunter (keadaan awal, kenaikan, penurunan). Ujian ini menggunakan page.waitForSelector, page.$eval, page.click, dan pernyataan untuk memeriksa tingkah laku aplikasi.
6. Jalankan ujian: yarn test

Kesimpulan:

Tutorial ini memberikan pengenalan praktikal untuk ujian akhir-ke-akhir menggunakan dalang. Keupayaan Puppeteer melangkaui ujian, menjadikannya alat yang berharga untuk pelbagai tugas automasi pelayar. Kod Lengkap boleh didapati di GitHub (pautan tidak disediakan dalam teks asal, perlu ditambah jika tersedia). Sumber lanjut mengenai ujian boleh didapati melalui SitePoint Premium (pautan yang tidak disediakan dalam teks asal, perlu ditambah jika tersedia).

FAQs:

Bahagian ini menjawab soalan umum tentang dalang, termasuk tujuannya, perbezaan dari alat lain, penggunaannya dalam automasi dan mengikis, konsep pelayar tanpa kepala, dan keserasian penyemak imbasnya. (Soalan Lazim asal dimasukkan ke dalam output.)

Atas ialah kandungan terperinci Ketahui ujian akhir-ke-akhir dengan dalang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!