Cara menggunakan Playwright MCP dengan Claude Code: otomatisasi browser dan penyiapan proxy

Skrip scraping dan QA standar sering rusak begitu situs web memperbarui tata letaknya atau mengganti nama kelas CSS. Menghubungkan paket playwright-mcp ke Claude Code CLI menyelesaikan masalah itu. Melalui Model Context Protocol (MCP), browser mengirimkan peta teks halaman yang bersih langsung ke agen AI. Anda tidak perlu lagi mencari selector CSS secara manual atau mengirim tangkapan layar berukuran besar ke model visual. Insinyur QA, pengembang scraper, dan analis mengendalikan Chromium, Firefox, WebKit, dan Microsoft Edge langsung dari terminal sambil mengarahkan lalu lintas melalui proxy.

TL;DR: ringkasan singkat alur kerja Claude Playwright MCP

• Cara kerjanya: paket playwright-mcp mengirimkan snapshot aksesibilitas playwright mcp yang ringan (browser_snapshot) ke Claude Code sebagai pengganti gambar berukuran besar, sehingga penggunaan token berkurang hingga 80%.

• Pengaturan satu perintah: menjalankan claude mcp add playwright -- npx @playwright/mcp@latest mendaftarkan server playwright mcp resmi untuk satu folder, repositori tim bersama, atau secara global di seluruh komputer Anda.

• Isolasi profil: menggabungkan flag --isolated dengan file cookie --storage-state (atau folder --user-data-dir terpisah) memungkinkan Anda menjalankan beberapa jendela browser secara paralel tanpa error penguncian file.

• Perutean proxy: menambahkan --proxy-server dan HTTP_PROXY di dalam .mcp.json mengarahkan lalu lintas browser melalui proxy mobile LTE/5G, proxy residensial ISP statis, atau proxy residensial rotasi.

• Pengecekan IP sebelum peluncuran: sebelum menjalankan tugas, periksa reputasi IP Anda di pemeriksa Fraud Score bawaan dalam dasbor CyberYozh App Anda.

👉 Jelajahi katalog proxy CyberYozh App menurut negara dan jenis penyedia

Apa yang dilakukan Playwright MCP di dalam browser

Apa yang dilakukan playwright mcp secara berbeda dari alat browser lama? Agen AI visual generasi lama mengambil gambar layar penuh dan mengklik tombol berdasarkan perkiraan koordinat piksel X dan Y. Setiap kali banner promo muncul atau tata letak responsif bergeser, klik meleset.

Server playwright mcp resmi dari Microsoft (@playwright/mcp) membaca pohon aksesibilitas browser, bukan menangkap piksel. Memanggil browser_snapshot menghasilkan peta teks terstruktur dari setiap elemen interaktif di halaman. Setiap tombol, tautan, atau input mendapatkan tag referensi yang tepat - misalnya textbox "Search catalog" [ref=e5] atau button "Apply filter" [ref=e12]. Dengan snapshot aksesibilitas playwright mcp, Claude Code dapat meneruskan ref=e5 langsung ke browser_type atau browser_click tanpa menebak koordinat. Server ini juga memeriksa lalu lintas API di latar belakang (browser_network_requests), membaca log konsol (browser_console_messages), berpindah tab, serta mengekspor PDF atau tangkapan layar (browser_pdf_save, browser_take_screenshot).

Alur kerja ini menghubungkan tiga tahap pengumpulan data otomatis. Web scraping standar mengunduh kode HTML mentah, screen scraping membaca data visual yang dirender di browser setelah JavaScript dijalankan, dan parsing data mengekstrak kolom terstruktur ke CSV, Excel, atau JSON. Dengan playwright-mcp, agen membaca pohon DOM langsung setelah JavaScript selesai dirender dan segera mengekstrak data terstruktur.

👉 Jelajahi infrastruktur proxy untuk agen AI dan otomatisasi browser di CyberYozh App

Cara menggunakan Playwright MCP dengan Claude Code di terminal

Sebelum menguji cara menggunakan playwright mcp dengan Claude Code di situs web sungguhan, pastikan tiga prasyarat terpenuhi di komputer Anda: Node.js 18 atau lebih baru (disarankan Node.js 20+ LTS), Claude Code CLI yang sudah terautentikasi (@anthropic-ai/claude-code), dan kredensial proxy aktif untuk menghindari pembatasan laju.

Cara menambahkan Playwright MCP ke Claude Code: tiga mode pengaturan

Anda dapat menambahkan Playwright MCP ke Claude Code dengan satu perintah menggunakan flag --scope untuk menentukan tingkat konfigurasi: local (folder saat ini), project (repositori tim bersama), atau user (profil global). Pengaturan folder lokal selalu menimpa pengaturan proyek dan global.

Jalankan perintah di bawah ini untuk memeriksa versi yang terpasang, menyimpan biner Chromium ke cache, dan mendaftarkan server:

# 1. Check installed Node.js and Claude Code versions
node --version
claude --version

# 2. Pre-install the package and Chromium browser
npx @playwright/mcp@latest --version
npx playwright install chromium

# 3. Register the server (choose one of the three options)
# Option A: Only for the currently open folder
claude mcp add playwright -- npx @playwright/mcp@latest

# Option B: Globally for all your projects on this computer
claude mcp add playwright --scope user -- npx @playwright/mcp@latest

# Option C: Create a shared .mcp.json file in the project root for your team
claude mcp add playwright --scope project -- npx @playwright/mcp@latest

# 4. Verify the list of connected MCP servers
claude mcp list

Setelah menjalankan claude mcp add playwright, Anda juga dapat memasang build komunitas ExecuteAutomation (@executeautomation/playwright-mcp-server) untuk preset viewport di 143 model ponsel pintar dan desktop. Jika Anda ingin melakukan scraping situs web lewat Claude AI tanpa mengedit file konfigurasi secara manual, Yozh Scraper di GitHub kami yang open source mengarahkan lalu lintas melalui proxy CyberYozh App Anda secara otomatis.

👉 Sewa proxy mobile LTE/5G mulai dari $1.70/hari dengan trafik tanpa batas

Menyiapkan konfigurasi proxy Playwright MCP di .mcp.json

Ketika sesi claude playwright mcp memeriksa landing page iklan lokal, membandingkan harga regional, atau melakukan scraping katalog produk, permintaan beruntun dari satu IP rumah atau kantor memicu CAPTCHA. Menambahkan konfigurasi proxy playwright mcp di dalam .mcp.json (atau ~/.claude.json) mengarahkan lalu lintas browser melalui wilayah target Anda:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "-y",
        "@playwright/mcp@latest",
        "--browser",
        "chromium",
        "--isolated",
        "--proxy-server=http://proxy.cyberyozh.com:8080"
      ],
      "env": {
        "HTTP_PROXY": "http://username:password@proxy.cyberyozh.com:8080",
        "HTTPS_PROXY": "http://username:password@proxy.cyberyozh.com:8080",
        "PLAYWRIGHT_MCP_PING_TIMEOUT_MS": "15000"
      }
    }
  }
}

Catatan: alamat server (proxy.cyberyozh.com), port (8080), nama pengguna, dan kata sandi di atas hanyalah placeholder. Ganti dengan host, port, dan kredensial login dari kartu proxy Anda di dasbor CyberYozh App.

Cara mengelola profil browser, cookie, dan persistensi IP proxy

Agar profil tidak terkunci dan crash saat dijalankan paralel, serta untuk menghindari reset sesi yang tak terduga, pisahkan dua mekanisme berikut:

1. Tempat cookie dan sesi browser disimpan: secara default, playwright-mcp menyimpan cookie dan data situs di satu folder bersama pada disk. Membuka terminal Claude Code kedua pada folder yang sama menyebabkan error penguncian. Untuk menjalankan beberapa browser secara paralel, luncurkan profil terisolasi playwright mcp dengan flag --isolated (membuat profil bersih di memori) dan masukkan cookie login yang tersimpan melalui --storage-state=./auth.json. Jika Anda memerlukan profil permanen di disk sebagai pengganti profil terisolasi playwright mcp di memori, tetapkan folder khusus per proyek dengan --user-data-dir.

2. Cara IP proxy Anda tetap konsisten: cookie dan IP proxy bekerja secara independen. IP statis tidak akan memperbarui token cookie yang sudah kedaluwarsa, dan cookie yang tersimpan tidak akan mencegah logout jika IP eksternal Anda berubah di tengah proses checkout. Perhatikan juga keterbatasan Chromium: flag --proxy-server hanya menerima nama pengguna dan kata sandi melalui HTTP/HTTPS. Koneksi SOCKS5 langsung di Chromium hanya berfungsi dengan whitelist IP tanpa kata sandi di dasbor Anda, sedangkan SOCKS5 yang dilindungi kata sandi memerlukan proxifier lokal.

👉 Pilih proxy residensial rotasi mulai dari $4.00/GB dengan sticky session hingga 24 jam

Proxy CyberYozh App mana yang dipilih untuk playwright-mcp

Lini proxy yang tepat bergantung pada situs web target dan durasi sesi Anda. Platform CyberYozh App menawarkan empat opsi untuk otomatisasi browser:

• Proxy mobile LTE/4G/5G (mulai dari $1.70/hari dengan trafik tanpa batas): berjalan di modem fisik dan kartu SIM operator asli. Karena jaringan seluler memakai CGNAT, ratusan pelanggan ponsel pintar biasa berbagi satu IP operator. Filter anti-fraud dan mesin pencari seperti Google jauh lebih kecil kemungkinannya membatasi alamat tersebut saat scraping pencarian multi-thread atau pengecekan iklan. Paket privat memungkinkan Anda merotasi IP lewat tautan dasbor atau REST API, sedangkan paket bersama berotasi dengan timer 5 atau 30 menit. Mendukung HTTP/HTTPS, SOCKS5, UDP, konfigurasi VPN/VLESS, dan pergantian fingerprint OS TCP/IP. Karena menara seluler operator memperbarui masa sewa IP secara berkala di sisi mereka sendiri, sewa paket harian terlebih dahulu untuk menguji lama sesi pada proses berjam-jam.

• Proxy residensial ISP statis (mulai dari $5.29/bulan dengan trafik tanpa batas): menyediakan satu IP rumahan khusus dari penyedia layanan internet (ISP) asli selama seluruh periode sewa, dengan uptime 99.9% serta dukungan HTTP/HTTPS dan SOCKS5. Dirancang untuk sesi berminggu-minggu hingga berbulan-bulan di proyek klien dan merek, dasbor iklan, panel admin, dan toko online. Agensi mengikat satu proxy ISP statis ke folder profil browser khusus (--user-data-dir) per klien agar sesi dan cookie tidak pernah tercampur.

• Proxy residensial rotasi (mulai dari $4.00/GB, minimum 3 GB; turun hingga $2.50/GB pada 100 GB): memberi Anda akses ke 100 juta+ IP residensial di 195+ negara. Termasuk penargetan negara, negara bagian/wilayah, dan kota gratis, filter IP Lanjutan sebelum penetapan, uptime 99.9%, dan tingkat keberhasilan permintaan hingga 99.99%. Gunakan rotasi per permintaan untuk scraping katalog atau pertahankan satu IP hingga 24 jam dengan sticky session. Gigabyte yang tidak terpakai diteruskan ke bulan tagihan berikutnya, dan Mass Credentials Generator serta REST API mempermudah pengaturan dalam jumlah besar.

• Proxy datacenter (server) (mulai dari $1.77/bulan): menawarkan kanal IPv4/IPv6 khusus dan bersama dengan trafik tanpa batas pada paket khusus serta uptime 99.99% untuk scraping berkecepatan tinggi pada halaman publik, pemantauan uptime, dan pengujian API.

👉 Pilih proxy dengan trafik tanpa batas untuk web scraping dan otomatisasi browser

Memeriksa reputasi IP lewat Fraud Score dan mengatasi error umum

Sebelum menambahkan proxy ke konfigurasi playwright-mcp Anda, periksa IP-nya di pemeriksa risiko Fraud Score bawaan ($0.15 per pengecekan IP, atau $19.00/bulan untuk 1,500 pengecekan IP, 1,500 pengecekan nomor telepon, dan 500 pengecekan kartu bank - hemat hingga $600/bulan). Alat ini melakukan kueri ke IPQualityScore (IPQS), CyberSource, ThreatMetrix, Stripe Radar, PerimeterX, dan 118 blacklist OSINT, lalu menampilkan label ISP/ASN, skor risiko, dan status Abuse Velocity sebelum Anda meluncurkan browser.

Untuk menguji koneksi, jalankan klien dengan MCP_TIMEOUT=10000 claude agar npx punya cukup waktu mengunduh paket pada peluncuran pertama. Ketik /mcp di chat untuk memastikan playwright menampilkan status connected berwarna hijau. Pada prompt pertama, sebutkan alatnya secara eksplisit agar Claude membuka browser, bukan menulis kode skrip:

Gunakan Playwright MCP: buka https://app.cyberyozh.com/checkers/, baca struktur halaman, dan daftarkan pemeriksa yang tersedia untuk memverifikasi alamat IP, nomor telepon, dan kartu.

Jika pengujian otomatis Anda mencakup formulir registrasi SMS atau alur checkout, Anda dapat menyewa nomor telepon virtual untuk menerima SMS dan menerbitkan kartu virtual di dasbor CyberYozh App yang sama.

👉 Periksa reputasi IP dan Fraud Score sebelum meluncurkan browser

Memulai otomatisasi browser di Claude Code

Menggabungkan playwright-mcp dengan Claude Code memungkinkan Anda mengendalikan browser sungguhan lewat perintah teks biasa dari terminal: agen membuka halaman, menargetkan elemen melalui pohon aksesibilitas, dan mengekstrak data tanpa selector yang rapuh. Memadukan pengaturan itu dengan proxy mobile LTE/5G, ISP statis, atau residensial rotasi dari CyberYozh App menjaga pengujian regional, pengecekan etalase toko, dan scraping katalog Anda tetap stabil di lokasi mana pun.

👉 Sewa nomor telepon virtual untuk verifikasi SMS saat menguji alur registrasi