Playwright mengendalikan browser dan menguji aplikasi web. Dalam ekosistem JavaScript dan TypeScript, Playwright Test menambahkan runner, fixture, asersi, project, dan laporan. QA mendapat perintah praktis, isolasi keadaan, dan riwayat kegagalan terperinci.
Alat ini cocok untuk alur pengguna, pemeriksaan keadaan antarmuka, dan sebagian tugas API. Penantian otomatis tidak menggantikan pemahaman aplikasi: tombol yang dapat diklik tidak berarti proses bisnis selesai, dan respons HTTP sukses tidak berarti datanya benar.
Instalasi dan reproduktibilitas
Untuk proyek latihan baru, gunakan npm init playwright@latest. Pilih JavaScript atau TypeScript dan instalasi browser. Gunakan versi Node yang didukung rilis terpilih. Dalam repositori kerja, pertahankan package-lock.json dan instal dependensi dengan npm ci.
Versi build browser terikat dengan versi Playwright terpasang. Setelah memperbarui paket, perbarui browsernya dan periksa dependensi sistem CI. Executable global sembarangan dapat menimbulkan perbedaan antara mesin lokal dan agen; dokumentasikan pilihan itu secara eksplisit.
Locator dan nama aksesibel
Playwright mendukung locator berdasarkan role, label, teks, dan test ID. Locator menjelaskan cara menemukan elemen pada keadaan halaman saat ini. Ini lebih baik daripada menyimpan referensi node DOM lama yang mungkin diganti aplikasi saat rendering.
Pilih atribut berdasarkan makna. Untuk formulir, getByLabel menghubungkan pengujian dengan label aksesibelnya; untuk tombol, getByRole dengan nama menyatakan tindakan pengguna. Jika beberapa elemen cocok, persempit kontainer. Otomatis memilih hasil pertama dapat menyembunyikan ambiguitas dan mengklik tombol salah.
Contoh mandiri
Dalam proyek yang dibuat, simpan tests/profile.spec.js. Contoh menggunakan halaman dalam memori tanpa server. Jalankan npx playwright test tests/profile.spec.js. Aturan latihan menolak nama kosong dan menampilkan sukses untuk nama tidak kosong; tidak ada penyimpanan nyata.
const { test, expect } = require('@playwright/test');
test('validates the name after submission', async ({ page }) => {
await page.setContent(`
<label>Name <input id="name"></label>
<button id="save">Save</button><p role="status"></p>
<script>
document.querySelector('#save').onclick = () => {
const name = document.querySelector('#name').value.trim();
setTimeout(() => {
document.querySelector('[role=status]').textContent =
name ? 'Saved' : 'Enter a name';
}, 100);
};
</script>`);
await page.getByRole('button', { name: 'Save' }).click();
await expect(page.getByRole('status')).toHaveText('Enter a name');
await page.getByLabel('Name').fill('Anna');
await page.getByRole('button', { name: 'Save' }).click();
await expect(page.getByRole('status')).toHaveText('Saved');
});Harapkan kesalahan nilai kosong, lalu sukses untuk nilai valid. toHaveText mengulangi pengamatan hingga kondisi terpenuhi atau timeout. await diperlukan untuk tindakan dan asersi asinkron: menghilangkannya dapat menyebabkan urutan salah dan pemeriksaan tidak selesai.
Apa yang sebenarnya ditunggu alat ini
Sebelum tindakan, Playwright memeriksa kondisi seperti visibilitas dan kesiapan interaksi sesuai operasinya. Playwright tidak mengetahui apakah perhitungan latar belakang, pengiriman email, atau pemrosesan antrean selesai. Hasil itu memerlukan kondisi teramati tersendiri.
Utamakan asersi web-first untuk UI dinamis. Mengambil teks langsung dan membandingkannya dengan assert biasa hanya memeriksa satu saat. Namun jangan mengganti setiap penantian dengan timeout sangat besar: jika peristiwa seharusnya tidak terjadi, menunggu lebih lama tidak memperbaiki skenario.
Beralih ke profil nyata
Buat pengguna uji terpisah, buka area akun, dan kirim nama berisi spasi saja. Harapkan kesalahan dan nilai asli tetap tersimpan. Dalam skenario lain, kirim nama valid baru lalu ambil profil melalui UI atau API sesuai tujuan pengujian.
Pengujian dengan network mocking mengonfirmasi penanganan klien atas respons yang diberikan. Pertahankan pemeriksaan integrasi terpisah tanpa mengganti operasi ini untuk memverifikasi penyimpanan nyata. Jelaskan batas antara kesalahan UI terkontrol dan koneksi backend nyata dalam nama rangkaian uji.
Fixture dan independensi
Playwright Test menggunakan context untuk membuat keadaan browser terisolasi bagi pengujian. Ini membantu cookie dan penyimpanan, tetapi tidak otomatis mengisolasi record server. Dua context dengan satu akun tetap dapat mengubah profil atau keranjang yang sama.
Fixture dapat menyiapkan pengguna, klien API, dan entitas yang dibutuhkan. Pilih cakupannya secara sadar. Sumber daya bersama tingkat worker harus aman bagi semua pengujian worker tersebut; data skenario yang dapat berubah lebih baik dibuat terpisah.
Project dan matriks browser
Project menjelaskan konfigurasi seperti browser, viewport, locale, dan parameter lain. Jalankan matriks berbasis risiko, bukan otomatis seluruh kombinasi. Konfirmasi alur kritis dahulu, lalu tambahkan area sensitif terhadap lingkungan terpilih.
Emulasi seluler tidak menggantikan telepon nyata beserta keyboard, izin, dan integrasi sistemnya. WebKit otomatis juga tidak boleh disebut pengujian lengkap Safari pengguna. Catat batas cakupan bersama hasil.
Trace dan penyelidikan
Trace Viewer membantu memeriksa tindakan dan keadaan halaman di sekitar kegagalan. Simpan trace menurut kebijakan, misalnya saat retry atau gagal, dan sediakan dari CI. Sebelum memublikasikan, pertimbangkan data pada record jaringan dan tangkapan layar.
Mulai dari ekspektasi pertama yang tidak terpenuhi: request yang dikirim, responsnya, dan tampilan UI. Jangan langsung menulis ulang locator ketika backend tidak tersedia. Eksekusi ulang yang lulus berguna sebagai pengamatan, tetapi kegagalan awal tetap perlu diklasifikasikan.
Untuk skenario multipengguna, buat dua context terpisah dan beri label peran setiap peserta dalam laporan. Berkas storage state untuk mempercepat login tidak boleh mencampur akun atau mengungkap data sesi dalam artefak publik. Pastikan keadaan milik lingkungan yang diperlukan dan masih valid. Jika penyiapan autentikasi gagal, identifikasi tahap itu: puluhan kesalahan elemen area akun sesudahnya bukan defect antarmuka independen.
Kesalahan dan kesimpulan praktis
Masalah umum meliputi await yang hilang, akun bersama yang dapat diubah, force click tanpa penyelidikan, dan hanya memeriksa pesan. Edit pengujian hasil generator: generator membantu memulai tetapi tidak memilih risiko, data, atau kriteria sukses bagi tim.
Rangkaian Playwright andal menggabungkan isolasi, locator jelas, hasil bisnis eksplisit, dan artefak berguna. Kemudahan memulai alat ini bernilai ketika tim mengelola keadaan server dan batas cakupan dengan perhatian setara.
Bacaan lanjutan
- →Playwright: Instalasi
- →Playwright: Penantian otomatis
- →Playwright: Fixture pengujian
- →Playwright: Trace Viewer
Latihan lokal yang dapat direproduksi
Proyek latihan mengunci @playwright/test 1.59.1 dengan lockfile dan menggunakan fixture Python lokal. Tujuh kasus Chromium menguji formulir nickname dengan input kosong, pendek, batas, terlalu panjang, spasi, dan Unicode. Setiap kasus memiliki halaman sendiri dan menyatakan hasil yang diharapkan. Tidak ada akun eksternal atau situs produksi yang terlibat.
npm ci
npx playwright install chromium
npm test
# If a test fails and produces a trace:
npx playwright show-trace test-results/<case-directory>/trace.zipKonfigurasi memulai server lokal dan menyimpan trace saat gagal. Locator menggunakan label kolom dan role tombol agar pengujian menyampaikan maksud pengguna. Asersi diulang hingga kondisi terpenuhi atau timeout; sleep sembarangan tidak diperlukan untuk formulir sinkron ini.
await page.goto("/demo.html");
await page.getByLabel("Nickname").fill("ab");
await page.getByRole("button", { name: "Validate" }).click();
await expect(page.getByRole("alert")).toHaveText("Use 3–12 ASCII letters.");
await expect(page.getByLabel("Nickname")).toBeFocused();Untuk latihan kegagalan disengaja, ubah teks kesalahan yang diharapkan pada satu pengujian lokal, jalankan hanya pengujian itu, periksa trace tersimpan, lalu pulihkan asersinya. Pengujian lulus membuktikan fixture memenuhi pemeriksaan tersebut; bukan membuktikan produk nyata aksesibel atau diuji menyeluruh. Tambahkan alur nyata dan asersi backend saat mengadaptasi contoh.