Playwright Academy
0 dari 17
Fase 4 · Level ProModul 14 dari 17

Git

Menyimpan riwayat kode, branch, pull request, dan menyelesaikan merge conflict.

Git menyimpan riwayat perubahan kode. Test-mu disimpan, di-review tim, dan dijalankan CI dari repository Git.

Di dunia QA

Git seperti riwayat versi dokumen test case di Google Docs, tapi lebih rapi: setiap perubahan punya pesan, bisa dibandingkan, dan bisa dikembalikan kalau keliru.

Istilah Git dalam 1 menit

IstilahArtinya
Repository (repo)Folder project beserta seluruh riwayat perubahannya
CommitSatu titik simpan, lengkap dengan catatan apa yang berubah
Staging areaPerubahan yang akan masuk ke commit berikutnya
BranchJalur kerja terpisah untuk mencoba hal baru
MergeMenggabungkan isi branch ke branch lain
Remote (GitHub)Salinan repo di internet, untuk berbagi dengan tim
Pull Request (PR)Permintaan "tolong cek dan gabungkan branch-ku, ya"

Pengaturan awal (cukup sekali)

bash 
git config --global user.name "Nama Kamu"  # nama yang tercatat di setiap commit
git config --global user.email "kamu@contoh.com"  # email yang tercatat di setiap commit
git config --global init.defaultBranch main  # nama branch pertama: main

Alur harian

bash 
# Mulai repo baru di folder project (project dari uv init sudah jadi repo Git, jadi aman diulang)
cd playwright-python   # atau: cd playwright-typescript
git init  # jadikan folder ini repository Git

# Lihat apa yang berubah (perintah yang paling sering kamu ketik!)
git status

# Masukkan perubahan ke staging, lalu save
git add tests/academy/test_m10_pom.py
git commit -m "test: tambah test login dengan page object"  # simpan perubahan dengan pesan yang jelas

# Lihat riwayat
git log --oneline
Jangan sampai ikut ter-commit

Catat di .gitignore: .env, auth.json, node_modules/, .venv/, test-results/, playwright-report/. uv init dan npm init playwright sudah membuat file ini, tapi .env belum ada di dalamnya. Isi minimalnya:

# Python
.venv/
__pycache__/
.pytest_cache/

# Node
node_modules/

# Playwright artefacts
test-results/
playwright-report/
output/

# Rahasia
.env
auth.json
playwright/.auth/
Terlanjur commit password?

Menghapus file-nya di commit berikutnya belum cukup, karena password-nya masih tersimpan di riwayat. Segera ganti password atau token itu dulu, baru bersihkan riwayatnya.

Branch dan Pull Request: cara kerja bareng tim

bash 
# 1. Ambil kode terbaru dari main
git switch main
git pull  # ambil perubahan terbaru dari GitHub

# 2. Buat branch untuk pekerjaanmu
git switch -c test/checkout-validation

# 3. Kerjakan, commit sesering perlu
git add .
git commit -m "test: validasi form checkout dari data JSON"  # simpan perubahan

# 4. Kirim branch ke GitHub
git push -u origin test/checkout-validation

# 5. Buka GitHub → "Compare & pull request" → minta review → merge

Awali pesan commit dengan test: (test), fix: (perbaikan), refactor: (merapikan), chore: (konfigurasi, dependency), atau ci: (pipeline). Contoh: fix: perbaiki locator tombol checkout setelah redesign.

Merge conflict

Conflict terjadi kalau dua orang mengubah baris yang sama di file yang sama. Misalnya kamu dan Budi sama-sama mengubah locator tombol login:

<<<<<<< HEAD
        self.submit_button = page.get_by_role("button", name="Masuk")
=======
        self.submit_button = page.get_by_test_id("login-button")
>>>>>>> test/budi-login
<<<<<<< HEAD
    this.submitButton = page.getByRole('button', { name: 'Masuk' });
=======
    this.submitButton = page.getByTestId('login-button');
>>>>>>> test/budi-login

Cara membacanya:

  • Di antara <<<<<<< HEAD dan ======= → versi kamu (branch yang sedang kamu pakai).
  • Di antara ======= dan >>>>>>> → versi yang mau digabungkan.

Cara menyelesaikannya:

  1. Sepakati versi yang benar (di contoh ini, get_by_role lebih dianjurkan, Modul 4).
  2. Edit file-nya: sisakan kode yang benar, lalu hapus semua tanda <<<<<<<, =======, >>>>>>>.
  3. Jalankan test untuk memastikan semuanya masih hijau.
  4. git add <file> lalu git commit (atau git merge --continue).

VS Code menampilkan tombol Accept Current / Accept Incoming / Accept Both di atas blok conflict, dan punya Merge Editor 3 panel.

Kebiasaan Git yang baik untuk QA

  • Commit kecil tapi sering, satu commit untuk satu tujuan.
  • Biasakan git pull sebelum mulai bekerja.
  • Jalankan test sebelum push, supaya error sepele tidak baru ketahuan di CI.
  • Ikut membaca PR dari developer. QA yang tahu bagian mana yang diubah bisa menebak area mana yang rawan.
Lebih jauh (opsional)Trik komunitas
  • Conventional Commits (test:, fix:, ci:) membuat riwayat gampang dibaca, dan bisa dipakai untuk membuat catatan perubahan (changelog) secara otomatis.
  • Pre-commit hook: linter otomatis jalan setiap kali kamu commit. Python: pre-commit + ruff. TypeScript: husky + lint-staged.
  • GitHub CLI: gh pr create membuat Pull Request langsung dari terminal.
  • Branch protection: atur supaya CI wajib hijau dan minimal satu orang sudah review sebelum boleh merge ke main.
  • Perintah yang lebih baru: git switch untuk pindah branch dan git restore untuk membatalkan perubahan file. Lebih jelas daripada git checkout yang dipakai untuk dua hal sekaligus.

Latihan

Kerjakan di terminal VS Code, di folder project-mu (playwright-python atau playwright-typescript).

Latihan 1

Simpan pertamamu

  1. Jalankan git init, lalu git status.
  2. Pastikan .env, node_modules, dan .venv tidak muncul di daftar.
  3. Buat commit pertama dengan pesan chore: setup project playwright academy.

Hasilgit log menampilkan satu commit

Latihan 2

Branch, ubah, lalu gabungkan

  1. Buat branch test/latihan-git.
  2. Ubah satu test (misalnya ganti nama test-nya), lalu commit.
  3. Kembali ke main, lalu merge branch tadi.

Hasilperubahan dari branch ikut masuk ke main

Latihan 3

Bikin conflict, lalu selesaikan

  1. Di branch a, ubah satu baris locator. Commit.
  2. Kembali ke main, buat branch b, ubah baris yang sama dengan isi berbeda. Commit.
  3. Merge a ke b, lalu selesaikan conflict-nya.

Hasilmerge selesai, tanda conflict hilang, dan test tetap lulus