Aplikasi Web Fullstack Next.js 15 · Pelajaran

Ujian Hujung ke Hujung dengan Playwright

Sediakan ujian hujung ke hujung untuk mensimulasikan interaksi pengguna sepanjang aliran aplikasi anda.

Pelajaran 2 daripada 411 langkah

Ujian Hujung ke Hujung dengan Playwright ialah pelajaran Aplikasi Web Fullstack Next.js 15 percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Aplikasi Web Fullstack Next.js 15, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Aplikasi Web Fullstack Next.js 15 merangkumi sejumlah 4 pelajaran.

Apakah Ujian End-to-End?

Ujian End-to-End (E2E) mensimulasikan perjalanan pengguna sebenar melalui aplikasi anda, dari mula hingga tamat. Ujian ini menguji keseluruhan tindanan: bahagian hadapan, bahagian belakang dan pangkalan data.

Bayangkan ia sebagai pengguna robot yang berinteraksi dengan aplikasi anda dalam pelayar. Ini memastikan semua bahagian sistem anda berfungsi bersama seperti yang dijangkakan, serta mengesan masalah yang mungkin terlepas daripada ujian unit atau integrasi.

Mengapa Playwright untuk E2E?

Playwright ialah alat sumber terbuka yang berkuasa daripada Microsoft dan direka untuk ujian E2E yang boleh dipercayai. Alat ini menawarkan beberapa kelebihan utama:

Rentasan pelayar: Menguji Chromium, Firefox dan WebKit (Safari).
Menunggu automatik: Menunggu elemen bersedia secara automatik, sekali gus mengurangkan ketidakstabilan ujian.
Tindakan kukuh: Mensimulasikan interaksi pengguna sebenar seperti klik, pengisian dan tekanan kekunci.
Pantas dan selari: Boleh menjalankan ujian merentas beberapa pelayar secara serentak.

Menyediakan Playwright

Untuk bermula, anda perlu memasang Playwright dalam projek Next.js anda. Perintah ini menyediakan Playwright dan memuat turun binari pelayar yang diperlukan:

npm init playwright@latest

Perintah ini akan membimbing anda menyediakan fail konfigurasi asas (playwright.config.ts) dan ujian contoh. Pastikan aplikasi Next.js anda sedang berjalan (contohnya, npm run dev) apabila menjalankan ujian E2E!

Ujian Playwright Pertama Anda

Mari tulis ujian mudah untuk menavigasi ke halaman dan menyemak tajuknya. Ujian Playwright biasanya ditulis dalam JavaScript atau TypeScript.

Contoh ini menganggap aplikasi Next.js anda sedang berjalan di http://localhost:3000.

import { test, expect } from '@playwright/test';

test('homepage has expected title', async ({ page }) => {
  await page.goto('http://localhost:3000/');
  // Check if the page title contains 'Next.js App'
  await expect(page).toHaveTitle(/Next.js App/);
});

Berinteraksi dengan Elemen

Playwright menyediakan pencari lokasi yang berkuasa untuk mencari elemen pada halaman. Anda boleh berinteraksi dengan elemen ini dengan mengisi medan input, mengklik butang dan banyak lagi.

Pencari lokasi yang lazim termasuk getByRole(), getByText(), getByLabel() dan locator() untuk pemilih CSS.

import { test, expect } from '@playwright/test';

test('fill and submit a contact form', async ({ page }) => {
  await page.goto('http://localhost:3000/contact');

  // Fill input fields by label or placeholder
  await page.getByLabel('Your Name').fill('Alice');
  await page.getByPlaceholder('email@example.com').fill('alice@example.com');

  // Click the submit button
  await page.getByRole('button', { name: 'Send Message' }).click();

  // Assert that a success message appears
  await expect(page.getByText('Message sent successfully!')).toBeVisible();
});

Penegasan dan Penungguan Automatik

API expect Playwright digunakan untuk membuat penegasan tentang keadaan aplikasi anda. Ciri utama ialah penungguan automatik, apabila Playwright menunggu elemen menjadi kelihatan, diaktifkan atau stabil secara automatik sebelum melakukan tindakan atau penegasan.

Ini mengurangkan keperluan untuk menunggu secara manual dengan ketara, menjadikan ujian anda lebih kukuh dan kurang terdedah kepada ketidakstabilan.

import { test, expect } from '@playwright/test';

test('check item count', async ({ page }) => {
  await page.goto('http://localhost:3000/products');

  // Playwright waits for the list to render
  const productList = page.locator('.product-item');
  await expect(productList).toHaveCount(5);

  // Click a filter button
  await page.getByRole('button', { name: 'Filter by Category A' }).click();

  // Playwright waits for the list to update after filtering
  await expect(productList).toHaveCount(2);
});

Menguji Aliran Pengguna Lengkap

Mari simulasikan perjalanan pengguna yang lebih kompleks: pengguna log masuk, menavigasi ke papan pemuka dan mengesahkan kandungan. Ini menunjukkan cara ujian E2E meliputi berbilang halaman dan interaksi.

Pastikan aplikasi Next.js anda mempunyai halaman log masuk dan papan pemuka supaya ujian ini berjaya.

import { test, expect } from '@playwright/test';

test('user can log in and view dashboard', async ({ page }) => {
  await page.goto('http://localhost:3000/login');

  // Fill login form
  await page.getByLabel('Username').fill('testuser');
  await page.getByLabel('Password').fill('securepassword');
  await page.getByRole('button', { name: 'Log In' }).click();

  // Wait for navigation to the dashboard and verify content
  await page.waitForURL('http://localhost:3000/dashboard');
  await expect(page.getByRole('heading', { name: 'Welcome, testuser!' })).toBeVisible();
  await expect(page.getByText('Your recent activity')).toBeVisible();
});

Menjalankan Ujian dan Pelaporan

Selepas menulis ujian, anda boleh menjalankannya dari terminal. Playwright menyediakan pelancar ujian yang berkuasa dan pelbagai pilihan pelaporan:

Jalankan semua ujian: npx playwright test
Jalankan fail ujian tertentu: npx playwright test example.spec.js
Jalankan ujian dalam mod berpandukan (pelayar kelihatan): npx playwright test --headed
Pelapor HTML: Selepas ujian dijalankan, buka playwright-report/index.html untuk melihat laporan interaktif yang terperinci.

Amalan Terbaik untuk Ujian E2E

Untuk menulis ujian E2E yang berkesan dan mudah diselenggara:

Sasarkan elemen yang dilihat pengguna: Gunakan pencari lokasi yang mencerminkan cara pengguna melihat halaman (contohnya, getByRole, getByText).
Gunakan atribut data-testid: Untuk elemen tanpa teks atau peranan yang jelas, tambahkan atribut data-testid bagi pemilihan yang kukuh.
Pastikan ujian tidak bergantung antara satu sama lain: Setiap ujian hendaklah menyediakan keadaannya sendiri dan tidak bergantung pada ujian sebelumnya.
Seimbangkan jenis ujian: Ujian E2E lebih perlahan; gunakannya untuk aliran pengguna yang kritikal dan bergantung pada ujian unit/integrasi untuk komponen yang lebih kecil.

Konsep Ujian Playwright

Antara berikut, yang manakah merupakan manfaat atau ciri utama Playwright untuk pengujian End-to-End?

Jawab dalam pelajaran interaktif

Ulang Kaji: E2E dengan Playwright

Kami telah meneroka ujian End-to-End dan cara Playwright membantu anda mensimulasikan interaksi pengguna sebenar merentas keseluruhan aplikasi Next.js anda.

Anda telah mempelajari cara menyediakan Playwright, menulis ujian yang menavigasi, berinteraksi dengan elemen dan membuat penegasan terhadap hasil. Dengan keupayaan penungguan automatik dan sokongan rentas pelayar, Playwright ialah alat yang berkuasa untuk memastikan kebolehpercayaan aplikasi tindanan penuh anda.

Percuma untuk bermula

Pelajari TypeScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 12
Pelajaran: 48

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Ujian Hujung ke Hujung dengan Playwright” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Aplikasi Web Fullstack Next.js 15, termasuk “Ujian Hujung ke Hujung dengan Playwright”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Aplikasi Web Fullstack Next.js 15 merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Ujian Hujung ke Hujung dengan Playwright”?

Sediakan ujian hujung ke hujung untuk mensimulasikan interaksi pengguna sepanjang aliran aplikasi anda. Anda berlatih Aplikasi Web Fullstack Next.js 15 menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Aplikasi Web Fullstack Next.js 15?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Aplikasi Web Fullstack Next.js 15 di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “Ujian Hujung ke Hujung dengan Playwright” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Aplikasi Web Fullstack Next.js 15 ini?

Ya. Setiap pelajaran Aplikasi Web Fullstack Next.js 15 menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Ujian Unit dan Integrasi
Ujian Hujung ke Hujung dengan Playwright
Monorepo dan Mikrobahagian Hadapan
Penyamaran dan Pengujian Komponen Pelayan

← Kembali ke Aplikasi Web Fullstack Next.js 15