Playwright MCP vs Browser Use vs Stagehand: Browser Agent

Bayangkan tim accounts payable di sebuah distributor di Indonesia. Empat puluh supplier masing-masing punya portal invoice sendiri, tidak satu pun menyediakan API, dan setiap pagi seseorang harus login ke tiap portal untuk mengecek invoice mana yang sudah dibayar, disengketakan, atau masih terbuka. Ini kasus klasik untuk browser agent, dan pencarian pertama, playwright mcp vs browser use, memunculkan empat jenis tool yang sangat berbeda tetapi sama-sama mengaku bisa menyelesaikannya.

Keempatnya tidak menyelesaikan masalah yang sama. Artikel ini membandingkan Playwright MCP, Browser Use, Stagehand, serta computer-use tools dari OpenAI dan Google pada pertanyaan yang menentukan build production: siapa yang memegang loop, apakah model membaca DOM atau melihat piksel, berapa biaya run berulang, dan di mana kontrol keamanan sebenarnya berada. Semua nama API dan nilai default di bawah diambil dari dokumentasi terkini tiap proyek, dengan sumber di bagian akhir.

Siapa yang memegang loop: pertanyaan yang memilah browser agent

Browser agent pada dasarnya sebuah loop: lihat halaman, tentukan langkah berikutnya, bertindak, lalu lihat lagi. Tool dalam perbandingan ini terbagi jelas berdasarkan bagian loop mana yang mereka sediakan dan bagian mana yang diserahkan kepada Anda.

• Lapisan tool, Playwright MCP. Ia mengeksekusi satu aksi browser per tool call lalu mengembalikan accessibility snapshot terbaru. Keputusan diambil oleh MCP client yang memanggilnya, misalnya Claude Code, Cursor, atau agent buatan Anda sendiri.
• Agent framework, Browser Use. Anda memberikan task string dan model, lalu class Agent menjalankan seluruh siklus mengamati, memutuskan dan bertindak sampai ia memanggil done atau mencapai batas langkah.
• Primitive, Stagehand. Anda menulis control flow dengan kode biasa dan memanggil act, extract atau observe hanya pada langkah yang akan rapuh jika memakai selector.
• Computer use bawaan model, yaitu computer tool OpenAI dan computer use Gemini. Model melihat screenshot dan mengembalikan aksi mouse dan keyboard, lalu aplikasi Anda mengeksekusinya dan mengirim screenshot berikutnya.

Makin ke bawah daftar itu, makin besar bagian loop yang menjadi kode Anda sendiri, dan makin besar pula tanggung jawab Anda atas reliabilitasnya. Ini bukan peringkat. Framework yang memegang loop paling cepat menghasilkan demo, sedangkan memegang loop sendiri memungkinkan Anda memasang langkah approval tepat di titik aksi menjadi tidak bisa dibatalkan.

Playwright MCP vs Browser Use vs Stagehand: tabel perbandingan

Tabel berikut menyandingkan keempat pendekatan pada dimensi yang benar-benar mengubah keputusan arsitektur. Kolom vendor menggabungkan OpenAI dan Gemini karena bentuknya sama: screenshot masuk, aksi keluar.

Dua baris memikul sebagian besar keputusan. Persepsi menentukan situs mana yang bisa dipakai sama sekali: accessibility tree murah dan presisi pada form yang dibangun dengan baik, tetapi hampir tidak berguna pada dashboard yang di-render di canvas, di mana hanya screenshot yang membantu. Biaya run berulang menentukan apakah flow itu terjangkau untuk empat puluh portal setiap pagi, dan hanya Stagehand yang punya cara bawaan untuk berhenti membayar model atas langkah yang sudah direncanakan.

Playwright MCP: tool browser tanpa otak

Playwright MCP adalah server Model Context Protocol dari Microsoft yang membungkus Playwright. README-nya menjelaskan bahwa ia bekerja lewat structured accessibility snapshot, tanpa perlu screenshot atau model yang dilatih untuk visual. Model membaca tree berisi role dan nama, setiap node interaktif diberi ref, lalu meneruskan ref itu ke tool seperti browser_click, browser_type dan browser_fill_form.

// .mcp.json (or your client's mcpServers block)
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--headless",
        "--isolated",                       // profile lives in memory, gone on close
        "--storage-state", "./portal-auth.json", // log in once, outside the agent
        "--allowed-origins", "https://portal.supplier.example",
        "--secrets", "./.portal.env"        // masks matching text in tool responses
      ]
    }
  }
}

// What the model actually reads: an accessibility snapshot, not pixels.
// browser_snapshot returns a tree; every interactive node carries a ref.
//   - heading "Open invoices" [level=1]
//   - textbox "Invoice number" [ref=e14]
//   - button "Search" [ref=e15]
//   - row "INV-2026-0912  Rp 48.250.000  Unpaid" [ref=e31]
//
// The model then calls a tool with that ref as the target:
//   browser_type   { "target": "e14", "text": "INV-2026-0912" }
//   browser_click  { "target": "e15", "element": "Search button" }
//
// The planning loop is YOURS (or your MCP client's). Playwright MCP
// executes one tool call and returns the new snapshot. Nothing more.

Server ini tidak pernah merencanakan. Ia menjalankan tool yang diminta dan melaporkan state baru, sehingga kualitas agent sepenuhnya ditentukan oleh MCP client dan model di belakangnya. Itu kekuatan ketika client-nya sudah agent yang cakap, dan itulah alasan Playwright MCP menjadi cara umum memberi browser pada Claude Code, Cursor atau VS Code. Tool berbasis koordinat seperti browser_mouse_click_xy memang ada, tetapi hanya aktif jika Anda opt in dengan --caps vision.

Baca dokumentasi flag dengan teliti sebelum mengandalkannya untuk keamanan. README menyatakan bahwa --allowed-origins dan --blocked-origins bukan security boundary dan tidak memengaruhi redirect, bahwa opsi secrets hanyalah kemudahan dan bukan fitur keamanan, dan di bagian security-nya, bahwa Playwright MCP bukan security boundary. Profil persisten adalah default dan hanya bisa dipakai satu instance browser sekaligus, jadi client paralel butuh --isolated atau path --user-data-dir yang berbeda.

Browser Use: framework yang menjalankan seluruh agent loop

Browser Use adalah library Python berlisensi MIT, dengan edisi TypeScript, yang class Agent-nya memegang loop. Anda memberikan task, model, dan opsional Browser serta Tools kustom; agent.run menjalankan langkah sampai model memanggil done atau max_steps habis. Contoh di bawah memberi agent satu tool kustom yang sempit untuk menulis draft note ke ERP, alih-alih membiarkannya menyentuh layar ERP.

import asyncio
from browser_use import ActionResult, Agent, Browser, ChatBrowserUse, Tools

tools = Tools()

# Give the agent a door into YOUR system instead of letting it type into the ERP UI.
@tools.action(description="Record a supplier invoice status as a DRAFT note in the ERP.")
def save_invoice_status(invoice_no: str, status: str) -> ActionResult:
    draft_id = erp_client.create_draft_note(invoice_no, status)  # your code
    return ActionResult(extracted_content=f"draft {draft_id} saved")

async def main():
    agent = Agent(
        task="Log in with x_user / x_pass, open Open invoices, "
             "read the status of INV-2026-0912 and save it with save_invoice_status.",
        llm=ChatBrowserUse(model="bu-2-0"),
        browser=Browser(allowed_domains=["https://portal.supplier.example"]),
        tools=tools,
        # The model only ever sees the placeholder names x_user and x_pass.
        sensitive_data={"https://portal.supplier.example":
                         {"x_user": PORTAL_USER, "x_pass": PORTAL_PASS}},
        use_vision=False,        # default is True: screenshots would show the password field
        max_failures=3,          # default 5
        step_timeout=120,        # seconds, default 180
    )
    history = await agent.run(max_steps=25)
    # is_successful() is what the AGENT reports. Check the ERP draft yourself.
    print(history.is_successful(), history.final_result())

asyncio.run(main())

Nilai default-nya disetel untuk menyelesaikan task, bukan untuk berhati-hati. run menerima max_steps dengan default 500 di source terkini, use_vision bernilai True, max_failures dan max_actions_per_step sama-sama 5, dan step_timeout 180 detik. Untuk pekerjaan back office, turunkan batas langkah, matikan vision setiap kali kredensial tampil di layar, dan isi allowed_domains: library ini sendiri mencatat warning ketika sensitive_data diisi tanpa allowed_domains, karena halaman yang terkena prompt injection bisa membaca balik secret tersebut.

Agent yang sama juga bisa dijalankan sebagai MCP server lokal dengan uvx dan extra CLI browser-use, yang membalik hubungannya dengan Playwright MCP: chat client Anda mendelegasikan seluruh sub-task browsing ke Browser Use, bukan mengendalikan setiap klik. Perhatikan bahwa history.is_successful melaporkan klaim agent. Dokumentasi Browser Use menyebutkan hal ini secara langsung dan menyarankan aksi eksternal yang penting diverifikasi secara terpisah.

Stagehand v4: act, extract dan observe, kini tanpa Playwright

Stagehand dari Browserbase berada di antara selector yang ditulis manual dan agent yang berjalan bebas. Anda menulis flow-nya; act menjalankan satu langkah bahasa alami, extract mengembalikan data yang divalidasi dengan schema Zod, dan observe mengembalikan kandidat aksi berisi selector, description, method dan arguments. Mengirim salah satu observed action itu kembali ke act akan me-replay-nya tanpa LLM call, dan begitulah flow yang direncanakan sekali menjadi murah untuk dijalankan ulang.

import { localBrowser, Stagehand } from "@browserbasehq/stagehand";
import { z } from "zod";

const browser = await localBrowser.launch();
const stagehand = await Stagehand.create({
  browser,
  model: { modelName: "openai/gpt-5.6-sol", apiKey: process.env.OPENAI_API_KEY },
});
const [page] = await browser.context.pages();

await page.goto("https://portal.supplier.example/login");
// Wrong: one act() with "log in, open invoices and search for 0912".
// Right: one atomic step per act(). Secrets go in as variables; only the
// placeholder name reaches the model provider.
await stagehand.act("type %user% into the username field", { variables: { user: PORTAL_USER } });
await stagehand.act("type %pass% into the password field", { variables: { pass: PORTAL_PASS } });
await stagehand.act("click the sign in button");

// v4 has NO Playwright-style auto-waiting: wait explicitly before the next step.
await page.waitForSelector("table.invoices");

// observe() plans once; act(action) replays the returned action with no LLM call.
const { data: searchSteps } = await stagehand.observe("find the invoice search box and its submit button");
for (const step of searchSteps) await stagehand.act(step);

const { data } = await stagehand.extract(
  "extract every open invoice row",
  z.object({ invoices: z.array(z.object({
    number: z.string(), amountIdr: z.number(), status: z.string(),
  })) }),
);

await stagehand.close();
await browser.close();

Porting-nya bukan sekadar ganti nama. Stagehand.create menggantikan new Stagehand plus init, act, extract dan observe pindah ke instance Stagehand, dan setiap primitive mengembalikan pasangan data dan metadata. Detail yang paling diam-diam merusak script hasil porting adalah waiting: v4 me-resolve selector sekali dan langsung throw jika elemennya belum ada, berbeda dengan auto-waiting Playwright, sehingga panggilan waitForSelector eksplisit harus ditambahkan lagi.

Caching juga berubah di rilis yang sama. Direktori cache lokal dihapus; caching kini server-side di Browserbase, aktif secara default di sana, dengan key dari instruksi, konten halaman dan opsi call, dan sengaja tidak memasukkan model. Di browser lokal, pola observe lalu act adalah tuas biaya yang Anda kendalikan, dan dokumentasinya menyarankan satu langkah atomik per act call alih-alih merangkai beberapa langkah dalam satu instruksi.

Computer-use tools: ketika model hanya melihat piksel

Tool dari vendor melewati DOM sepenuhnya. Computer tool OpenAI di Responses API mengembalikan computer_call berisi daftar aksi yang berurutan dan di-batch, dari click, double_click, drag, move, scroll, keypress, type, wait dan screenshot. Kode Anda mengeksekusinya lalu menjawab dengan screenshot di computer_call_output. Tool computer_use Gemini bekerja dengan cara yang sama, dengan koordinat yang dinormalisasi ke grid 0 sampai 1000 yang harus Anda skala ke ukuran layar sebenarnya.

# ── OpenAI: the computer tool in the Responses API ──
response = client.responses.create(
    model="gpt-6.1-sol",
    tools=[{"type": "computer"}],
    input="Open the Open invoices page and read the status of INV-2026-0912.",
)
# The output holds a computer_call with an ORDERED, batched actions array:
#   {"type": "computer_call", "call_id": "call_002", "actions": [
#      {"type": "click", "button": "left", "x": 405, "y": 157},
#      {"type": "type", "text": "INV-2026-0912"}]}
# Allowed: click, double_click, drag, move, scroll, keypress, type, wait, screenshot.
for action in call.actions:
    if not policy.allows(action):          # your allow list, your confirmation step
        raise NeedsHuman(action)
    execute(page, action)                  # Playwright, PyAutoGUI, a VM ...
response = client.responses.create(
    model="gpt-6.1-sol",
    tools=[{"type": "computer"}],
    previous_response_id=response.id,
    input=[{"type": "computer_call_output", "call_id": call.call_id,
            "output": {"type": "computer_screenshot",
                       "image_url": f"data:image/png;base64,{png_b64}",
                       "detail": "original"}}],
)

# ── Gemini: the computer_use tool, coordinates on a 0-1000 grid ──
tools = [{"type": "computer_use", "environment": "browser"}]
def to_px(x, y, width=1440, height=900):   # 1440x900 is the suggested browser size
    return int(x / 1000 * width), int(y / 1000 * height)
# A function_call may arrive with safety_decision = require_confirmation.
# Treat that as a hard stop for a human, not a hint.

Dua detail penting bagi siapa pun yang membangun di atasnya sekarang. Panduan OpenAI merekomendasikan code execution, di mana model menulis script Playwright atau PyAutoGUI, dibanding computer tool terstruktur untuk model terbarunya, dan menyediakan bagian migrasi untuk integrasi yang dibangun di atas computer-use-preview lama. Gemini menandai computer use sebagai kapabilitas Preview yang bisa mengandung error dan celah keamanan, dan response-nya bisa membawa safety_decision bernilai require_confirmation, yang harus diubah loop Anda menjadi jeda nyata untuk manusia.

Produk consumer yang dibangun dari ide ini juga tidak stabil. Operator diluncurkan pada Januari 2025 dan ditutup pada 31 Agustus 2025 setelah diserap ChatGPT agent, dan ChatGPT agent sendiri dihapus dari ChatGPT pada awal Agustus 2026 tanpa pemberitahuan sebelumnya. Untuk proses bisnis, riwayat itu menjadi alasan untuk membangun di lapisan API yang Anda kendalikan, bukan di satu asisten hosted tertentu.

Reliabilitas dan keamanan: tidak satu pun adalah security boundary

Setiap tool dalam perbandingan ini menyatakan, di dokumentasinya sendiri, bahwa ia tidak akan menjauhkan halaman jahat atau model yang bingung dari data Anda. Kontrolnya harus ada di environment Anda. Checklist minimal untuk agent portal supplier:

1. Jalankan setiap session di profil atau container yang terisolasi, dibuat per run dan dihapus sesudahnya, dengan login dipulihkan dari file storage state, bukan diketik oleh model.
2. Terapkan allow list situs di lapisan network atau proxy. Daftar origin di level tool membantu model tetap di jalur, tetapi dokumentasi Playwright MCP sendiri menyebut itu bukan boundary.
3. Jauhkan secret mentah dari context model: sensitive_data di Browser Use, variables di Stagehand, dan vision dimatikan di layar yang menampilkannya.
4. Pasang langkah konfirmasi sebelum apa pun yang berdampak. Panduan OpenAI menyebut pembelian, transmisi data dan perubahan destruktif, dan menghitung pengetikan informasi sensitif ke form sebagai transmisi.
5. Batasi setiap run dengan limit langkah, waktu atau biaya, dan cek hasil nyatanya, misalnya draft di ERP atau file yang diunduh, alih-alih memercayai pesan akhir agent.

Browser agent mana yang dipilih untuk back office ERP

Untuk skenario accounts payable tadi, pilihannya mengikuti seberapa jelas jalurnya dan siapa yang akan memeliharanya. Pembagian yang masuk akal:

• Stagehand untuk pengecekan portal harian. Jalurnya sudah diketahui, berjalan setiap pagi, dan kombinasi observe lalu act plus extract dengan schema menghasilkan baris data bertipe dengan model call sesedikit mungkin.
• Browser Use untuk investigasi sekali jalan, misalnya mencari di mana portal supplier baru menyembunyikan credit note, ketika belum ada yang tahu jalurnya dan loop otonom sepadan dengan biayanya.
• Playwright MCP ketika developer atau analis operasional sudah bekerja di dalam MCP client dan ingin client itu melihat sebuah halaman di tengah percakapan.
• Computer-use tool hanya untuk portal yang me-render tabelnya di canvas atau remote desktop, di mana tidak ada accessibility tree yang bisa dibaca.

Apa pun yang menjalankan browser, jauhkan operasi tulis darinya. Agent membaca portal dan menyerahkan data terstruktur ke kode Anda sendiri, yang membuat draft di ERP untuk di-posting oleh manusia. Dengan begitu browser agent tetap mudah diganti, dan itu penting di kategori di mana Stagehand membuang Playwright dan method agent-nya dalam satu major version.

Aturan yang berguna adalah memilih berdasarkan kepemilikan loop, bukan judul benchmark. Serahkan loop ke Browser Use ketika jalurnya belum diketahui, pegang sendiri dengan Stagehand ketika jalurnya berulang, pinjamkan tool ke agent yang sudah ada dengan Playwright MCP, dan pakai screenshot hanya ketika tidak ada DOM yang layak dibaca. Dalam semua kasus, security boundary adalah tanggung jawab Anda untuk dibangun.