Angular Academy · Pelajaran

Menulis Pengujian Playwright

Otomatiskan alur browser dengan Playwright.

Menulis Pengujian Playwright adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Angular Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Angular Academy mencakup 4 pelajaran total.

Pengujian Playwright Pertama Anda

Pengujian Playwright adalah fungsi asinkron yang menerima fixture seperti page. Anda mengimpor test dan expect dari @playwright/test dan mendeskripsikan skenario pengguna.

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

test('opens the home page', async ({ page }) => {
  await page.goto('/');
  await expect(page).toHaveURL(/.*localhost/);
});

Fixture page

Objek page mewakili satu tab peramban. Setiap pengujian mendapatkan page baru yang terisolasi dalam konteks bersih, sehingga pengujian tidak pernah secara tidak sengaja berbagi cookie atau penyimpanan.

Bernavigasi dengan goto

page.goto(url) memuat URL dan menunggu hingga halaman siap. Jika digabungkan dengan baseURL dalam konfigurasi, Anda dapat menggunakan jalur relatif.

await page.goto('/login');      // resolves against baseURL
await page.goto('https://example.com'); // absolute also works

Menemukan Elemen dengan Locator

Locator adalah referensi malas ke elemen yang menunggu secara otomatis. Utamakan locator semantis seperti getByRole, getByLabel, dan getByText daripada pemilih CSS yang rapuh.

const submit = page.getByRole('button', { name: 'Sign in' });
const email = page.getByLabel('Email');

Mengetik dan Mengeklik

Gunakan fill untuk menetapkan nilai input dan click untuk menekan tombol. Playwright secara otomatis menunggu elemen terlihat dan aktif sebelum melakukan tindakan.

await page.getByLabel('Email').fill('ada@example.com');
await page.getByLabel('Password').fill('secret');
await page.getByRole('button', { name: 'Sign in' }).click();

Penungguan Otomatis Menghilangkan Jeda yang Tidak Stabil

Berbeda dari alat lama, Playwright otomatis menunggu elemen dan menunggu hingga pemeriksaan terpenuhi. Anda hampir tidak pernah memerlukan batas waktu manual, sehingga pengujian menjadi stabil.

// No need for: await page.waitForTimeout(2000)
await expect(page.getByText('Welcome back')).toBeVisible();

Mengelompokkan Pengujian dengan describe

Gunakan test.describe untuk mengelompokkan skenario terkait dan membagikan persiapan dengan beforeEach.

test.describe('Login flow', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/login');
  });

  test('shows the form', async ({ page }) => {
    await expect(page.getByLabel('Email')).toBeVisible();
  });
});

Menguji Alur Pengguna Lengkap

Rangkai tindakan untuk memodelkan alur lengkap. Setiap langkah terbaca seperti skrip perilaku pengguna.

test('user can log in and see dashboard', async ({ page }) => {
  await page.goto('/login');
  await page.getByLabel('Email').fill('ada@example.com');
  await page.getByLabel('Password').fill('secret');
  await page.getByRole('button', { name: 'Sign in' }).click();
  await expect(page).toHaveURL(/.*dashboard/);
});

Menjalankan Pengujian

Jalankan semua spesifikasi dari CLI. Tambahkan --headed untuk mengamati peramban, atau --ui untuk membuka pelaksana pengujian interaktif Playwright.

npx playwright test
npx playwright test --headed
npx playwright test --ui

Menelusuri Kegagalan

Saat terjadi kegagalan, Playwright dapat merekam tangkapan layar, video, dan trace yang dapat Anda putar ulang langkah demi langkah. Penampil trace menampilkan DOM pada setiap tindakan, sehingga kegagalan yang tidak stabil mudah didiagnosis.

npx playwright test --trace on
npx playwright show-trace trace.zip

Isolasi Pengujian Itu Penting

Karena setiap pengujian mendapatkan konteks perambannya sendiri, jangan bergantung pada urutan atau state bersama antar pengujian. Siapkan data yang diperlukan setiap pengujian dalam beforeEach miliknya sendiri atau di dalam pengujian itu sendiri.

Pemeriksaan Cepat

Mengapa harus menghindari waitForTimeout?

Ringkasan

Pengujian Playwright menggunakan fixture page: goto untuk bernavigasi, locator semantis (getByRole, getByLabel) untuk menemukan elemen, serta fill/click untuk berinteraksi. Penungguan otomatis menghilangkan jeda yang tidak stabil. Kelompokkan dengan describe, jalankan dengan npx playwright test, dan telusuri kesalahan menggunakan trace.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menulis Pengujian Playwright” gratis?

Ya — teks lengkap “Menulis Pengujian Playwright” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Angular Academy, upgrade ke CoddyKit PRO. Kursus Angular Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Menulis Pengujian Playwright”?

Otomatiskan alur browser dengan Playwright. Kamu berlatih Angular Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Angular Academy?

Tidak diperlukan pengalaman sebelumnya. Angular Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Menulis Pengujian Playwright” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Angular Academy ini?

Ya. Setiap pelajaran Angular Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Angular Academy