Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Pengujian UI Otomatis dengan Antigravity (AGY) CLI, BrowserMCP, Playwright, dan Agen Browser

1. Pengantar

Revolusi AI agentik mengubah cara kita membangun software, sehingga seluruh prosesnya terasa sangat keren, menarik, dan mudah diakses. Tugas dan proyek yang sebelumnya membutuhkan waktu berbulan-bulan bagi developer untuk menyelesaikannya kini dapat diselesaikan dalam satu sesi menggunakan alat agentik.

Salah satu area yang siap untuk transformasi berbasis agen ini adalah pengujian aplikasi web. Secara tradisional, pengujian aplikasi web merupakan tugas yang membosankan dan perjuangan yang terus-menerus melawan kerapuhan. Namun, bagaimana jika Anda dapat melewati kompleksitas tersebut sepenuhnya? Bagaimana jika Anda dapat dengan mudah memberi tahu agen apa yang harus diuji dalam bahasa alami yang sederhana, dan membiarkan agen tersebut memikirkan cara menjalankannya?

Dalam codelab ini, kita akan mempelajari cara menggunakan Antigravity CLI bersama dengan kemampuan agen, dan alat MCP multimodal seperti BrowserMCP. Anda akan melihat cara membuat dan menjalankan pengujian UI otomatis menggunakan bahasa alami, yang menunjukkan cara alat agentic menangani tugas yang kompleks dan memberi Anda kemampuan super sebagai builder.

Yang terpenting, meskipun codelab ini berfokus pada kasus penggunaan spesifik dari otomatisasi UI dan kontrol jarak jauh browser, prinsip-prinsip yang mendasarinya dan berbagai kemungkinan yang ditawarkannya adalah hal yang benar-benar penting. Dengan mengajari agen cara menggunakan CLI lokal dan server MCP, kita dapat mendelegasikan alur kerja kompleks yang tidak dapat kita tangani sendiri karena kurangnya waktu atau keahlian khusus.

Yang Akan Anda Pelajari

Apa itu Antigravity CLI dan bagaimana kecocokannya dengan ekosistem Antigravity.
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 Antigravity CLI.
Memahami kemampuan agen dan keunggulannya.
Mengajari agen cara menggunakan Playwright dengan keahlian.
Memahami agen browser bawaan Antigravity.
Kasus penggunaan lain untuk kontrol browser.

Yang Akan Anda Lakukan

Codelab ini menggunakan Antigravity CLI, alat MCP, keahlian agen, dan aplikasi demo React.

Anda akan:

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

2. Ekosistem Antigravity

Pada Mei 2026, Google merilis rangkaian Antigravity baru. Ini adalah perombakan besar Antigravity, dan dibagi menjadi empat produk berikut:

Antigravity 2.0, yang kini menjadi lingkungan "pembangun" khusus yang mengutamakan agen di desktop Anda. Khususnya, Antigravity 2.0 tidak menyertakan IDE. Sebagai gantinya, kita hanya berinteraksi dengan pengelola agen. Area ini bertujuan untuk mengantarkan era "ide menjadi produk" menggunakan agen, tanpa perlu mengkhawatirkan kode. Banyak pembangun yang tidak memiliki latar belakang coding akan menyukainya.
Antigravity IDE, yang memberi kita lingkungan coding ala VS Code yang lebih familiar, didukung oleh harness agen Antigravity. Di sini kita dapat melakukan pengembangan yang dibantu agen, dan kita selalu melihat kodenya. Coder akan merasa nyaman di sini.
Antigravity SDK, yang memberi Anda harness dan alat yang mendukung Antigravity, tetapi diekspos sebagai Python Agent SDK. Dengan mengimpor dari google.antigravity, kita dapat memanfaatkan kemampuan Antigravity secara terprogram.
Antigravity CLI, yang merupakan evolusi berikutnya dari Gemini CLI yang sangat luar biasa. Lingkungan ini tetap mengutamakan terminal untuk berinteraksi dengan model Gemini. Namun, Antigravity CLI baru dibuat di Go, dan Anda dapat melihatnya; CLI ini terasa jauh lebih cepat daripada Gemini CLI, baik saat startup maupun dalam penggunaan umum. Agent Harness ini memanfaatkan "harness" agen yang sama dengan Antigravity 2.0 dan IDE, sehingga memungkinkan setelan dan konfigurasi umum di seluruh rangkaian Antigravity.

Meskipun lab ini berfokus pada penggunaan Antigravity CLI, semua hal dalam lab ini juga dapat dilakukan dengan Agy IDE atau Agy 2.0.

3. Prasyarat

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

Alat

Lab ini mengasumsikan bahwa Anda sudah memiliki:

Browser Chrome
Node.js
Antigravity CLI
Git

Untuk menggunakan Antigravity CLI, Anda harus melakukan autentikasi dengan Google. Saat Anda meluncurkan agy untuk pertama kalinya, aplikasi ini akan otomatis meminta Anda untuk Login dengan Google melalui browser web default Anda. Opsi ini dilengkapi dengan kuota gratis yang besar untuk penggunaan Gemini dan tidak memerlukan project Google Cloud. Jika memiliki kunci API Gemini atau project Google Cloud, Anda juga dapat mengonfigurasi ini.

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 eksekusi untuk menginisialisasi lingkungan kita:

make install

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

4. 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 platform 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: Dibuat 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.

5. Tantangan Pengujian UI

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

Kurva Pembelajaran yang Tinggi: Mengharuskan developer menginvestasikan banyak waktu untuk menguasai bahasa khusus domain yang kompleks dan keunikan khusus framework (seperti Selenium atau Playwright) hanya untuk mengotomatiskan interaksi dasar.
Pemilih dan Otomatisasi yang Rapuh: Skrip tradisional mengandalkan struktur DOM yang kaku (seperti div > div > button) atau label teks tertentu. Apa yang terjadi jika Anda mengganti nama tombol "logout" menjadi "keluar dari akun"? Atau memindahkan tombol ke menu yang sama sekali berbeda? Atau mengubah struktur HTML Anda? Alat pengujian tradisional akan rusak saat Anda melakukan hal tersebut, sehingga menyebabkan pemeliharaan skrip yang terus-menerus.
Menguji "Ketidakstabilan": Pengujian yang berhasil dalam satu menit dan gagal pada menit berikutnya karena masalah pengaturan waktu, kondisi persaingan, atau aset yang lambat dimuat.
Paritas Lingkungan: Bergelut dengan status aplikasi yang sulit direplikasi dan overhead pembersihan data pengujian.

Maksud vs. Penerapan

Untuk mengatasi masalah ini, kita memerlukan cara pengujian yang berfokus pada maksud, bukan implementasi.

Dengan memanfaatkan alat AI agentik, kita dapat membuat otomatisasi yang dapat diulang dan sepenuhnya terisolasi dari penyesuaian UI kecil dan perubahan struktural. Alih-alih mengodekan nama, label, atau hierarki objek yang tepat, agen menjalankan tindakan berdasarkan maksud bahasa alami pengguna. Jika tombol berpindah atau labelnya sedikit berubah, kemampuan multimodal agen memungkinkannya menemukan elemen dan menyelesaikan tugas dengan berhasil.

6. 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.

Secara tradisional, mengintegrasikan Model Bahasa Besar (LLM) dengan data dan alat eksternal mengharuskan developer menulis koneksi API khusus yang di-hard code 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) memecahkan masalah ini dengan menghilangkan kebutuhan untuk menulis kode tertentu guna mengatur kemampuan ini. Alih-alih mengodekan alur kerja eksekusi yang kompleks 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 "Buka localhost:5173, login sebagai 'admin', dan klik tombol Kirim"), LLM akan menemukan kemampuan yang tersedia dan membuat permintaan terstruktur untuk memanggil alat tertentu. Klien MCP bertindak sebagai penerjemah, yang 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 — yang sering dideskripsikan 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 membangun 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.

7. 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 diperlukan 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 secara manual dalam konfigurasi Antigravity 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 akan mengonfigurasi server MCP sebenarnya di Antigravity. Kita melakukannya dengan menambahkan definisi server browsermcp ke file mcp_config.json global.

Buat atau edit file ~/.gemini/config/mcp_config.json dan tambahkan konfigurasi berikut:

{
  "mcpServers": {
    "browsermcp": {
      "command": "npx",
      "args": [
        "-y",
        "@browsermcp/mcp@latest"
      ]
    }
  }
}

Untuk mengetahui panduan mendetail tentang cara menyiapkan server dan keahlian MCP di ekosistem Antigravity, lihat referensi berikut:

Pengujian dengan BrowserMCP

Sekarang saatnya keajaiban. Pertama, luncurkan Antigravity CLI (dengan menjalankan agy) di sesi terminal baru. (Ingat bahwa aplikasi demo berjalan di sesi terminal awal kita.) Di dalam TUI interaktif, ketik /mcp untuk memverifikasi daftar alat aktif dan memastikan browsermcp tersedia.

Jika Anda belum memulai aplikasi demo sebelumnya, luncurkan sekarang:

make dev

Jika belum melakukannya, Anda harus 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 Agy CLI untuk menjalankan pengujian. Salin dan tempel perintah ini ke CLI:

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.

CLI mungkin akan memeriksa terlebih dahulu apakah aplikasi demo berjalan di port yang ditentukan. Kemudian, Anda akan diminta untuk mengonfirmasi tindakan alat yang akan diambil.

Izinkan 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 "Keluar dari Gateway". Cukup cerdas untuk mengetahui apa yang harus diklik.
Setelah login dan merender halaman utama, agen akan merekam informasi telemetri. Sekali lagi, kita tidak perlu memberi tahu agen untuk mencari di petak tertentu atau mencocokkan kata-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 koneksinya di browser Anda.

8. 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.
Hal ini memerlukan proses browser terpisah yang berjalan di mesin yang sama dengan tempat server MCP berjalan.
Aplikasi ini tidak dapat berfungsi 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.
Tindakan ini non-deterministik. Tindakan 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.

Fitur ini jauh lebih cocok untuk menjalankan skenario pengujian yang kompleks, andal, dan dapat diulang. 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.

Keahlian

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 dokumen API dan aturan framework pengujian ke dalam perintah sistem awal LLM — yang menghabiskan jendela konteks dan token Anda dengan cepat — agen hanya membaca skill saat benar-benar membutuhkannya. Hal ini membuat konteks dasar pengukuran tetap sederhana dan efektif, dengan mengambil "cara" mendetail tepat pada waktunya. Ya, skill dapat mencakup petunjuk tentang cara memanfaatkan server MCP tertentu untuk menyelesaikan tugas.

Bayangkan seperti adegan dalam film 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 rumit. Dengan memberikan skill Playwright kepada agen, kita tidak perlu khawatir LLM berhalusinasi sintaksis yang sudah usang atau menulis pemilih yang rapuh. Kita memberinya panduan yang dikurasi dan berwibawa tentang cara menggunakan Playwright dengan benar.

Saya akan menggunakan Playwright CLI dan keterampilan terkait.

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

Menginstal

Pertama, mari kita instal Microsoft Playwright CLI open source. Jika Anda belum melakukannya, keluar dari CLI interaktif 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 Antigravity CLI (agy). Kita dapat menonaktifkan server browsermcp untuk sementara secara langsung melalui TUI:

Ketik /mcp di dalam kotak perintah untuk membuka panel pengelolaan MCP.
Gunakan tombol panah (atas/bawah) untuk memilih browsermcp, lalu tekan Enter/Return.
Pindahkan ke kanan untuk memilih Nonaktifkan, lalu tekan Enter untuk menonaktifkannya.

Sekarang kita akan meminta agen 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 Agy 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, 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 Agy 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.

Output Agy CLI akan terlihat seperti ini:

Keren, bukan?

9. Agen Browser Bawaan Antigravity

Google Antigravity dilengkapi dengan agen browser bawaannya sendiri ( Subagen Browser) yang menyediakan otomatisasi browser langsung, tanpa mengharuskan Anda menginstal alat terpisah seperti Playwright CLI.

Cara Kerjanya

Untuk mengontrol browser Anda, agen browser bawaan berfungsi langsung melalui Protokol Chrome DevTools (CDP), sehingga tidak memerlukan ekstensi browser atau plugin perantara di Antigravity 2.0 dan IDE.

Saat diluncurkan, Antigravity terhubung ke instance Chrome Anda melalui port pen-debugan lokal melalui koneksi WebSocket. Petunjuk tingkat tinggi dari agen diterjemahkan langsung ke dalam perintah CDP tingkat rendah yang:

Memanipulasi DOM halaman (seperti mengklik elemen atau memasukkan teks).
Mengontrol status browser dan memicu navigasi.
Merekam frame real-time dan data visual.

Dengan menggabungkan kontrol CDP langsung dengan analisis visual multimodal, subagen mengambil sasaran tingkat tinggi Anda (misalnya, "verifikasi bahwa dasbor menampilkan nilai telemetri yang benar"), menganalisis halaman secara visual untuk mengetahui tindakan yang diperlukan, dan mengeksekusinya sendiri. Subagen juga secara otomatis merekam video dan mengambil screenshot tindakannya, lalu menyimpannya langsung ke ruang kerja Anda sebagai Artefak untuk berfungsi sebagai bukti visual eksekusi pengujian.

Ketersediaan Alat

Agen browser bawaan belum didukung di Antigravity CLI (Agy CLI) yang mengutamakan terminal. Namun, Anda dapat menggunakannya langsung di Antigravity IDE dan Antigravity 2.0 sekarang. Semoga dukungan untuk agen browser akan hadir di Agy CLI dalam rilis mendatang.

Catatan untuk pengguna WSL: Mengaktifkan Agen Browser agar berfungsi di Antigravity di WSL kini jauh lebih mudah daripada sebelumnya. Daripada berurusan dengan perutean jaringan dan penerusan port yang rumit, Anda cukup mengaktifkan mode jaringan "bermirror" dalam konfigurasi WSL. Untuk mengetahui panduan langkah demi langkah yang lengkap, lihat panduan Mengatasi Hambatan WSL dengan Google Antigravity: Agy 2.0 dan Agy IDE Edition.

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 meriset 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 merangkumnya 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 formulir di Sistem B. Agen dengan otomatisasi browser dapat bertindak sebagai perekat 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 beban 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 otonom dan perekaman artefak langsung tanpa perlu konfigurasi.

Sekarang, mulailah mengotomatiskan tugas-tugas yang membosankan.

12. 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 - Tambahkan bintang ke repositori jika Anda merasa codelab ini bermanfaat.

Alat & Framework Inti

Konsep & Keterampilan Agentic

Lainnya