AI & MCP

# Windows: npx dibungkus `cmd /c` karena npx adalah script
claude mcp add playwright --scope user -- cmd /c npx -y @playwright/mcp@latest

# macOS dan Linux
claude mcp add playwright --scope user -- npx -y @playwright/mcp@latest

# Mengecek status
claude mcp list
claude mcp get playwright  # cek Playwright MCP sudah terdaftar

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

Pakai Playwright MCP. Buka https://playground.aminhamzah.com/login-toko.html,
login sebagai customer / rahasia123, lalu jelajahi halaman toko.

Buat daftar skenario test yang penting (positif dan negatif) untuk fitur
pencarian, filter kategori, keranjang, dan checkout. Untuk setiap skenario
tulis: judul, langkah singkat, hasil yang diharapkan, dan prioritas (P1/P2/P3).
Jangan menulis kode dulu.

Pakai Playwright MCP untuk menjelajahi bagian "5. Konten dinamis" di
https://playground.aminhamzah.com/arena.html, lalu tulis test pytest baru di
tests/academy/test_m16_ai_generated.py.

Aturan:
- Ikuti gaya test yang sudah ada di tests/academy (baca dulu 2 contoh).
- Locator prioritas get_by_role / get_by_label; hindari CSS dan XPath.
- Pola Arrange, Act, Assert; nama test menjelaskan perilaku.
- Pakai expect(), DILARANG time.sleep / wait_for_timeout.
- Setelah menulis, jalankan `uv run pytest tests/academy/test_m16_ai_generated.py`
  dan perbaiki sampai hijau. Tunjukkan hasil akhirnya.

Pakai Playwright MCP untuk menjelajahi bagian "5. Konten dinamis" di
https://playground.aminhamzah.com/arena.html, lalu tulis test baru di
tests/academy/m16-ai-generated.spec.ts.

Aturan:
- Ikuti gaya test yang sudah ada di tests/academy (baca dulu 2 contoh).
- Locator prioritas getByRole / getByLabel; hindari CSS dan XPath.
- Pola Arrange, Act, Assert; nama test menjelaskan perilaku.
- Pakai web-first assertion, DILARANG waitForTimeout.
- Setelah menulis, jalankan `npx playwright test m16-ai-generated --project=chromium`
  dan perbaiki sampai hijau. Tunjukkan hasil akhirnya.

from playwright.sync_api import Page, expect  # Page dan expect

ARENA = "/arena.html"  # halaman latihan interaksi


def test_muat_data_menampilkan_tiga_laporan(page: Page) -> None:  # nama test menjelaskan perilakunya
    page.goto(ARENA)  # buka Arena

    page.get_by_role("button", name="Muat data").click()  # data muncul 1,5 detik kemudian

    expect(page.get_by_role("status").filter(has_text="Data berhasil dimuat")).to_be_visible()  # pesan sukses terlihat
    expect(page.get_by_test_id("loaded-list").get_by_role("listitem")).to_have_text(  # isi daftar sesuai urutan
        ["Laporan Januari", "Laporan Februari", "Laporan Maret"]
    )

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

const ARENA = '/arena.html'; // halaman latihan interaksi

test('muat data menampilkan tiga laporan', async ({ page }) => { // nama test menjelaskan perilakunya
  await page.goto(ARENA);

  await page.getByRole('button', { name: 'Muat data' }).click(); // data muncul 1,5 detik kemudian

  await expect(page.getByRole('status').filter({ hasText: 'Data berhasil dimuat' })).toBeVisible(); // pesan sukses terlihat
  await expect(page.getByTestId('loaded-list').getByRole('listitem')).toHaveText([ // isi daftar sesuai urutan
    'Laporan Januari', 'Laporan Februari', 'Laporan Maret',
  ]);
});

Test `test_login_berhasil` di tests/academy/test_m10_pom.py gagal
setelah redesign. Ini pesan error-nya: <tempel error>.

Pakai Playwright MCP untuk membuka halaman login dan periksa struktur
terbarunya. Jelaskan PENYEBABNYA dulu, apakah bug aplikasi atau locator usang?
Kalau locator usang, perbaiki di page object (pages/login_page.py), BUKAN di test.
Jalankan ulang test dan tunjukkan diff-nya.

cd playwright-typescript  # masuk ke folder project
npx playwright init-agents --loop=claude  # pasang agent planner, generator, dan healer untuk Claude Code

playwright-typescript/
├─ .claude/agents/
│  ├─ playwright-test-planner.md     ← definisi agent untuk Claude Code
│  ├─ playwright-test-generator.md
│  └─ playwright-test-healer.md
├─ .mcp.json                         ← server MCP "playwright-test" (npx playwright run-test-mcp-server)
├─ specs/README.md                   ← tempat rencana test dalam Markdown
└─ tests/seed.spec.ts                ← "seed test": kondisi awal yang dipakai agent

Memuat tests/seed.spec.ts…

1. Pakai agent playwright-test-planner. Buat rencana test untuk fitur kupon di halaman
   checkout TokoQA: kupon valid, kupon kedaluwarsa, kupon tidak ada, dan kupon yang belum
   memenuhi minimal belanja. Simpan di specs/kupon.md.

2. Pakai agent playwright-test-generator. Ubah specs/kupon.md menjadi test di
   tests/academy/kupon.spec.ts. Ikuti gaya test yang sudah ada dan pakai page object di pages/.

3. Pakai agent playwright-test-healer. Jalankan tests/academy/kupon.spec.ts dan perbaiki
   test yang gagal. Jelaskan dulu penyebabnya sebelum mengubah kode.