Angular Academy · Pelajaran

Selector dan Pernyataan

Sasar elemen dan pastikan state sesuai harapan.

Selector dan Pernyataan adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 3 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.

Pemilih yang Baik Membuat Pengujian Stabil

cara Anda menemukan elemen menentukan seberapa tangguh pengujian Anda. Pemilih yang terikat pada kelas CSS atau struktur DOM rusak setiap kali desain ulang dilakukan. Locator semantis yang berorientasi pada pengguna tetap bertahan setelah refaktor karena mencerminkan hal yang benar-benar dilihat pengguna.

getByRole: Locator yang Diutamakan

getByRole menemukan elemen berdasarkan peran aksesibilitas dan nama yang dapat diakses. Ini adalah locator yang paling tangguh sekaligus berfungsi sebagai pemeriksaan aksesibilitas.

page.getByRole('button', { name: 'Submit' });
page.getByRole('heading', { name: 'Dashboard' });
page.getByRole('link', { name: 'Profile' });

getByLabel dan getByPlaceholder

Untuk bidang formulir, temukan elemen berdasarkan label terkait atau placeholder-nya, persis seperti cara pengguna mengenalinya.

page.getByLabel('Email address');
page.getByPlaceholder('Search products');

getByText dan getByTestId

getByText mencocokkan teks yang terlihat. Jika tidak ada referensi semantis, gunakan getByTestId sebagai pilihan cadangan. Locator ini membaca atribut data-testid yang Anda tambahkan secara sengaja.

page.getByText('Order confirmed');
page.getByTestId('cart-total'); // <span data-testid="cart-total">

Hindari Pemilih CSS yang Rapuh

Anda tetap dapat menggunakan page.locator('.css-selector'), tetapi jadikan ini pilihan terakhir. Nama kelas dan penumpukan elemen sering berubah; peran dan label jarang berubah.

// Fragile, avoid when possible:
page.locator('div.row > button.primary');

Pemeriksaan Berbasis Web

expect Playwright untuk locator bersifat berbasis web: secara otomatis mencoba ulang hingga kondisi terpenuhi atau batas waktu terlampaui. Inilah kunci pemeriksaan yang tidak mudah gagal.

await expect(page.getByText('Saved')).toBeVisible();
await expect(page.getByRole('button', { name: 'Save' })).toBeEnabled();

Pencocok Pemeriksaan Umum

Pencocok menjelaskan state yang diharapkan dari sebuah elemen atau halaman.

await expect(locator).toBeVisible();
await expect(locator).toHaveText('Hello');
await expect(locator).toHaveValue('ada@example.com');
await expect(locator).toHaveCount(3);
await expect(page).toHaveURL(/dashboard/);

Memeriksa Jumlah pada Daftar

Untuk memeriksa elemen berulang, temukan semuanya lalu periksa jumlahnya. Locator akan mencocokkan setiap elemen, dan toHaveCount akan mencoba ulang hingga hasilnya stabil.

const rows = page.getByRole('listitem');
await expect(rows).toHaveCount(5);
await expect(rows.first()).toContainText('First');

Pemeriksaan Negatif

Gunakan .not untuk memeriksa bahwa sesuatu tidak ada atau tersembunyi, misalnya setelah menghapus suatu item.

await page.getByRole('button', { name: 'Delete' }).click();
await expect(page.getByText('Item 1')).not.toBeVisible();

Memfilter dan Merangkai Locator

Persempit locator dengan filter atau rangkai locator untuk membatasi pencarian di dalam induk, sehingga pemeriksaan tetap akurat.

const card = page.getByRole('listitem').filter({ hasText: 'Pro plan' });
await expect(card.getByRole('button', { name: 'Choose' })).toBeVisible();

Mengapa Pemeriksaan Berbasis Web Lebih Baik daripada Pemantauan Manual

Pemeriksaan berbasis web mencoba ulang seluruh ekspresi, bukan hanya membaca ulang snapshot lama. Jadi, await expect(loc).toHaveText('Done') menunggu hingga teks muncul dan menghilangkan kondisi balapan yang sering terjadi pada penungguan yang ditulis manual.

Pemeriksaan Cepat

Pilih locator yang paling tangguh.

Ringkasan

Utamakan locator semantis: getByRole, getByLabel, dan getByText, dengan getByTestId sebagai pilihan cadangan. Gunakan pencocok berbasis web (toBeVisible, toHaveText, toHaveCount, toHaveURL) yang mencoba ulang secara otomatis, serta gunakan .not dan filter agar tetap akurat.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Selector dan Pernyataan” gratis?

Ya — teks lengkap “Selector dan Pernyataan” 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 “Selector dan Pernyataan”?

Sasar elemen dan pastikan state sesuai harapan. 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 3 dari 4.

Berapa lama pelajaran “Selector dan Pernyataan” 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