Playwright Academy
0 dari 17
Fase 1 · FondasiModul 1 dari 17

Pengantar Automation

Kenapa perusahaan butuh test otomatis, dan kapan sebaiknya (atau tidak perlu) diotomasi.

Automation testing membuat pengecekan rutin berjalan sendiri, supaya waktumu dipakai untuk mencari bug yang belum terpikirkan.

Di dunia QA

Ingat regression test sebelum rilis: test case yang sama dijalankan ulang di setiap build. Automation testing adalah test case itu, ditulis sekali sebagai kode, lalu komputer yang menjalankannya setiap kali dibutuhkan.

Apa itu automation testing?

Automation testing adalah program kecil yang menjalankan langkah di aplikasi, lalu mengecek hasilnya. Contoh: 40 skenario di 3 browser berarti 120 pengecekan manual setiap rilis. Test otomatis menjalankannya dalam beberapa menit.

Setiap test punya tiga langkah:

1. Siapkan kondisi
buka halaman login
2. Lakukan aksi
isi username & password, klik Masuk
3. Periksa hasil
apakah muncul "Halo, Rina Wulandari"?

Langkah ketiga yang paling penting. Script yang hanya mengklik tanpa mengecek hasil belum bisa disebut test. Pengecekan ini disebut assertion, dibahas di Modul 6.

Di dunia QA

Tiga langkah ini sama dengan isi test case yang biasa kamu tulis: precondition, test steps, dan expected result. Assertion adalah expected result yang dicek oleh komputer.

Manual vs automation: satu tim

Manual testingAutomation testing
KecepatanLambat kalau diulangCepat, bisa jalan paralel
KetelitianBisa lupa atau salah langkahSelalu sama persis
Biaya di awalKecilBesar, karena menulis kode
Biaya jangka panjangBertambah setiap rilisMakin hemat, sekali tulis dipakai berkali-kali
Menemukan bug baruJago, memakai intuisiKurang, hanya mengecek yang ditulis
Menilai tampilan dan kenyamananHanya manusiaTidak bisa
Mengecek fitur lama masih amanMembosankanPaling cocok

Automation tidak menggantikan QA manual. Automation mengambil pekerjaan yang berulang, supaya kamu punya waktu untuk mencari celah dan menilai risiko.

Test pyramid: test ditaruh di mana?

UI / End-to-Endsedikit, lambat, paling mirip pengguna
API / Integrationsedang, cepat, stabil
Unit testbanyak, sangat cepat, ditulis developer
  • Unit test mengecek potongan kecil kode. Biasanya ditulis developer.
  • API test mengecek jalur data antara tampilan dan server. Cepat dan stabil, dibahas di Modul 13.
  • UI atau End-to-End (E2E) test membuka browser sungguhan dan bertindak seperti pengguna. Di sinilah Playwright paling berguna.

Test E2E paling lambat dan paling mudah gagal tanpa sebab yang jelas. Pakai untuk alur yang benar-benar penting, sisanya lewat API test.

Kapan sebaiknya diotomasi?

Cocok diotomasiLebih baik manual
Pengecekan rutin setiap rilisFitur yang tampilannya masih berubah setiap hari
Alur penting: login, pembayaran, checkoutMencari celah dengan mencoba-coba (exploratory testing)
Skenario dengan banyak kombinasi dataMenilai tampilan dan kenyamanan
Pengecekan di banyak browser atau perangkatTest sekali pakai yang tidak akan diulang
Cek cepat setelah rilis (smoke test)Skenario yang butuh CAPTCHA atau OTP dari HP

Hitungannya sederhana. Satu skenario manual butuh 5 menit, di 3 browser, 4 rilis sebulan: total 60 menit per bulan. Menulis test-nya sekitar 2 jam, jadi balik modal dalam 2 bulan.

Cara berpikir automation engineer

  1. Test juga kode. Harus rapi, mudah dibaca, dan ikut direview.
  2. Setiap test berdiri sendiri. Dijalankan sendirian atau dalam urutan apa pun, hasilnya sama.
  3. Test yang gagal memberi petunjuk. Pesannya menyebut yang diharapkan (expected) dan yang terjadi (actual).
  4. Hindari test flaky. Test yang kadang lulus kadang gagal tanpa perubahan membuat tim berhenti percaya.
  5. Curigai test yang tidak pernah gagal. Rusak aplikasinya dengan sengaja. Kalau test tetap hijau, test itu tidak mengecek apa pun.

Contoh test yang nanti kamu tulis

Belum perlu paham semua barisnya, setelah Fase 2 kamu bisa menulisnya sendiri. Ganti bahasa di pojok kanan atas untuk melihat versi lainnya.

def test_login_berhasil(page):  # satu test case, page = tab browser
    # 1. Siapkan: buka halaman login
    page.goto("/login-toko.html")
    # 2. Aksi: isi form lalu klik Masuk
    page.get_by_label("Username").fill("customer")  # isi kolom Username
    page.get_by_label("Password").fill("rahasia123")  # isi kolom Password
    page.get_by_role("button", name="Masuk").click()  # klik tombol Masuk
    # 3. Periksa: sapaan harus menyebut nama customer
    expect(page.get_by_test_id("greeting")).to_have_text("Halo, Rina Wulandari")
test('login berhasil', async ({ page }) => { // satu test case, page = tab browser
  // 1. Siapkan: buka halaman login
  await page.goto('/login-toko.html');
  // 2. Aksi: isi form lalu klik Masuk
  await page.getByLabel('Username').fill('customer'); // isi kolom Username
  await page.getByLabel('Password').fill('rahasia123'); // isi kolom Password
  await page.getByRole('button', { name: 'Masuk' }).click(); // klik tombol Masuk
  // 3. Periksa: sapaan harus menyebut nama customer
  await expect(page.getByTestId('greeting')).toHaveText('Halo, Rina Wulandari');
});

Komentar 1, 2, dan 3 menandai tiga langkah tadi: siapkan, aksi, periksa.

Arti setiap baris
def test_login_berhasil(page):
Satu test case. Nama fungsi diawali test_ supaya pytest menemukannya, dan page adalah tab browser yang disiapkan otomatis.
page.goto("/login-toko.html")
Precondition: membuka halaman login TokoQA.
page.get_by_label("Username").fill("customer")
Mencari kolom berlabel Username, lalu mengetik customer di dalamnya.
page.get_by_role("button", name="Masuk").click()
Mencari tombol bertuliskan Masuk, lalu mengkliknya.
expect(...).to_have_text("Halo, Rina Wulandari")
Expected result: elemen sapaan harus berisi teks itu. Kalau berbeda, test gagal dan menyebut teks yang muncul.
Arti setiap baris
test('login berhasil', async ({ page }) => {
Satu test case dengan nama yang mudah dibaca. page adalah tab browser yang disiapkan otomatis.
await page.goto('/login-toko.html')
Precondition: membuka halaman login TokoQA. await artinya tunggu sampai selesai.
page.getByLabel('Username').fill('customer')
Mencari kolom berlabel Username, lalu mengetik customer di dalamnya.
page.getByRole('button', { name: 'Masuk' }).click()
Mencari tombol bertuliskan Masuk, lalu mengkliknya.
expect(...).toHaveText('Halo, Rina Wulandari')
Expected result: elemen sapaan harus berisi teks itu. Kalau berbeda, test gagal dan menyebut teks yang muncul.
Lebih jauh (opsional)Trik komunitas
  • Testing Trophy. Banyak tim frontend memakai model "piala": lebih banyak integration test dan pengecekan otomatis di kode (TypeScript, linter), dengan sedikit test E2E. Pesannya sama: E2E sedikit saja, untuk alur paling penting.
  • Mulai dari yang paling berisiko. Urutkan skenario berdasarkan seberapa parah kalau rusak dan seberapa sering rusak. Login dan pembayaran biasanya juara pertama.
  • Minta data-testid sejak awal. Ajak developer memberi label khusus test di elemen penting sejak fitur dibuat. Aplikasi di Playground sudah memakai data-testid, jadi kamu bisa melihat contohnya.
  • Tulis skenarionya dalam kalimat biasa dulu, misalnya pola Given, When, Then (diberikan, ketika, maka). Kalimat seperti ini juga mudah diberikan ke AI agent di Modul 16.

Latihan

Belum ada kode di modul ini. Latihannya mencoba aplikasi seperti pengguna, karena automation selalu dimulai dari paham aplikasinya.

Latihan 1

Jadi customer TokoQA selama 10 menit

Brief: sebelum menulis test, coba alur belanja TokoQA dari awal sampai akhir.

  1. Buka TokoQA, lalu login sebagai customer / rahasia123.
  2. Ketik mouse di kolom pencarian. Berapa produk yang tersisa?
  3. Kosongkan pencarian, lalu pilih kategori Furnitur. Produk apa saja yang muncul?
  4. Masukkan 2 produk ke keranjang, checkout, lalu bayar sampai nomor pesanan muncul.
  5. Buka Pesanan saya. Apa status pesananmu?

Hasilkamu punya nomor pesanan berawalan TQA- dan tahu statusnya

Latihan 2

Bandingkan peran customer dan admin

Brief: TokoQA punya dua peran, dan test untuk masing-masing peran berbeda.

  1. Buka menu profil (nama di kanan atas), tekan Keluar, lalu login sebagai admin / admin123. Kamu dibawa ke halaman apa?
  2. Cari pesananmu dari latihan sebelumnya, lalu ubah statusnya menjadi Dikirim.
  3. Keluar, login lagi sebagai customer, lalu buka Pesanan saya.
  4. Terakhir, coba login dengan akun terkunci / rahasia123.

Hasilcustomer melihat status pesanannya berubah menjadi Dikirim

Latihan 3

Pilih skenario yang layak diotomasi

Tulis 5 skenario dari aplikasi tadi. Tandai masing-masing otomasi atau manual, lalu beri alasan dalam satu kalimat.

Hasiltabel 5 baris berisi keputusan dan alasannya