Cara Install Playwright MCP di OpenCode WSL dengan Chrome di Windows 11

Kalau sekarang kita menggunakan AI coding agent seperti OpenCode untuk membuat aplikasi, kemampuan AI tidak lagi sebatas menulis kode.

AI agent sudah bisa membaca project, mengubah file, menjalankan command, membaca error, menjalankan test, dan memperbaiki implementasi.

Tetapi ada satu bagian yang sering menjadi masalah.

AI bisa membuat halaman web dengan kode yang terlihat benar, tetapi apakah halaman tersebut benar benar bekerja ketika dibuka di browser?

Di sinilah Playwright MCP menjadi menarik.

Dengan Playwright MCP, OpenCode dapat berinteraksi langsung dengan browser. AI agent dapat membuka website, membaca halaman, mengklik tombol, mengisi form, mengambil screenshot, memeriksa hasil navigasi, dan melakukan berbagai pengujian melalui Playwright.

Pada tutorial ini saya menggunakan setup berikut

1Windows 11
2    ├── Google Chrome
3    ├── Node.js
4    ├── npm dan npx
5    └── Playwright MCP
6
7WSL Debian
8    ├── OpenCode
9    └── source code project

OpenCode tetap berjalan di WSL, sementara Playwright MCP dan browser berjalan di Windows.

Alurnya kurang lebih seperti ini

 1OpenCode di WSL
 2       │
 3       ▼
 4powershell.exe
 5       │
 6       ▼
 7npx
 8       │
 9       ▼
10@playwright/mcp
11       │
12       ▼
13Playwright
14       │
15       ▼
16Google Chrome di Windows

Setup seperti ini cukup nyaman untuk workflow development karena WSL tetap menjadi tempat kita bekerja dengan source code, sedangkan browser tetap menggunakan environment Windows.

Apa itu Playwright MCP

Playwright adalah framework automation browser yang dikembangkan oleh Microsoft.

Playwright dapat digunakan untuk mengotomatisasi browser seperti Chrome, Firefox, WebKit, dan Microsoft Edge.

Sementara MCP atau Model Context Protocol adalah mekanisme yang memungkinkan aplikasi AI menggunakan tool eksternal.

Playwright MCP menggabungkan keduanya.

Dengan Playwright MCP, AI coding agent seperti OpenCode dapat menggunakan Playwright sebagai tool untuk berinteraksi dengan browser.

Package Playwright MCP yang digunakan saat ini adalah

1@playwright/mcp

Playwright menyediakan dokumentasi resmi untuk menjalankan MCP menggunakan

1npx @playwright/mcp@latest

Jadi jika menemukan tutorial lama yang menggunakan

1@modelcontextprotocol/server-playwright

jangan langsung mengikuti tutorial tersebut.

Untuk setup baru, gunakan package

1@playwright/mcp

Kenapa Playwright MCP menarik untuk vibe coding

Vibe coding biasanya berarti kita bekerja dengan AI secara iteratif.

Kita memberikan tujuan, AI membuat implementasi, kita melihat hasilnya, kemudian memberikan feedback dan AI memperbaikinya.

Masalahnya, feedback sering kali masih harus kita berikan secara manual.

Misalnya kita meminta AI membuat halaman login.

AI kemudian membuat

1login.blade.php
2app.css
3login.js

Secara kode semuanya terlihat benar.

Tetapi ketika dibuka di browser ternyata

1Tombol terlalu kecil
2Form tidak responsive
3Dropdown tidak bisa dibuka
4Modal tertutup ketika diklik
5Validasi tidak muncul
6Layout rusak di mobile
7Sidebar menutupi konten
8Navigasi tidak bekerja

Tanpa browser automation, AI hanya melihat kode dan hasil command.

Dengan Playwright MCP, AI bisa melihat apa yang terjadi di browser.

Di sinilah workflow vibe coding menjadi jauh lebih menarik.

Apa yang bisa dilakukan Playwright ketika vibe coding

Playwright MCP dapat membantu AI melakukan berbagai pekerjaan browser secara langsung.

Beberapa contoh yang sangat berguna adalah sebagai berikut.

Membuka website

AI dapat membuka URL tertentu.

Contohnya

1Buka http://localhost:8000

Kemudian AI dapat membaca halaman tersebut dan melanjutkan pekerjaan berdasarkan kondisi aktual halaman.

Membaca struktur halaman

AI dapat melihat elemen yang tersedia pada halaman.

Misalnya terdapat

1Dashboard
2Users
3Products
4Settings
5Logout

AI dapat mengetahui bahwa tombol atau link tersebut benar benar ada.

Hal ini lebih berguna daripada hanya membaca source code karena yang diperiksa adalah halaman yang sedang dirender browser.

Mengklik tombol

AI dapat melakukan klik.

Misalnya

1Klik tombol Tambah Produk

Kemudian AI dapat memeriksa apakah modal atau halaman berikutnya benar benar muncul.

Mengisi form

AI dapat mengisi form seperti

1Nama produk
2Harga
3Stok
4Kategori
5Deskripsi

Contohnya

1Isi nama produk dengan Kaos Polos
2Isi harga dengan 50000
3Isi stok dengan 100

Kemudian AI dapat melanjutkan ke langkah berikutnya.

Menguji validasi form

Ini salah satu kegunaan yang sangat menarik.

AI dapat sengaja memberikan input yang salah.

Misalnya

1Biarkan email kosong lalu submit form

Kemudian AI dapat melihat apakah validasi muncul.

Contoh lainnya

1Masukkan password yang terlalu pendek

atau

1Masukkan harga dengan format yang salah

Dengan demikian AI tidak hanya membuat form, tetapi juga dapat membantu menguji perilakunya.

Menguji login

AI dapat melakukan workflow seperti

1Buka halaman login
2Masukkan email
3Masukkan password
4Klik Login
5Periksa apakah berhasil masuk ke dashboard

Untuk aplikasi yang sedang kita kembangkan, ini sangat membantu.

Misalnya kita baru saja mengubah authentication.

Daripada kita membuka browser secara manual setiap kali, AI dapat menjalankan alur tersebut menggunakan Playwright.

Playwright MCP untuk testing setelah coding

Ini mungkin bagian yang paling berguna ketika melakukan vibe coding.

Misalnya kita meminta OpenCode

1Implementasikan fitur CRUD produk.
2Setelah selesai gunakan Playwright untuk menguji workflow CRUD tersebut.

AI dapat bekerja kurang lebih seperti ini

 1Baca project
 2   ↓
 3Implementasi fitur
 4   ↓
 5Jalankan migration
 6   ↓
 7Jalankan aplikasi
 8   ↓
 9Buka browser
10   ↓
11Buka halaman produk
12   ↓
13Tambah produk
14   ↓
15Periksa hasil
16   ↓
17Edit produk
18   ↓
19Periksa hasil
20   ↓
21Hapus produk
22   ↓
23Periksa hasil

Ini jauh lebih dekat dengan cara manusia melakukan testing aplikasi.

Playwright dapat membantu menemukan masalah UI

AI coding agent biasanya sangat bagus dalam membaca source code.

Namun masalah UI sering kali baru terlihat setelah browser melakukan rendering.

Misalnya source code memiliki

1<button class="btn">
2    Simpan
3</button>

Tetapi CSS menyebabkan tombol tersebut berada di belakang elemen lain.

Source code terlihat baik.

Browser menunjukkan masalah.

Dengan Playwright, AI dapat melakukan pemeriksaan terhadap halaman yang sudah dirender.

Workflow seperti ini sangat cocok untuk frontend development.

Membantu responsive testing

Kita juga dapat meminta AI menguji halaman pada ukuran viewport tertentu.

Misalnya

1Uji halaman dashboard pada viewport mobile.
2Periksa apakah ada elemen yang keluar dari layar.

Kemudian

1Periksa halaman yang sama pada viewport desktop.

Ini sangat berguna ketika membangun aplikasi mobile first atau PWA.

Mengambil screenshot

Playwright dapat mengambil screenshot halaman.

Misalnya

1Buka dashboard kemudian ambil screenshot.

Screenshot tersebut dapat membantu ketika kita ingin melihat hasil visual dari implementasi.

Workflow yang menarik adalah

 1AI membuat UI
 2       ↓
 3Playwright membuka halaman
 4       ↓
 5Screenshot
 6       ↓
 7AI melihat hasil
 8       ↓
 9AI memperbaiki UI
10       ↓
11Screenshot lagi

Inilah salah satu alasan Playwright sangat cocok dipadukan dengan AI coding agent.

Menguji navigasi

AI dapat memeriksa apakah link dan navigasi bekerja.

Contohnya

 1Buka dashboard.
 2
 3Klik menu Customers.
 4
 5Pastikan halaman customers terbuka.
 6
 7Kemudian kembali ke dashboard.
 8
 9Buka menu Products.
10
11Pastikan halaman products terbuka.

Hal seperti ini sangat mudah dilakukan secara manual, tetapi menjadi jauh lebih menarik ketika AI dapat melakukannya sendiri setelah perubahan kode.

Menguji workflow pengguna

Playwright tidak hanya berguna untuk menguji satu tombol.

Ia dapat digunakan untuk menguji workflow lengkap.

Contohnya pada aplikasi kasir

 1Login
 2   ↓
 3Buka produk
 4   ↓
 5Cari produk
 6   ↓
 7Tambahkan ke cart
 8   ↓
 9Ubah jumlah
10   ↓
11Checkout
12   ↓
13Pilih metode pembayaran
14   ↓
15Selesaikan transaksi
16   ↓
17Periksa invoice

Atau pada aplikasi sekolah

 1Login admin
 2   ↓
 3Buka data siswa
 4   ↓
 5Tambah siswa
 6   ↓
 7Isi biodata
 8   ↓
 9Simpan
10   ↓
11Cari siswa
12   ↓
13Edit siswa
14   ↓
15Periksa hasil

AI dapat membantu menjalankan workflow tersebut menggunakan browser.

Persiapan

Tutorial ini menggunakan

1Windows 11
2WSL Debian
3OpenCode
4Google Chrome
5Node.js
6npm
7npx
8Playwright
9Playwright MCP

Pastikan WSL sudah berjalan.

Masuk ke Debian

1wsl

Kemudian periksa distro

1cat /etc/os-release

Pastikan OpenCode sudah terinstall di WSL

Dari terminal Debian

1opencode --version

Jika menghasilkan versi OpenCode berarti OpenCode sudah siap digunakan.

Pada tutorial ini OpenCode dijalankan sepenuhnya dari WSL.

Pastikan Google Chrome sudah terinstall di Windows

Browser yang digunakan dalam tutorial ini adalah Google Chrome.

Pastikan Chrome sudah terinstall di Windows 11.

Cara paling mudah adalah membuka Chrome dari Start Menu Windows.

Anda juga dapat memeriksa instalasi Chrome dari PowerShell.

1where.exe chrome

Jika command tersebut tidak menemukan Chrome, itu belum tentu berarti Chrome tidak terinstall karena lokasi instalasi Chrome dapat berbeda.

Yang paling penting adalah Chrome dapat dibuka secara normal dari Windows.

Download dan install Chrome terlebih dahulu jika belum tersedia.

Install Node.js di Windows

Ini penting.

Node.js yang digunakan untuk menjalankan Playwright MCP berada di Windows.

Jadi kita membutuhkan Node.js di Windows, bukan hanya Node.js di WSL.

Buka PowerShell sebagai user biasa.

Periksa apakah Node.js sudah tersedia

1node --version

Kemudian

1npm --version

Jika belum terinstall, cara sederhana pada Windows 11 adalah menggunakan Winget.

Jalankan

1winget install nodejs

Tunggu sampai proses instalasi selesai.

Setelah itu tutup PowerShell dan buka PowerShell baru.

Kemudian periksa

1node --version

dan

1npm --version

Pastikan keduanya sudah menghasilkan versi.

Periksa juga

1npx --version

Jika ketiga command tersebut berhasil, environment Node.js Windows sudah siap.

Mengapa Node.js harus ada di Windows

Pada tutorial ini OpenCode berada di WSL.

Namun kita ingin Playwright MCP berjalan di Windows.

Karena itu kita menggunakan Windows Node.js.

Alurnya adalah

 1OpenCode
 2   │
 3   ▼
 4WSL
 5   │
 6   ▼
 7powershell.exe
 8   │
 9   ▼
10Windows Node.js
11   │
12   ▼
13npx
14   │
15   ▼
16Playwright MCP

Jadi jangan bingung jika Node.js ada di Windows sementara OpenCode ada di Linux.

Memang itu desain setup kita.

Periksa npx dari WSL

Sekarang masuk ke Debian WSL.

Kita perlu memastikan WSL dapat memanggil PowerShell Windows.

Jalankan

1powershell.exe -NoProfile -Command "node --version"

Jika berhasil, akan muncul versi Node.js Windows.

Kemudian

1powershell.exe -NoProfile -Command "npm --version"

dan

1powershell.exe -NoProfile -Command "npx --version"

Jika semuanya berhasil, koneksi antara WSL dan Node.js Windows sudah berfungsi.

Install Playwright

Dari PowerShell Windows jalankan

1npx playwright install

Perintah tersebut akan menyiapkan browser yang diperlukan oleh Playwright.

Periksa versi Playwright

1npx playwright --version

Install Playwright MCP

Kita tidak perlu melakukan instalasi global.

Playwright MCP dapat dijalankan menggunakan npx.

Command yang digunakan

1npx -y @playwright/mcp@latest

Option -y membuat npx tidak meminta konfirmasi ketika package perlu diunduh.

Karena package MCP akan dipanggil dari OpenCode, kita tidak perlu menjalankan command tersebut secara manual setiap kali.

OpenCode yang akan menjalankannya.

Lokasi konfigurasi OpenCode

Konfigurasi global OpenCode berada di

1~/.opencode/config.json

Pada WSL Debian misalnya

1/home/USER WSL/.opencode/config.json

Dari Windows Explorer, file tersebut dapat diakses melalui

1\\wsl.localhost\Debian\home\USER WSL\.opencode\config.json

Nama username tentu menyesuaikan username WSL masing masing.

Konfigurasi Playwright MCP

Masukkan konfigurasi MCP Playwright ke dalam config.json.

Untuk konfigurasi OpenCode yang menggunakan struktur mcp.servers, contohnya

 1{
 2  "$schema": "https://opencode.ai/config.json",
 3  "mcp": {
 4    "servers": {
 5      "playwright": {
 6        "type": "local",
 7        "command": [
 8          "powershell.exe",
 9          "-NoProfile",
10          "-Command",
11          "npx -y @playwright/mcp@latest"
12        ],
13        "disabled": false
14      }
15    }
16  }
17}

Bagian paling penting adalah

1"command": [
2  "powershell.exe",
3  "-NoProfile",
4  "-Command",
5  "npx -y @playwright/mcp@latest"
6]

Artinya OpenCode meminta WSL menjalankan PowerShell Windows.

PowerShell kemudian menjalankan npx.

npx kemudian menjalankan Playwright MCP.

Jika sudah mempunyai MCP lain

Misalnya kita sudah mempunyai Stitch MCP.

Konfigurasinya dapat digabungkan.

Contohnya

 1{
 2  "$schema": "https://opencode.ai/config.json",
 3  "mcp": {
 4    "servers": {
 5      "stitch": {
 6        "type": "remote",
 7        "url": "https://stitch.googleapis.com/mcp",
 8        "enabled": true,
 9        "headers": {
10          "X-Goog-Api-Key": "{env:STITCH_API_KEY}"
11        }
12      },
13      "playwright": {
14        "type": "local",
15        "command": [
16          "powershell.exe",
17          "-NoProfile",
18          "-Command",
19          "npx -y @playwright/mcp@latest"
20        ],
21        "disabled": false
22      }
23    }
24  }
25}

Jangan menaruh API key asli di source code, screenshot, artikel, atau repository publik.

Gunakan environment variable untuk secret.

Jalankan kembali OpenCode

Setelah konfigurasi disimpan, restart OpenCode.

Dari WSL

1opencode

Kemudian periksa MCP yang tersedia.

Jika versi OpenCode Anda mendukung command MCP, gunakan

1opencode mcp list

Anda juga dapat menggunakan command MCP dari dalam OpenCode jika tersedia pada versi yang digunakan.

Pastikan Playwright muncul sebagai MCP server aktif.

Pengujian pertama

Jangan langsung menguji website produksi.

Gunakan website sederhana terlebih dahulu.

Di OpenCode berikan prompt

1Gunakan Playwright untuk membuka https://example.com.
2
3Berikan judul halaman dan URL yang sedang dibuka.

Jika berhasil, browser akan digunakan oleh Playwright.

AI kemudian dapat membaca halaman tersebut.

Pengujian interaksi

Setelah berhasil membuka website, kita bisa menguji interaksi.

Gunakan website TodoMVC misalnya

1https://demo.playwright.dev/todomvc

Kemudian berikan prompt

 1Gunakan Playwright untuk membuka
 2https://demo.playwright.dev/todomvc
 3
 4Tambahkan tiga todo
 5
 6Belajar OpenCode
 7Belajar Playwright MCP
 8Membuat browser automation
 9
10Setelah selesai periksa apakah ketiganya benar benar muncul.

Jika workflow tersebut berhasil, berarti MCP sudah dapat melakukan interaksi dengan browser.

Pengujian form

Kita juga dapat meminta OpenCode melakukan pengujian form.

Misalnya

1Gunakan Playwright untuk membuka halaman login.
2
3Isi email dengan [email protected].
4
5Isi password dengan password123.
6
7Jangan submit form.
8
9Setelah selesai periksa apakah kedua field sudah terisi.

AI dapat menggunakan Playwright untuk mencari field kemudian mengisinya.

Pengujian validasi

Kemampuan ini sangat berguna ketika melakukan development.

Misalnya kita baru saja membuat form registrasi.

Kita dapat meminta

1Gunakan Playwright untuk menguji form registrasi.
2
3Submit form tanpa mengisi field apa pun.
4
5Periksa semua pesan validasi.
6
7Kemudian laporkan field mana saja yang memiliki error.

AI tidak hanya membaca file validasi.

AI benar benar mencoba workflow melalui browser.

Pengujian setelah memperbaiki bug

Ini salah satu workflow yang paling cocok untuk vibe coding.

Misalnya kita mendapatkan laporan

1Tombol simpan pada halaman produk tidak bekerja.

Kita dapat meminta OpenCode

 1Periksa halaman produk menggunakan Playwright.
 2
 3Coba tambahkan produk baru.
 4
 5Jika tombol simpan tidak bekerja, cari penyebabnya di source code.
 6
 7Perbaiki masalah tersebut.
 8
 9Setelah diperbaiki jalankan kembali workflow menggunakan Playwright
10untuk memastikan masalah sudah benar benar selesai.

AI dapat melakukan loop seperti ini

1Observe
2   ↓
3Identify
4   ↓
5Modify
6   ↓
7Test
8   ↓
9Observe again

Inilah yang membuat browser automation sangat menarik untuk AI coding agent.

Vibe coding menjadi lebih tertutup loop nya

Tanpa Playwright, workflow kita sering seperti ini

 1AI membuat kode
 2      ↓
 3AI menjalankan test
 4      ↓
 5AI mengatakan selesai
 6      ↓
 7Manusia membuka browser
 8      ↓
 9Manusia menemukan masalah
10      ↓
11Manusia memberikan feedback
12      ↓
13AI memperbaiki

Dengan Playwright MCP

 1AI membuat kode
 2      ↓
 3AI menjalankan test
 4      ↓
 5Playwright membuka browser
 6      ↓
 7AI memeriksa hasil
 8      ↓
 9AI menemukan masalah
10      ↓
11AI memperbaiki kode
12      ↓
13Playwright menguji lagi

Tentu saja bukan berarti kita tidak perlu memeriksa hasilnya.

Justru sebaliknya.

Kita tetap menjadi orang yang menentukan apakah hasil akhirnya benar.

Tetapi pekerjaan berulang seperti membuka halaman, mengklik tombol, mengisi form, dan memeriksa navigasi dapat banyak dibantu oleh agent.

Playwright untuk pengembangan frontend

Playwright MCP sangat berguna ketika mengembangkan

 1Landing page
 2Dashboard
 3Admin panel
 4E commerce
 5POS
 6SaaS
 7PWA
 8Form
 9Authentication
10Checkout
11CRUD

Contohnya setelah membuat dashboard kita dapat meminta

1Buka dashboard menggunakan Playwright.
2
3Periksa apakah sidebar dapat dibuka dan ditutup.
4
5Periksa semua menu utama.
6
7Pastikan tidak ada navigasi yang menghasilkan 404.
8
9Uji halaman pada ukuran viewport mobile.

Ini jauh lebih konkret dibanding sekadar bertanya kepada AI

1Apakah dashboard saya sudah bagus?

AI membutuhkan bukti.

Playwright membantu menyediakan bukti tersebut dari browser.

Playwright untuk aplikasi Laravel

Misalnya kita sedang membuat aplikasi Laravel.

Kita menjalankan server

1php artisan serve

Kemudian OpenCode dapat meminta Playwright membuka

1http://127.0.0.1:8000

Workflow dapat dibuat seperti

 1Login
 2   ↓
 3Dashboard
 4   ↓
 5Users
 6   ↓
 7Create User
 8   ↓
 9Fill form
10   ↓
11Save
12   ↓
13Verify user

Kemudian AI dapat menemukan masalah yang terjadi pada browser.

Playwright untuk aplikasi SvelteKit

Prinsipnya sama.

Misalnya development server berjalan pada

1http://localhost:5173

Kita dapat meminta

1Buka http://localhost:5173 menggunakan Playwright.
2
3Periksa halaman utama.
4
5Klik menu Products.
6
7Tambahkan produk baru.
8
9Pastikan produk tersebut muncul di tabel.

AI dapat melakukan workflow tersebut melalui MCP.

Playwright untuk aplikasi Astro

Untuk Astro juga sama.

Misalnya

1http://localhost:4321

Kita dapat meminta

1Buka website Astro.
2
3Periksa navigasi desktop.
4
5Uji menu mobile.
6
7Periksa seluruh link utama.
8
9Laporkan jika ada link yang rusak.

Ini sangat berguna ketika project memiliki banyak halaman.

Playwright dan screenshot untuk UI review

Ketika membuat UI menggunakan AI, screenshot bisa menjadi bagian dari feedback loop.

Contohnya

 1Buka halaman dashboard.
 2
 3Gunakan viewport mobile.
 4
 5Ambil screenshot.
 6
 7Periksa apakah layout mengalami overflow horizontal.
 8
 9Jika ditemukan masalah, perbaiki CSS.
10
11Kemudian buka kembali halaman dan periksa hasilnya.

Ini memungkinkan AI melakukan iterasi terhadap UI berdasarkan kondisi browser.

Menguji responsive design

Responsive design sering menghasilkan bug yang tidak terlihat pada desktop.

Misalnya

1Desktop
2   ✓
3
4Tablet
5   ✓
6
7Mobile
8   ✗

Dengan Playwright kita dapat meminta pengujian pada viewport berbeda.

Contohnya

 1Uji dashboard pada viewport 390x844.
 2
 3Periksa
 4
 5sidebar
 6header
 7table
 8button
 9form
10modal
11
12Pastikan tidak ada horizontal overflow.

Kemudian

1Uji kembali pada viewport desktop.
2
3Pastikan perubahan responsive tidak merusak layout desktop.

Playwright untuk regression testing

Regression testing berarti memastikan perubahan baru tidak merusak fitur yang sebelumnya sudah bekerja.

Misalnya kita baru mengubah komponen navbar.

Kita dapat meminta

1Setelah perubahan navbar selesai,
2gunakan Playwright untuk memastikan
3
4homepage masih dapat dibuka
5login masih berfungsi
6dashboard masih dapat dibuka
7menu Products masih bekerja
8menu Customers masih bekerja
9logout masih bekerja

Ini sangat cocok untuk project yang semakin besar.

Jangan memberikan akses berlebihan kepada AI

Playwright MCP memberikan AI kemampuan untuk berinteraksi dengan browser.

Karena itu kita tetap perlu berhati hati.

Jangan memberikan akses ke browser profile utama yang berisi seluruh akun pribadi jika tidak diperlukan.

Hindari melakukan automation terhadap

1Internet banking
2akun finansial
3akun pribadi
4data sensitif
5sistem produksi
6akun administrator utama

Gunakan environment development atau staging apabila memungkinkan.

Untuk eksperimen, lebih aman membuat browser profile khusus.

Mengapa sebaiknya menggunakan browser profile khusus

Browser yang digunakan untuk automation dapat memiliki session dan cookies.

Bayangkan kita memiliki browser profile utama yang sudah login ke

1Gmail
2GitHub
3Cloudflare
4Hosting
5WhatsApp Web
6Dashboard perusahaan

Kemudian AI diberikan kemampuan automation terhadap browser tersebut.

AI memiliki kemampuan melakukan tindakan berdasarkan apa yang tersedia di browser.

Karena itu lebih aman menggunakan profile khusus untuk automation.

Misalnya

1C:\playwright-profile

Dengan begitu environment automation terpisah dari browser pribadi.

Tentang Chrome dan browser Playwright

Ada satu hal yang sering membingungkan.

Google Chrome yang terinstall di Windows bukan hal yang sama dengan browser Chromium yang dikelola oleh Playwright.

Playwright mempunyai browser binary sendiri.

Perintah

1npx playwright install

dapat menginstall browser yang diperlukan Playwright.

Sementara Google Chrome di Windows tetap merupakan instalasi Chrome milik pengguna.

Untuk tutorial ini Chrome tetap disarankan sudah terinstall di Windows karena tujuan setup adalah menjalankan browser automation dari environment Windows.

Jika membutuhkan browser channel tertentu atau ingin menghubungkan browser yang sudah berjalan, konfigurasi Playwright MCP perlu disesuaikan dengan mode browser yang digunakan.

Bagaimana dengan Zen Browser

Jika menggunakan Zen Browser, perlu diperhatikan bahwa Zen Browser bukan browser channel resmi yang tercantum sebagai pilihan --browser Playwright MCP.

Jadi jangan menggunakan

1--browser=zen

seolah olah Zen merupakan pilihan resmi Playwright MCP.

Jika tujuan kita adalah mengendalikan browser yang sudah berjalan atau menggunakan browser Chromium based tertentu, pendekatan CDP atau extension dapat menjadi pilihan tergantung kebutuhan dan dukungan browser.

Untuk tutorial ini kita menggunakan Chrome karena setup tersebut lebih sederhana dan lebih mudah direproduksi.

Troubleshooting

npx tidak ditemukan

Jika muncul

1npx is not recognized

pastikan Node.js sudah terinstall di Windows.

Jalankan

1node --version

1npm --version

1npx --version

Jika belum tersedia, install Node.js

1winget install nodejs

Kemudian restart PowerShell.

PowerShell tidak bisa dipanggil dari WSL

Coba dari WSL

1powershell.exe -NoProfile -Command "node --version"

Jika berhasil, WSL dapat mengakses Node.js Windows.

Jika tidak berhasil, periksa Windows interop WSL.

Playwright MCP tidak muncul di OpenCode

Periksa konfigurasi

1~/.opencode/config.json

Pastikan command mengarah ke

1powershell.exe

dan

1npx -y @playwright/mcp@latest

Kemudian restart OpenCode.

Playwright MCP gagal dijalankan

Tes command secara langsung dari PowerShell

1npx -y @playwright/mcp@latest

Jika command tersebut gagal, selesaikan masalah di Windows terlebih dahulu.

Jangan langsung menyalahkan OpenCode.

Browser tidak muncul

Periksa apakah Playwright dapat berjalan.

1npx playwright --version

Kemudian

1npx playwright install

Jika menggunakan browser channel tertentu, pastikan browser tersebut memang tersedia dan dapat dijalankan pada environment Windows.

Cara melakukan debugging dengan pendekatan bertahap

Jika semuanya gagal, jangan langsung mengubah sepuluh hal sekaligus.

Tes satu per satu.

Pertama

1powershell.exe -NoProfile -Command "node --version"

Kemudian

1powershell.exe -NoProfile -Command "npm --version"

Kemudian

1powershell.exe -NoProfile -Command "npx --version"

Kemudian

1powershell.exe -NoProfile -Command "npx playwright --version"

Kemudian

1powershell.exe -NoProfile -Command "npx -y @playwright/mcp@latest"

Jika semua berhasil, barulah periksa OpenCode.

Cara seperti ini jauh lebih cepat daripada melakukan reinstall semuanya.

Contoh konfigurasi final

Untuk setup OpenCode di WSL dan Playwright MCP di Windows, konfigurasi sederhananya adalah

 1{
 2  "$schema": "https://opencode.ai/config.json",
 3  "mcp": {
 4    "servers": {
 5      "playwright": {
 6        "type": "local",
 7        "command": [
 8          "powershell.exe",
 9          "-NoProfile",
10          "-Command",
11          "npx -y @playwright/mcp@latest"
12        ],
13        "disabled": false
14      }
15    }
16  }
17}

Dengan konfigurasi tersebut alurnya adalah

 1OpenCode WSL
 2      ↓
 3powershell.exe
 4      ↓
 5Windows
 6      ↓
 7npx
 8      ↓
 9@playwright/mcp
10      ↓
11Playwright
12      ↓
13Browser

Contoh workflow vibe coding yang lebih realistis

Misalnya kita sedang membuat aplikasi SaaS.

Kita dapat memberikan instruksi kepada OpenCode seperti ini

 1Implementasikan halaman Products.
 2
 3Setelah implementasi selesai jalankan aplikasi.
 4
 5Gunakan Playwright untuk membuka halaman Products.
 6
 7Periksa apakah tabel produk muncul.
 8
 9Kemudian uji workflow berikut
10
111. Buka halaman Products
122. Klik Add Product
133. Isi nama produk
144. Isi harga
155. Isi stok
166. Simpan produk
177. Pastikan produk muncul di tabel
188. Edit produk tersebut
199. Pastikan perubahan tersimpan
2010. Hapus produk tersebut
2111. Pastikan produk sudah tidak muncul
22
23Jika ditemukan error, perbaiki source code dan ulangi pengujian.
24
25Jangan menganggap fitur selesai sebelum workflow tersebut berhasil.

Prompt seperti ini jauh lebih kuat daripada hanya

1Buat fitur CRUD Products.

Karena kita memberikan AI definisi selesai yang dapat diverifikasi.

Konsep penting

Ketika menggunakan AI coding agent, jangan hanya meminta

1buat fitur

Lebih baik meminta

1buat fitur
2uji fitur
3periksa hasil
4perbaiki jika gagal
5uji kembali

Playwright MCP membuat bagian terakhir menjadi mungkin.

AI tidak hanya menghasilkan kode.

AI dapat ikut menguji aplikasi melalui browser.

Kesimpulan

Playwright MCP bukan sekadar tool untuk membuka Chrome.

Dalam workflow AI coding, Playwright dapat menjadi jembatan antara source code dan aplikasi yang benar benar berjalan di browser.

Tanpa browser automation, AI terutama bekerja dengan

1source code
2terminal
3logs
4test

Dengan Playwright MCP, AI mendapatkan tambahan

1browser
2DOM
3navigasi
4interaksi
5form
6screenshot
7workflow pengguna

Hal ini membuat workflow vibe coding menjadi lebih lengkap.

Arsitektur yang digunakan dalam tutorial ini cukup sederhana

 1Windows 11
 2│
 3├── Google Chrome
 4├── Node.js
 5├── npm
 6├── npx
 7└── Playwright MCP
 8        ▲
 9        │
10        │ PowerShell
11        │
12        ▼
13WSL Debian
14│
15└── OpenCode

Node.js di Windows dapat dipasang dengan

1winget install nodejs

Playwright MCP dijalankan dengan

1npx -y @playwright/mcp@latest

Sedangkan OpenCode memanggilnya melalui

1powershell.exe

Dengan setup ini kita tidak perlu memindahkan OpenCode keluar dari WSL hanya karena ingin menggunakan browser automation.

WSL tetap menjadi tempat development.

Windows tetap menjadi tempat menjalankan browser.

Dan Playwright menjadi jembatan yang memungkinkan AI coding agent berinteraksi langsung dengan aplikasi yang sedang kita bangun.

Bagi saya, bagian paling menarik bukan sekadar AI bisa mengklik tombol.

Yang lebih penting adalah kita dapat mengubah workflow dari

1AI membuat kode
2→ manusia mengecek browser
3→ manusia menemukan masalah
4→ manusia melapor
5→ AI memperbaiki

menjadi

1AI membuat kode
2→ AI menjalankan aplikasi
3→ Playwright menguji browser
4→ AI membaca hasil
5→ AI memperbaiki
6→ Playwright menguji kembali

Itulah salah satu alasan Playwright MCP sangat menarik untuk workflow vibe coding modern.