Cara menambahkan Playwright MCP ke Claude Code

4 menit baca.
Tags: AIClaude Code

Playwright MCP memberi Claude Code browser sungguhan: bisa membuka halaman, klik, isi form, membaca console, dan mengambil screenshot. Menambahkan Playwright MCP server ke Claude Code cukup satu command.

Command cepat

claude mcp add playwright npx @playwright/mcp@latest

Aliasnya playwright. Claude Code menjalankan server secara lokal lewat stdio dengan npx, jadi kamu butuh Node.js 18 atau lebih baru. Tidak perlu akun atau token.

Verifikasi setup

claude mcp list

Harusnya muncul:

playwright: npx @playwright/mcp@latest - ✓ Connected

"Connected" hanya berarti MCP server-nya sudah jalan. Browser baru dijalankan nanti, saat tool pertama dipanggil. Jadi tes dengan halaman sungguhan di dalam Claude Code:

Use playwright to open https://example.com and tell me the page title.

Kalau Claude menjawab "Example Domain", semuanya sudah jalan. Kalau tool call-nya gagal, baca bagian berikutnya.

Mengatasi "Chromium distribution 'chrome' is not found"

Di mesin yang belum ada Google Chrome, tool call pertama gagal dengan error ini:

Error: Chromium distribution 'chrome' is not found at /opt/google/chrome/chrome
Run "npx playwright install chrome"

Secara default, Playwright MCP menjalankan Google Chrome biasa, bukan build Chromium yang dibawa Playwright untuk testing. Server tetap terhubung tanpa Chrome, tapi semua tool browser gagal sampai Chrome ditemukan.

Ada dua jalan. Install Google Chrome seperti biasa, atau biarkan command dari error itu yang mengurusnya:

npx playwright install chrome

Atau pindah ke browser milik Playwright dengan --browser chromium. Dengan flag itu, server mencari build chrome-for-testing, yang kamu install lewat package MCP-nya:

npx @playwright/mcp@latest install-browser chrome-for-testing
claude mcp remove playwright
claude mcp add playwright -- npx @playwright/mcp@latest --browser chromium

Opsi kedua cocok untuk server Linux dan image CI yang tidak perlu install Chrome lengkap.

Kirim flag: taruh setelah --

Flag untuk server ditaruh setelah pemisah --:

claude mcp add playwright -- npx @playwright/mcp@latest --headless

Tanpa --, CLI Claude Code mencoba membaca --headless sebagai option miliknya sendiri. Dokumentasi Claude Code menjelaskan aturan yang sama untuk semua stdio server: semua yang ada setelah -- diteruskan ke server apa adanya.

Flag yang kemungkinan besar kamu pakai:

  • --headless menjalankan browser tanpa jendela. Default-nya headed. Pakai headless lewat SSH, di CI, atau kalau tidak perlu melihat browsernya.
  • --browser chromium|firefox|webkit|msedge memilih browser. Install browser yang sesuai dulu.
  • --isolated menyimpan profil browser di memory, jadi cookie dan login hilang saat sesi selesai.
  • --caps vision,pdf,devtools mengaktifkan grup tool tambahan yang default-nya mati.
  • --device "iPhone 15" mengemulasi device.

npx @playwright/mcp@latest --help menampilkan daftar lengkapnya.

Login tetap tersimpan antar sesi

Tanpa --isolated, Playwright MCP menyimpan profil browser permanen per workspace. Di Linux lokasinya ~/.cache/ms-playwright/mcp-{channel}-{workspace-hash}, di macOS ~/Library/Caches/ms-playwright/mcp-{channel}-{workspace-hash}.

Ini praktis kalau kamu login ke aplikasi sekali dan Claude tetap dalam kondisi login. Tapi artinya setiap sesi yang dibuka Claude juga bisa memakai cookie itu. Kalau kamu tes dengan akun production, pakai --isolated, atau hapus folder itu setelah selesai.

Masukkan .playwright-mcp/ ke gitignore

Snapshot halaman dan screenshot disimpan di folder .playwright-mcp/ di direktori tempat Claude Code berjalan. Tambahkan ke .gitignore sebelum ikut ter-commit:

echo ".playwright-mcp/" >> .gitignore

Atau pindahkan output-nya dengan --output-dir.

Kunci versinya per project

@latest mengunduh versi terbaru setiap kali server dijalankan. Untuk setup tim, tambahkan server dengan scope project dan versi tetap supaya semua orang menjalankan versi yang sama:

claude mcp add --scope project playwright -- npx @playwright/mcp@0.0.83 --headless

Command ini menulis ke .mcp.json di root repo, dan file itu boleh di-commit. Saat tulisan ini dibuat, 0.0.83 adalah rilis terbaru di npm. Cek dengan npm view @playwright/mcp version.

Hati-hati dengan package yang mirip

Hasil pencarian juga menampilkan @executeautomation/playwright-mcp-server. Itu project komunitas terpisah dengan nama tool dan flag sendiri. Semua command di atas untuk @playwright/mcp dari Microsoft. Kalau flag di sebuah panduan tidak cocok dengan yang muncul di --help, cek package mana yang dipakai panduan itu.

MCP atau Playwright CLI?

README Playwright MCP sendiri menyarankan bahwa coding agent mungkin lebih cocok memakai Playwright CLI dan skills, karena panggilan CLI tidak memuat schema tool dan accessibility tree yang besar ke context model. MCP cocok untuk sesi browser panjang di mana Claude perlu menyimpan state di banyak langkah, misalnya klik sepanjang alur checkout. Untuk "buka halaman ini dan bilang apa yang rusak", dua-duanya bisa.

Referensi

Setup MCP lain di blog ini: GitHub, Datadog, dan Context7.

Cek terakhir

Jalankan claude mcp add playwright npx @playwright/mcp@latest, lalu tes dengan halaman sungguhan, jangan cuma claude mcp list. Kalau tool call pertama tidak menemukan Chrome, install Chrome, atau pindah ke --browser chromium setelah install chrome-for-testing.

Related Posts