Playwright CLI vs MCP Server: Mana yang Sebenarnya LEBIH BAIK untuk Claude Code?

BBetter Stack
Computing/SoftwareInternet Technology

Transcript

00:00:00Playwrights CLI adalah cara terbaru menggunakan Playwright dengan agen coding Anda, memungkinkan Anda mengelola
00:00:04penyimpanan lokal dan sesi, mengambil snapshot, mengelola tab – pada dasarnya kekuatan penuh
00:00:09mesin Playwright langsung di dalam terminal Anda.
00:00:12Tapi mengapa orang lebih memilih ini daripada menggunakan server MCP Playwright?
00:00:17Bahkan, mengapa semakin banyak CLI yang dibangun dari alat yang sebelumnya merupakan server MCP?
00:00:22Tekan tombol subscribe dan mari kita bahas.
00:00:24Mari kita mulai dengan menguji Playwright CLI dan server MCP pada satu tugas sederhana.
00:00:31Saya akan memintanya membantu saya menguji alat yang sedang saya kerjakan untuk mengunduh video dari
00:00:35Twitter.
00:00:36Saya akan meminta Playwright mengambil tautan tweet ini, menempelkannya di sini, mengekstrak
00:00:40videonya, lalu menunggu selama 10 detik sebelum mengambil tangkapan layar, dan kemudian menghapus penyimpanan lokal
00:00:45agar agen berikutnya bisa memulai dari awal.
00:00:48Pertama, kita akan mencobanya dengan Playwright CLI menggunakan Claude Code, dan jika kita menginstalnya, kita
00:00:54seharusnya memiliki keahlian tersebut di sini.
00:00:56Perhatikan bahwa ini hanya memakan 68 token.
00:00:59Sekarang saya akan memberikan perintah ini, yang secara eksplisit menyuruh agen untuk menggunakan
00:01:03keahlian Playwright CLI, hanya untuk mempermudah segalanya.
00:01:06Lalu saya tekan enter, ia memuat keahliannya, memasukkan URL ini ke kotak teks, mengeklik
00:01:11Extract Video, lalu ia akan menunggu selama 10 detik.
00:01:13Sekarang ia telah mengambil tangkapan layar, menghapus penyimpanan lokal, dan menutup browser.
00:01:17Jadi sekarang semua selesai, katanya tangkapan layar disimpan di sini, dan jika kita lihat,
00:01:21kita bisa melihat bahwa video tersebut berhasil diunduh.
00:01:24Dan seluruh proses ini telah menghabiskan sekitar 16% token.
00:01:27Sekarang mari kita coba hal yang sama menggunakan server MCP.
00:01:29Kita bisa menggunakan perintah MCP untuk memeriksa apakah sudah terinstal.
00:01:33Dan sebelum kita melakukannya, mari kita lihat konteksnya.
00:01:35Jika Anda gulir ke atas, kita bisa melihat bahwa 15% konteks sudah terpakai, karena semua
00:01:41alat MCP ini sedang dimuat, yang memakan sekitar 3,6 ribu token.
00:01:46Oke, dengan mengingat hal itu, kita akan menggunakan perintah yang sama.
00:01:50Dan perhatikan saya menggunakan alat server MCP Playwright, alih-alih menggunakan keahlian CLI.
00:01:55Jadi ia lanjut menggunakan server MCP, yang membuka browser baru.
00:01:59Lalu ia menempelkan tautan ke dalam input.
00:02:01Kemudian ia akan mengeklik tombolnya.
00:02:02Saya perhatikan server MCP meminta jauh lebih banyak izin daripada CLI, tapi itu tidak masalah.
00:02:08Dan ia mengalami beberapa masalah saat mengambil tangkapan layar, yang mungkin karena saya sudah punya file
00:02:12dengan nama yang sama.
00:02:13Saya sebenarnya mencoba lagi dengan server MCP Playwright, dan meskipun mencoba dengan
00:02:17nama tangkapan layar yang berbeda, ia tetap bermasalah beberapa kali saat mencoba mengekstrak gambar.
00:02:22Dan sekarang sudah selesai.
00:02:23Ia mampu melakukan segalanya kecuali mengambil tangkapan layar.
00:02:26Tapi mari kita lihat konteksnya, dan kita bisa melihat ia memakai 35 ribu, yaitu 18%.
00:02:32Jadi hanya sedikit lebih banyak dari CLI, yang sebagian besarnya termakan oleh alat MCP.
00:02:37Tapi sebenarnya ada cara untuk melakukan rangkaian tugas yang sama dengan konteks yang sedikit lebih hemat,
00:02:43yang akan saya bahas nanti di video ini.
00:02:45Saya tahu ini hanya satu contoh, dan mungkin ada skenario di mana server MCP
00:02:51menggunakan lebih sedikit token daripada Playwright CLI tergantung tugasnya, meskipun saya ragu.
00:02:56Dan Anda mungkin berpikir, selisih antara 16 dan 18% itu tidak seberapa.
00:03:02Namun CLI memiliki keunggulan lain dibandingkan server MCP.
00:03:06Secara default, server MCP Playwright tidak mengekspos semua alat yang tersedia.
00:03:11Bahkan, Anda harus memilih alat tambahan seperti pembuatan PDF atau penelusuran (tracing)
00:03:16untuk menggunakannya karena alat-alat tersebut memakan terlalu banyak konteks.
00:03:19Namun CLI tidak memiliki batasan tersebut.
00:03:22Faktanya, semua alat tersedia sejak awal.
00:03:25Dan CLI tidak hanya bagus untuk agen, tapi juga bagus untuk manusia, karena untuk tugas yang
00:03:29Anda lakukan berulang kali, atau bahkan untuk pengujian end-to-end, Anda bisa membuat skrip bash sederhana
00:03:34yang bisa dijalankan manusia untuk verifikasi, tapi juga bisa dijalankan oleh agen.
00:03:39Tapi ini tidak berarti server MCP tidak berguna, karena jika Anda membangun loop agen
00:03:44yang ingin dijalankan di mana saja, baik di browser, aplikasi desktop, maupun seluler, bukan hanya di
00:03:49terminal, maka server MCP sangat cocok, karena itu adalah protokol standar yang
00:03:54digunakan agen untuk mengakses alat, dan karena Playwright menjalankan kode JavaScript atau TypeScript, Anda bisa
00:03:59menjalankan kode ini di lingkungan apa pun yang mendukung runtime JavaScript.
00:04:03Selain itu, server MCP berjalan dalam mode “headed” (dengan visual) secara default, sedangkan CLI berjalan dalam mode headless,
00:04:09karena ia dirancang untuk berjalan di latar belakang dalam agen coding.
00:04:13Dan jika Anda peduli untuk mengurangi penggunaan token di server MCP Playwright, Anda bisa
00:04:17mengonfigurasinya dengan mengaktifkan atau menonaktifkan alat tertentu.
00:04:20Faktanya, jika tujuan Anda adalah menggunakan token sesedikit mungkin, maka Anda tidak seharusnya menggunakan CLI
00:04:26Playwright juga, karena browser agen Cells menjalankan Playwright di baliknya, tetapi memiliki Rust
00:04:32CLI, membuatnya lebih cepat, dan dirancang untuk menggunakan lebih sedikit token daripada Playwright, seperti yang Anda lihat di
00:04:38contoh saya sebelumnya.
00:04:39Tonton video berikutnya untuk mempelajari semua tentang Agent Browser dan tingkatkan
00:04:43kemampuan browsing agen coding Anda ke level selanjutnya.

Key Takeaway

Playwright CLI menawarkan efisiensi token dan akses fitur yang lebih luas untuk agen coding di terminal, sementara server MCP tetap menjadi standar untuk integrasi lintas platform yang fleksibel.

Highlights

Playwright CLI memungkinkan kontrol penuh atas mesin Playwright langsung dari terminal, termasuk manajemen sesi dan snapshot.

Perbandingan penggunaan token menunjukkan bahwa Playwright CLI (16%) sedikit lebih efisien dibandingkan server MCP (18%) dalam tugas yang sama.

Server MCP memiliki batasan alat bawaan untuk menghemat konteks, sementara CLI mengekspos semua fitur secara default.

CLI lebih ramah bagi pengguna manusia karena memungkinkan pembuatan skrip bash untuk pengujian berulang dan verifikasi manual.

Server MCP lebih unggul untuk ekosistem lintas platform (browser, desktop, mobile) karena menggunakan protokol standar.

Browser agen berbasis Rust disebut sebagai alternatif yang jauh lebih hemat token dan lebih cepat dibandingkan Playwright.

Timeline

Pengenalan Playwright CLI dan Perbandingannya

Video dimulai dengan memperkenalkan Playwright CLI sebagai metode terbaru untuk mengintegrasikan kemampuan browser ke dalam agen coding. Pengguna dapat mengelola penyimpanan lokal, sesi, dan tab secara langsung melalui terminal dengan kekuatan penuh mesin Playwright. Narator mempertanyakan mengapa tren industri mulai beralih dari server MCP menuju solusi berbasis CLI. Bagian ini menetapkan fondasi tentang bagaimana alat ini bekerja dalam lingkungan pengembangan modern. Penonton diajak untuk memahami evolusi alat otomasi dari server ke antarmuka baris perintah.

Uji Coba Praktis: Playwright CLI pada Claude Code

Demonstrasi pertama dilakukan menggunakan Playwright CLI untuk menguji alat pengunduh video Twitter melalui Claude Code. Instruksi diberikan kepada agen untuk membuka URL, mengekstrak video, menunggu 10 detik, dan mengambil tangkapan layar. Proses ini terbukti sangat efisien dengan hanya menghabiskan 68 token awal dan total penggunaan konteks sekitar 16%. Hasil pengujian menunjukkan keberhasilan penuh di mana video berhasil diidentifikasi dan tangkapan layar tersimpan dengan benar. Fokus utama di sini adalah kecepatan eksekusi dan efisiensi ruang token yang ditawarkan oleh integrasi CLI.

Uji Coba Praktis: Menggunakan Server MCP

Eksperimen kedua beralih ke server MCP Playwright dengan skenario tugas yang identik untuk melihat perbandingannya. Terlihat bahwa pemuatan alat MCP saja sudah memakan sekitar 3,6 ribu token atau 15% dari total konteks sebelum tugas dimulai. Selama proses, server MCP meminta lebih banyak izin akses dan mengalami kegagalan teknis saat mencoba mengambil tangkapan layar. Total penggunaan konteks melonjak hingga 18% atau sekitar 35 ribu token, yang lebih tinggi dibandingkan metode CLI sebelumnya. Bagian ini menyoroti overhead yang dihasilkan oleh protokol MCP serta potensi ketidakstabilan dalam tugas tertentu.

Analisis Keunggulan dan Batasan Fitur

Narator menjelaskan bahwa perbedaan penggunaan token mungkin terlihat kecil, namun ada perbedaan fundamental dalam aksesibilitas fitur. Server MCP membatasi alat seperti pembuatan PDF atau pelacakan (tracing) secara default untuk mencegah konsumsi konteks yang berlebihan. Sebaliknya, Playwright CLI memberikan akses ke seluruh rangkaian alat tanpa batasan konfigurasi sejak awal penggunaan. Selain itu, CLI memungkinkan pengembang manusia untuk membuat skrip bash yang dapat dibagikan dan dijalankan oleh agen maupun manusia. Fleksibilitas ini membuat CLI menjadi pilihan yang sangat kuat untuk alur kerja pengembangan yang bersifat hibrida.

Kapan Harus Menggunakan MCP dan Alternatif Masa Depan

Meskipun CLI unggul dalam terminal, server MCP tetap direkomendasikan untuk aplikasi yang membutuhkan skalabilitas di luar terminal, seperti aplikasi desktop atau seluler. Server MCP menggunakan protokol standar yang dapat dipahami oleh berbagai jenis agen di berbagai lingkungan runtime JavaScript. Narator juga menyebutkan bahwa server MCP secara default berjalan dalam mode visual (headed), sementara CLI lebih dioptimalkan untuk latar belakang (headless). Sebagai penutup, diperkenalkan konsep Agent Browser berbasis Rust yang diklaim jauh lebih cepat dan hemat token daripada Playwright. Video diakhiri dengan ajakan untuk mempelajari teknologi browser agen yang lebih canggih pada konten berikutnya.

Community Posts

No posts yet. Be the first to write about this video!

Write about this video