Mengotomatiskan Pengujian UI dengan Gemini CLI, BrowserMCP, dan Playwright

1. Pengantar

Menguji aplikasi web bisa menjadi tugas yang membosankan. Pengujian UI tradisional sering kali terasa seperti pertarungan terus-menerus melawan kerapuhan. Anda menulis skrip yang rumit, mengelola pemilih CSS dan XPath yang tidak stabil, dan melakukan berbagai upaya hanya untuk memverifikasi alur pengguna yang sederhana.

Namun, bagaimana jika Anda bisa memberi tahu agen apa yang harus diuji dalam bahasa alami, dan agen tersebut... melakukannya?

Dalam codelab ini, kita akan mempelajari cara menggunakan Gemini CLI dan alat multimodal seperti BrowserMCP. Anda akan melihat cara membuat dan menjalankan pengujian UI otomatis menggunakan bahasa alami. Perhatikan bahwa codelab ini tidak memerlukan pengetahuan sebelumnya tentang framework dan alat pengujian UI.

Yang Akan Anda Pelajari

Apa itu Model Context Protocol (MCP) dan mengapa MCP mengubah segalanya.
Cara BrowserMCP memungkinkan agen AI mengontrol browser web.
Cara menjalankan pengujian UI otomatis dari Gemini CLI.
Memahami kemampuan agen dan keunggulannya.
Mengajari agen cara menggunakan Playwright dengan keahlian.
Memanfaatkan MCP dan keterampilan Google Chrome DevTools secara bersamaan.
Sekilas tentang Subagen Browser Antigravity.
Kasus penggunaan lain untuk kontrol browser.

Yang Akan Anda Lakukan

Siapkan lingkungan pengembangan Anda.
Pelajari aplikasi demo yang perlu diuji.
Gunakan Gemini CLI untuk berinteraksi dengan aplikasi melalui BrowserMCP.
Ajari agen Anda cara menggunakan Playwright dengan keahlian agen.

2. Prasyarat

Sebelum kita membahas hal-hal menarik, pastikan Anda memiliki semua yang diperlukan.

Codelab ini menggunakan Gemini CLI, alat MCP, keterampilan agen, dan aplikasi demo React.

Alat

Lab ini mengasumsikan bahwa Anda sudah memiliki:

Browser Chrome
Nodejs
Gemini CLI
Git

Untuk menggunakan Gemini CLI, Anda harus melakukan autentikasi dengan Google. Ada beberapa cara untuk melakukannya, tetapi sebaiknya gunakan opsi "Login dengan Google". Opsi ini dilengkapi dengan kuota gratis yang besar untuk penggunaan Gemini, dan tidak memerlukan project Google Cloud. Jika Anda menggunakan opsi ini saat mengikuti codelab, tidak akan ada biaya. (Jika sudah memiliki kunci Gemini API, Anda dapat menggunakannya.)

Petunjuk ini mengasumsikan Anda bekerja di lingkungan Linux (atau WSL) atau macOS. Jika Anda menggunakan Windows (seperti saya), Anda dapat mengikuti langkah-langkahnya menggunakan WSL.

(Perhatikan bahwa

BrowserMCP tidak akan berfungsi dari Google Cloud Shell

, karena hanya akan terhubung ke browser lokal yang berjalan di mesin yang sama.)

Menyiapkan Lingkungan Pengembangan

Saya telah membuat repositori demo di GitHub. Aplikasi ini mencakup contoh aplikasi yang dapat kita gunakan untuk pengujian UI. Lanjutkan dan clone dengan menjalankan perintah ini dari terminal lokal Anda:

git clone https://github.com/derailed-dash/agentic-ui-testing
cd agentic-ui-testing

Ada Makefile untuk memudahkan Anda menyiapkan lingkungan guna meluncurkan aplikasi demo. Mari kita jalankan untuk menginisialisasi lingkungan kita:

make install

# Or if you don't have make
npm install --prefix demo-app

3. Aplikasi Demo Kami

Aplikasi yang kita uji hari ini adalah The Dazbo Omni-Dash — dasbor bertema gelap futuristik untuk mengelola telemetri keamanan. (Ya, ini adalah vibe coding!)

Mengapa aplikasi ini?

Platform ini dibuat untuk menyediakan permukaan pengujian yang realistis dengan:

Autentikasi Tiruan: Alur login yang memerlukan kredensial tertentu.
Konten Dinamis: Kartu telemetri dan log keamanan yang menyimulasikan data real-time.
Status Interaktif: Menu navigasi dan input formulir yang berubah berdasarkan tindakan pengguna.
Teknologi Modern: Dibangun dengan React dan Vite untuk pengalaman yang cepat dan responsif.

Meluncurkan Aplikasi

Untuk memulai aplikasi, cukup jalankan:

make dev

# Or if you don't have make
npm run dev --prefix demo-app

Server pengembangan akan dimulai dengan sangat cepat, dan aplikasi akan tersedia di http://localhost:5173.

Kita cukup mengklik link untuk membuka aplikasi di browser. Biarkan proses ini berjalan di terminal Anda. Kita akan menjalankan perintah terminal berikutnya di sesi terminal terpisah.

4. Tantangan Pengujian UI

Pengujian UI tradisional terkenal sulit dilakukan dengan benar dan bahkan lebih sulit dipertahankan. Poin masalah umum meliputi:

"Ketidakstabilan" Pengujian: Pengujian yang lulus dalam satu menit dan gagal pada menit berikutnya karena masalah pengaturan waktu, kondisi persaingan, atau aset yang lambat dimuat.
Pemilih yang Rapuh: Mengandalkan struktur DOM tertentu (seperti div > div > button) yang rusak dengan sedikit penyesuaian UI, sehingga menyebabkan pemeliharaan skrip yang terus-menerus.
Kurva Pembelajaran yang Tinggi: Mengharuskan developer menguasai bahasa khusus domain yang kompleks dan keunikan khusus framework (Cypress, Selenium, Playwright) hanya untuk mengotomatiskan klik dasar.
Paritas Lingkungan: Bergelut dengan status aplikasi yang sulit direplikasi dan overhead pembersihan data pengujian.

Kita memerlukan cara pengujian yang berfokus pada maksud, bukan penerapan.

5. MCP Datang untuk Menyelamatkan

Model Context Protocol (MCP) adalah standar terbuka yang memungkinkan model dan agen AI berinteraksi dengan alat, API, dan data eksternal. Anggap saja sebagai adaptor universal yang memungkinkan model dan agen menemukan serta menjalankan alat yang dapat diaksesnya.

Biasanya, mengintegrasikan Model Bahasa Besar (LLM) dengan data dan alat eksternal mengharuskan developer menulis koneksi API khusus yang dikodekan secara permanen untuk setiap sumber data baru, sehingga menimbulkan masalah integrasi "M x N" yang tidak berkelanjutan di mana setiap model dan alat baru melipatgandakan beban pemeliharaan. Model Context Protocol (MCP) mengatasi masalah ini dengan menghilangkan kebutuhan untuk menulis kode tertentu guna mengatur kemampuan ini. Daripada membuat kode alur kerja eksekusi yang rumit secara eksplisit, developer dapat mengandalkan LLM untuk menafsirkan permintaan bahasa alami pengguna dan secara dinamis menentukan alat mana yang akan digunakan secara langsung.

Saat pengguna mengeluarkan perintah bahasa alami (seperti "Navigate to localhost:5173, login as ‘admin', and click the Submit button"), LLM akan menemukan kemampuan yang tersedia dan membuat permintaan terstruktur untuk memanggil alat tertentu. Klien MCP bertindak sebagai penerjemah, merutekan permintaan ini ke server MCP yang ditentukan, yang menjalankan tindakan atau mengambil data dan mengembalikan konteks ke model. Hal ini memungkinkan AI bertindak secara mandiri tanpa developer harus meng-hardcode jalur eksekusi tertentu.

Karena MCP menciptakan standar universal — sering digambarkan sebagai "USB-C untuk aplikasi AI" — MCP membuka kemampuan penggunaan ulang langsung yang sangat besar. Developer dapat membangun server MCP sekali, dan host AI yang kompatibel dengan MCP dapat langsung terhubung ke server tersebut, sehingga menghilangkan masalah integrasi M x N. Anda tidak perlu lagi membuat jembatan API kustom untuk setiap platform; sebagai gantinya, Anda dapat memanfaatkan ekosistem server MCP open source yang telah dibuat sebelumnya untuk layanan umum seperti GitHub, Slack, database, dan sebagainya; dengan langsung memasukkannya ke dalam alur kerja berbasis agen Anda. Arsitektur modular plug-and-play ini memastikan bahwa jika Anda beralih penyedia LLM atau mengupgrade alat Anda nanti, infrastruktur integrasi inti Anda tetap tidak berubah sama sekali.

6. Otomatisasi dengan BrowserMCP

Apa itu BrowserMCP?

Ini adalah alat pertama yang akan kita coba hari ini. BrowserMCP adalah server MCP yang memberi agen AI "mata" dan "tangan" yang dibutuhkan untuk berinteraksi dengan browser web. Singkatnya, alat ini meniru interaksi manusia dengan browser. Project ini bersifat open source dan Anda dapat melihat repositori GitHub-nya di sini. Lihat dokumentasi BrowserMCP utama di sini.

Berikut beberapa kemampuannya:

Dapat membuka URL.
Dapat memeriksa DOM.
Dapat mengklik tombol dan mengetik teks ke dalam formulir.
Anda dapat menarik lalu melepasnya.
Dapat membaca log konsol browser.
Cepat: otomatisasi terjadi secara lokal di komputer Anda.

Menginstal MCP Browser

Untuk menggunakan BrowserMCP, Anda harus melakukan dua hal:

Instal ekstensi BrowserMCP ke Chrome (atau browser berbasis Chromium lainnya).
Konfigurasi server MCP untuk agen Anda.

Untuk menginstal ekstensi, cukup ikuti petunjuk di sini. Proses ini hanya memerlukan waktu beberapa detik. Setelah diinstal, Anda mengklik "Hubungkan" di ekstensi untuk mengizinkan tab saat ini dikontrol oleh agen Anda. (Tentu saja, Anda ingin tab saat ini menjadi tab tempat aplikasi demo berjalan.)

Selanjutnya, kita perlu menambahkan server BrowserMCP yang sebenarnya ke klien Anda. Di Gemini CLI, hal ini sangat mudah dilakukan. Cukup instal ekstensi:

gemini extensions install https://github.com/derailed-dash/browsermcp-ext

Pengujian dengan BrowserMCP

Sekarang saatnya keajaiban. Pertama, luncurkan Gemini CLI (dengan menjalankan gemini) di sesi terminal baru. (Ingat bahwa aplikasi demo berjalan di sesi terminal awal kita.) Di dalam Gemini CLI, jalankan /mcp untuk memeriksa apakah sudah diinstal dengan benar. Anda akan melihat daftar alat, seperti ini:

Jika Anda belum memulai aplikasi demo sebelumnya, luncurkan sekarang:

make dev

Kita perlu membuka aplikasi di browser Chrome, dan menghubungkan ekstensi BrowserMCP di tab tersebut. Ikuti link dari perintah run. Kemudian, klik ikon ekstensi BrowserMCP dan klik "Connect".

Sekarang kita dapat menggunakan Gemini CLI untuk menjalankan pengujian. Salin dan tempel perintah ini ke Gemini CLI Anda:

Using BrowserMCP, connect to the application at http://localhost:5173. If the application is not showing a login screen, first logout. Then login as 'admin' with password 'password', and verify that the dashboard title says 'System Overview'. In the main dashboard, read the telemetry values shown, and present them back to me in a markdown table.

Gemini CLI mungkin akan memeriksa terlebih dahulu apakah aplikasi demo berjalan di port yang ditentukan. Kemudian, alat ini akan meminta Anda mengonfirmasi tindakan alat yang akan diambil:

Izinkan Gemini CLI menjalankan semua alat BrowserMCP untuk sesi ini. Kemudian, kembali ke browser, dan saksikan interaksi otomatis terjadi.

Beberapa hal yang perlu diperhatikan tentang perintah di atas:

Kita mulai dengan memberi tahu agen untuk logout, jika aplikasi sudah login. Perhatikan bahwa kita tidak perlu memberi tahu agen untuk mengklik teks tertentu seperti "Exit Gateway". Cukup cerdas untuk mengetahui apa yang harus diklik.
Setelah login dan merender halaman utama, agen akan mengambil informasi telemetri. Sekali lagi, kita tidak perlu memberi tahu agen untuk mencari di kartu tertentu atau mencocokkan kata tertentu. Jadi, jika kami memperpanjang atau mengubah informasi yang ditampilkan di halaman ini nanti, perintah ini akan tetap berfungsi dan output akan tetap dicatat dalam tabel markdown kami.

Keren, kan?

Kita sudah selesai menggunakan BrowserMCP untuk saat ini, jadi Putuskan koneksi di browser Anda.

7. Otomatisasi dengan Keterampilan dan Playwright

Batasan BrowserMCP

BrowserMCP memang bagus, tetapi memiliki beberapa batasan. Contoh:

Fitur ini memerlukan sesi browser yang ada, dengan ekstensi BrowserMCP terhubung. (Tidak memunculkan sesi baru.)
Fitur ini tidak mendukung browser non-Chromium.
Proses ini memerlukan proses browser terpisah yang berjalan di mesin yang sama dengan tempat server MCP berjalan.
Tidak dapat bekerja dengan sistem file lokal. Misalnya, aplikasi tidak dapat: membuat file lokal untuk menyimpan screenshot sebagai bukti, atau mendownload dan menyimpan file dari aplikasi web, seperti PDF yang dapat didownload.
Hal ini bersifat non-deterministik. Layanan ini akan mencoba melakukan tindakan yang Anda perintahkan, tetapi status lokal, seperti pop-up yang tidak terduga, dapat mengganggu interaksi.
Alat ini tidak mendukung operasi "tanpa antarmuka", yang berarti tidak dapat berjalan di pipeline CI/CD tanpa jendela browser yang sebenarnya.

Playwright

Playwright adalah alat yang jauh lebih canggih. Framework ini adalah framework pengujian dan otomatisasi browser open source yang sudah mapan. BrowserMCP tidak dapat melakukan banyak hal yang dapat dilakukan oleh BrowserMCP, termasuk semua poin yang saya sebutkan di atas.

Cara ini jauh lebih cocok untuk menjalankan skenario pengujian yang kompleks, andal, dan berulang. Selain itu, fitur ini sangat cocok untuk bekerja dengan sesi yang berjalan lama, atau bahkan menjalankan beberapa sesi independen secara paralel.

Namun, dengan kemampuan tambahan tersebut, kurva pembelajarannya menjadi jauh lebih curam.

Keterampilan

Untungnya, kita tidak perlu mempelajari cara menggunakan Playwright secara langsung. Sebagai gantinya, kita dapat menggunakan keterampilan agen.

Jadi, apa sebenarnya keterampilan agen itu? Anggap saja sebagai paket keahlian domain yang dikemas dengan ketat yang dapat Anda berikan kepada agen AI saat agen tersebut perlu melakukan sesuatu yang spesifik. Dokumen ini berisi petunjuk, praktik terbaik, dan terkadang bahkan skrip helper yang disesuaikan dengan tugas tertentu.

Berikut bagian yang benar-benar cerdas: pengungkapan progresif. Daripada memasukkan setiap kemungkinan dokumentasi API dan aturan framework pengujian ke dalam perintah sistem awal LLM — yang menghabiskan jendela konteks dan token Anda dengan cepat — agen hanya membaca keterampilan saat benar-benar membutuhkannya. Hal ini membuat konteks dasar pengukuran tetap sederhana dan efektif, dengan mengambil "cara" mendetail tepat pada waktunya. Dan ya, skill dapat menyertakan petunjuk tentang cara memanfaatkan server MCP tertentu untuk menyelesaikan pekerjaan.

Bayangkan seperti adegan dalam The Matrix: Agen melihat masalah, menyadari bahwa ia perlu mengetahui Playwright, mendownload keterampilan, dan tiba-tiba: "Saya tahu kung fu". Boom. Pakar instan.

Jika Anda ingin mengetahui lebih lanjut keterampilan, lihat artikel berikut:

Alasan Keterampilan Sangat Cocok untuk Playwright

Menggunakan skill di sini adalah pilihan yang tepat. Playwright sangat canggih, tetapi sintaksisnya bisa jadi rumit. Dengan memberikan keterampilan Playwright kepada agen, kita tidak perlu khawatir LLM berhalusinasi tentang sintaksis yang sudah usang atau menulis pemilih yang tidak stabil. Kami memberinya playbook yang dikurasi dan tepercaya tentang cara menggunakan Playwright dengan benar.

Saya akan menggunakan Playwright CLI dan keterampilan terkaitnya.

Dengan pendekatan ini, kita menginstal Playwright CLI secara lokal, lalu memberi agen kita pengetahuan yang diperlukan untuk menggunakannya. Untuk menghindari kebingungan: Saya tidak menginstal server MCP Playwright.

Menginstal

Pertama, mari kita instal Microsoft Playwright CLI open source. Jika Anda belum melakukannya, keluar dari Gemini CLI dengan mengetik /quit``. Kemudian, di terminal Anda:

# Pre-req: nodejs installed
npm install -g @playwright/cli@latest # Install Playwright CLI globally
npm install @playwright/test # Install Playwright test framework

npx playwright install-deps # Install dependencies
npx playwright install chromium chrome # Install browser binaries in Linux / WSL

Sekarang, mari kita tambahkan skill. Perintah ini akan mendownload subfolder skill langsung dari GitHub ke folder skill Gemini kita:

mkdir -p ~/.gemini/skills
npx degit microsoft/playwright-cli/skills/playwright-cli ~/.gemini/skills/playwright-cli

Sekarang kita dapat mengujinya.

# Launch Playwright CLI with visible browser
playwright-cli open https://playwright.dev --headed

Tindakan ini akan memunculkan sesi browser, yang dibuka ke URL yang ditentukan.

Saya juga ingin Gemini dapat menggunakan Playwright dalam mode "berkepala", yaitu dengan UI yang terlihat. Namun, skill tersebut tidak memberi tahu Gemini cara melakukannya. Jadi, saya telah menambahkan baris ini ke ~/.gemini/skills/playwright-cli/SKILL.md di bagian Core:

# Add the following under the "playwright-cli open" command

# Run in headed mode so we can see the browser
playwright-cli open https://playwright.dev --headed

Pengujian dengan Playwright

Seperti sebelumnya, kita perlu meluncurkan aplikasi (jika belum berjalan). Lakukan ini dari sesi terminal awal:

make dev

Kemudian, di sesi terminal lainnya, mari nonaktifkan BrowserMCP untuk sementara agar agen tidak bingung tentang alat mana yang harus digunakan. Luncurkan kembali Gemini CLI, lalu jalankan:

/mcp disable browsermcp

Sekarang kita akan meminta Gemini untuk membuka aplikasi kita dengan Playwright. Namun, tidak seperti BrowserMCP, kita tidak perlu membuka browser terlebih dahulu. Playwright akan melakukannya untuk kita dengan proses lokal.

Masukkan perintah ini ke Gemini CLI:

Using Playwright, connect to the application at http://localhost:5173. Then login as 'admin' with password 'password', and verify that the dashboard title says 'System Overview'. Take a screenshot of the dashboard and save it to output/dashboard.png. In the main dashboard, read the telemetry values shown, and present them back to me in a markdown table.

(Seperti biasa, Gemini CLI akan meminta izin sebelum menjalankan alat apa pun.)

Apa yang berbeda di sini?

Kita tidak perlu memulai browser terlebih dahulu.
Kita tidak perlu memulai dan menghubungkan ekstensi browser.
Kita tidak perlu memberi tahu agen untuk logout terlebih dahulu. Pengujian di-instansiasi dari sesi "bersih".
Kita dapat mengambil screenshot dan menyimpannya sebagai file lokal.

Tak lama setelah itu, Anda akan melihat file dashboard.png di folder output.

Perhatikan bahwa Anda akan melihat panggilan alat yang dieksekusi di Gemini CLI, tetapi Anda tidak akan melihat UI browser. Hal ini karena Playwright berjalan dalam "mode headless" secara default.

Namun, jika Anda menjalankan ulang dengan perintah yang telah diubah ini, Anda juga akan dapat melihat UI:

Using Playwright, connect to the application at http://localhost:5173 in **headed** mode, and keep the browser open when you're done. Login as 'admin' with password 'password', and verify that the dashboard title says 'System Overview'. Take a screenshot of the dashboard and save it to output/dashboard.png. In the main dashboard, read the telemetry values shown and record them. Then wait 3 seconds, read them again. Now present the data back to me in a markdown table.

Tak lama kemudian, output Gemini CLI akan terlihat seperti ini:

Keren, bukan?

8. Tapi Tunggu, Ada Juga MCP Chrome DevTools!

Chrome DevTools adalah serangkaian alat developer web yang terintegrasi ke browser Chrome, yang ditujukan untuk pengembangan dan proses debug web. Sudah ada sejak lama. Anda tahu... konsol yang dapat Anda gunakan saat membuka Alat Lainnya -> Alat Developer di Chrome.

Namun, sekarang ia memiliki server MCP sendiri, yang tidak ada saat mempertimbangkan otomatisasi browser dari Gemini CLI tahun lalu. Namun kini, Anda dapat melakukan semua hal yang dapat Anda lakukan dengan BrowserMCP dan sebagian besar hal yang dapat Anda lakukan dengan Playwright, tanpa menginstal apa pun ke browser, dan tanpa menginstal CLI lokal.

Ayo kita coba!

Saat ini, kami telah memvalidasi bahwa alat ini berfungsi di Google Cloud Shell. Jadi, untuk bagian ini, mari kita gunakan Google Cloud Shell di Konsol Google Cloud.

Buka konsol dan buka sesi Cloud Shell. Setelah itu:

# Clone the sample app - like we did before
git clone https://github.com/derailed-dash/agentic-ui-testing
cd agentic-ui-testing

# Build the application - like we did before
make install

# Install the Chrome DevTools MCP server Gemini CLI Extension
gemini extensions install https://github.com/ChromeDevTools/chrome-devtools-mcp

Sekarang kita perlu menginstal file yang dapat dieksekusi Chrome ke Cloud Shell:

# Get the latest executable for Ubuntu
wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb

# Install it
sudo apt install ./google-chrome-stable_current_amd64.deb -y

# Check it and get the executable path
which google-chrome

# Cleanup
rm google-chrome-stable_current_amd64.deb

Satu langkah terakhir: kita perlu memberi tahu server MCP Chrome DevTools tempat untuk menemukan file yang dapat dieksekusi Chrome. Kita dapat melakukannya dengan menyetel opsi executable-path di konfigurasi server MCP dan menjadikannya headless. Kita melakukannya dengan mengedit file ~/.gemini/extensions/chrome-devtools-mcp/gemini-extension.json:

{
  "name": "chrome-devtools-mcp",
  "version": "latest",
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--executable-path=/usr/bin/google-chrome",
        "--headless"
      ]
    }
  }
}

Bagus! Kita sudah siap. Luncurkan gemini dari Cloud Shell, dan periksa apakah server MCP berjalan, dengan menggunakan perintah /mcp list, seperti sebelumnya.

Terakhir, kita siap mengujinya dengan perintah.

Mari kita lakukan dengan cara yang sedikit berbeda. Kali ini, kita akan memberi tahu Gemini CLI untuk meluncurkan aplikasi demo dan terhubung ke aplikasi tersebut:

Launch my demo application with `make dev`. Then, using Chrome DevTools MCP, connect to the application at  the exposed localhost URL. Login as 'admin' with password 'password', and verify that the dashboard title says 'System Overview'. Take a screenshot of the dashboard and save it to output/dashboard.png. In the main dashboard, read the telemetry values shown, and present them back to me in a markdown table.

Seperti biasa, Anda akan diminta untuk mengizinkan server MCP berjalan. Namun, Anda juga akan melihat bahwa aplikasi ini mencoba mengaktifkan skill. Benar: ekstensi ini berisi server MCP dan keahlian yang memandu agen tentang cara terbaik menggunakan server MCP. Bagus!

Beberapa detik kemudian, Gemini CLI akan menampilkan hasil dalam tabel, dan akan menyimpan screenshot. Anda dapat mendownload screenshot dari Cloud Shell untuk memeriksa apakah tampilannya sudah benar.

9. Anda Dapat Melakukannya di Antigravity Out of the Box!

Google Antigravity menyertakan Subagen Browser, yang memberikan kemampuan serupa dengan Playwright CLI. Saat Anda meminta Gemini di Antigravity untuk membuka URL secara interaktif, sub-agen ini akan otomatis dibuka.

Sub-agen ini mengambil sasaran tingkat tinggi Anda (misalnya, "Periksa apakah formulir login berfungsi"), menganalisis tata letak halaman secara visual melalui screenshot dan DOM, serta mengetahui sendiri klik dan penekanan tombol. Pada dasarnya, AI multimodal visual ini menjelajahi web seperti yang dilakukan manusia. Dan hebatnya? Agen ini otomatis merekam video dan mengambil screenshot dari semua yang dilakukannya, lalu menyimpannya langsung ke ruang kerja lokal Anda sebagai bukti visual atas apa yang telah dicapainya. Antigravity menyebut bukti visual ini sebagai Artefak.

Catatan untuk pengguna WSL: Membuat Agen Browser berfungsi di Antigravity agak merepotkan. Saya telah berhasil membuatnya berfungsi, tetapi saya mendapati sub-agen tidak konsisten dan tidak dapat diandalkan dalam lingkungan ini. Jadi, itulah salah satu alasan saya menyukai Playwright CLI.

10. Kasus Penggunaan Lainnya untuk Otomatisasi Browser

Otomatisasi browser bukan hanya tentang memastikan tombol login Anda berfungsi sebelum deployment pada Jumat sore. Setelah Anda menyadari bahwa Anda dapat menghubungkan LLM langsung ke browser, berbagai project buatan sendiri yang berorientasi pada agen akan terbuka.

Jika Anda membangun agen AI Anda sendiri, berikut beberapa cara Anda dapat menggunakan alat seperti BrowserMCP atau Playwright CLI untuk melakukan tugas berat:

Asisten Riset Pribadi: Bayangkan Anda mengarahkan agen ke URL tertentu dan memintanya untuk meneliti suatu topik, tetapi situs tersebut memerlukan login dan navigasi menu yang kompleks. Daripada menulis web scraper kustom yang akan rusak minggu depan, Anda cukup memberi tahu agen untuk login, membuka data, dan meringkasnya untuk Anda.
Integrator "Swivel-Chair": Kita semua memiliki sistem intranet lama yang tidak memiliki API. Anda pasti tahu — saat Anda harus menyalin data secara manual dari Sistem A, dan menempelkannya ke dalam formulir di Sistem B. Agen dengan otomatisasi browser dapat bertindak sebagai penghubung universal, membaca layar sistem lama dan mengisi formulir di sistem baru.
Triase dan Perbaikan Otomatis: Mendapatkan pemberitahuan P1 dari sistem pemantauan Anda pada pukul 03.00? Agen Anda dapat membuka URL dasbor tertentu secara otomatis, membaca grafik atau log (menggunakan kemampuan visi multimodalnya), dan memposting ringkasan langsung ke saluran Slack Anda, sehingga menghemat waktu berharga Anda selama insiden.

Keunggulan pendekatan ini adalah Anda tidak lagi dibatasi oleh API yang tersedia. Jika manusia dapat melakukannya di browser, agen Anda juga dapat melakukannya.

11. Kesimpulan

Selamat! Anda baru saja membuat dan menjalankan pengujian UI otomatis yang andal hanya dengan memberi tahu agen AI apa yang ingin Anda lakukan dalam bahasa Inggris sederhana. Tidak ada pemilih CSS yang rentan, tidak ada skrip penyiapan yang rumit.

Anda telah mempelajari:

Pengujian UI tidak harus menyakitkan: Dengan berfokus pada maksud pengujian, bukan implementasi DOM yang rapuh, kita dapat mengurangi overhead pemeliharaan secara signifikan.
Model Context Protocol (MCP) memberi agen Anda akses universal plug-and-play ke alat, data, dan lingkungan.
BrowserMCP adalah alat luar biasa untuk menghadirkan kemampuan agentik ke sesi Chrome lokal Anda yang ada.
Keterampilan dan Playwright CLI membuka tingkat baru pengujian otomatisasi yang dapat diulang dan deterministik — semuanya didukung oleh pengungkapan progresif.
Subagen Browser Antigravity melangkah lebih jauh dengan memperkenalkan navigasi multimodal yang otonom dan perekaman artefak langsung.

Sekarang, lanjutkan dan otomatiskan hal-hal yang membosankan.

Link Bermanfaat

Jika Anda ingin mempelajari lebih dalam alat dan konsep yang kita bahas hari ini, lihat referensi berikut:

Kode Repo

Repositori GitHub agentic-ui-testing - Beri bintang pada repositori jika Anda merasa codelab ini bermanfaat.

Alat & Framework Inti

Repositori GitHub BrowserMCP
Dokumentasi BrowserMCP
Ekstensi Gemini CLI BrowserMCP - Tambahkan bintang ke repo jika Anda merasa codelab ini bermanfaat.
Playwright
Google AI Studio
Chrome DevTools
MCP Chrome DevTools

Konsep & Keterampilan Agentic

Lainnya