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 mendapati diri 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.
Sekilas tentang Sub-Agen 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
Gemini CLI (yang bergantung pada nodejs)
Git

Petunjuk ini mengasumsikan bahwa 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.)

Buat Project Google Cloud

Jika sudah memiliki kunci Gemini API, Anda dapat menggunakannya dan melewati langkah ini.

Jika tidak, Anda memerlukan Project Google Cloud untuk mengikuti langkah-langkahnya. Kita tidak akan men-deploy layanan Google Cloud apa pun, tetapi Anda memerlukan project untuk mengaitkan kunci Gemini API. (Anda memerlukan kunci untuk menggunakan Gemini.)

Jika sudah terbiasa dengan Google Cloud, Anda dapat membuat project baru di sini. Atau, Anda dapat membuat project Google Cloud langsung dari dalam Google AI Studio.

Membuat Kunci Gemini API secara Gratis

Sekarang Anda akan membuat kunci Gemini API di Google AI Studio. Klik "Dapatkan Kunci API".

Anda akan melihat sesuatu seperti ini:

Di sinilah kunci Anda yang ada akan dicantumkan, jika Anda memilikinya. Atau untuk membuat kunci baru, klik "Buat Kunci API".

Di sini, Anda dapat memilih project Google Cloud yang sudah ada, atau melanjutkan dan membuat project baru. Di sini saya telah membuat project baru bernama agentic-ui-demo:

Pada tahap ini, kita memiliki project dan kunci Gemini API terkait. Kami belum mengaktifkan penagihan, jadi kami hanya dapat menggunakan kuota gratis yang besar. Namun, jika Anda menginginkan lebih banyak kuota, Anda dapat melanjutkan dan mengaktifkan penagihan dengan mengklik "Siapkan penagihan".

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

Selanjutnya, buat salinan file .env.template contoh, yang disebut .env. Anda dapat melakukannya di editor, atau cukup jalankan perintah ini:

cp .env.template .env

Perbarui file .env ini dengan kunci API Anda sendiri. (Ingat: jangan pernah check-in file .env Anda dengan informasi seperti kunci API Anda.) Cara termudah untuk melakukannya adalah dengan membukanya di editor Anda.

Sekarang, muat variabel lingkungan:

source .env

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

make install

3. Aplikasi Demo Kami

Aplikasi yang kita uji hari ini adalah The Dazbo Omni-Dash — dasbor bertema gelap futuristik untuk mengelola telemetri keamanan. (Ya, itu 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

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 karena 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 Membantu

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

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. Ekstensi ini bersifat open source dan Anda dapat melihat repositori GitHub 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 dapat 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 konfigurasi MCP ke klien:

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

Di mana Anda mengonfigurasi ini? Yah, itu tergantung pada agen Anda. Misalnya, di Gemini CLI: ~/.gemini/settings.json. Hasil penelusuran akan terlihat seperti ini:

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 "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 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 Hentikan koneksi di browser Anda.

7. Otomatisasi dengan Keterampilan dan Playwright

Batasan BrowserMCP

BrowserMCP sangat 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 bukti screenshot, atau mendownload dan menyimpan file dari aplikasi web, seperti PDF yang dapat didownload.
Ini bersifat non-deterministik. LLM 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 alat ini 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.

Ini jauh lebih cocok untuk menjalankan skenario pengujian yang kompleks, andal, dan berulang. Selain itu, fitur ini sangat cocok untuk 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 ini 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 keterampilan saat benar-benar membutuhkannya. Hal ini membuat konteks dasar pengukuran tetap sederhana dan efektif, dengan mengambil "cara" mendetail tepat pada waktunya. Ya, skill dapat menyertakan petunjuk tentang cara memanfaatkan server MCP tertentu untuk menyelesaikan tugas.

Bayangkan seperti adegan dalam The Matrix: Agen melihat masalah, menyadari bahwa dia 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 kurasi yang 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 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 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, 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 present them back to me in a markdown table.

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

Keren, bukan?

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

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

Subagen ini mengambil sasaran tingkat tinggi Anda (misalnya, "Periksa apakah formulir login berfungsi"), menganalisis tata letak halaman secara visual melalui screenshot dan DOM, serta menentukan 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 subagen tidak konsisten dan tidak dapat diandalkan dalam lingkungan ini. Jadi, itulah salah satu alasan saya menyukai Playwright CLI.

9. 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 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 dalam 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.

10. 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 yang 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 plug-and-play universal ke alat, data, dan lingkungan.
BrowserMCP adalah alat luar biasa untuk menghadirkan kemampuan agentik ke sesi Chrome lokal Anda yang sudah 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

Alat & Framework Inti

Konsep & Keterampilan Agentic

Lainnya

Bekerja dengan Google Antigravity di WSL