Vibetest: Otomatisasi QA dengan Browser-Use MCP

Siap membasmi bug-bug website yang mengganggu dengan Vibetest-use MCP? Permata sumber terbuka ini, yang didukung oleh Browser-Use, memungkinkan Anda mengerahkan agen AI untuk merayapi situs Anda, menangkap error 404, tombol mati, dan gangguan UI dalam waktu kurang dari satu menit. Saya menemukannya di GitHub, dan ini benar-benar mengubah permainan untuk pengujian otomatis. Hanya dengan satu perintah, Anda dapat menjalankan beberapa agen untuk menguji beban situs Anda—lokal atau langsung. Dalam tutorial ini, saya akan menunjukkan cara menyiapkan Vibetest-use MCP, menjalankan pengujian di situs lokal atau langsung, dan membuat proses QA (penjaminan mutu) Anda menjadi mudah. Mari kita basmi bug-bug itu!

💡

Bekerja dengan API atau mendokumentasikan proyek? Gunakan APIdog untuk merancang, menguji, dan berbagi dokumen API dengan mudah—sempurna untuk alur kerja Vibetest-use MCP Anda!

button

Mengapa Vibetest-use MCP Adalah Pahlawan Super QA

Vibetest-use MCP adalah alat bertenaga Browser-Use yang mengotomatiskan pengujian QA dengan mengerahkan agen AI untuk merayapi situs web dan menandai masalah seperti tautan rusak, tombol tidak responsif, atau kesalahan UI. Dibangun di atas Model Context Protocol (MCP), ia berintegrasi dengan Browser-Use untuk mengontrol browser (Chrome, Firefox, dll.) melalui Playwright, memastikan pengujian yang menyeluruh. Repositori GitHub menyoroti kemampuannya untuk menguji URL apa pun—situs langsung seperti https://example.com atau pengaturan lokal seperti localhost:3000—dengan jumlah agen yang dapat dikonfigurasi (misalnya, 3, 5, atau 10) untuk pemindaian yang lebih mendalam. Dari menguji situs dev hingga aplikasi produksi, Vibetest-use MCP membuat QA menjadi sangat mudah.

Menyiapkan Vibetest-use MCP

Mari kita jalankan Vibetest-use MCP. Ini ramah bagi pemula, dan saya akan membuatnya jelas!

1. Kloning Repositori dan Siapkan Lingkungan Virtual:

Kloning repositori dan siapkan lingkungan Python:

git clone https://github.com/browser-use/vibetest-use.git
cd vibetest-use
uv venv
source .venv/bin/activate  # macOS/Linux
.venv\Scripts\activate     # Windows
uv pip install -e .

Ini menginstal dependensi dan menyiapkan lingkungan server MCP.

2. Konfigurasi Variabel Lingkungan Anda:

Vibetest-use MCP memerlukan kunci API Google untuk beberapa fitur. Ekspor atau tambahkan ke .env:

export GOOGLE_API_KEY="your_google_api_key_here"

Atau, buat .env:

GOOGLE_API_KEY=your_google_api_key_here

Dapatkan kunci dari console.cloud.google.com.

3. Jalankan Server MCP:

Mulai server:

.venv/bin/vibetest-mcp

Ini meluncurkan server MCP, siap menerima perintah pengujian.

Saya menyiapkannya dalam 10 menit—cepat dan tanpa kesulitan!

Contoh Kasus Penggunaan untuk Vibetest-use MCP

Siap menguji dengan Vibetest-use MCP? Berikut tiga cara untuk menangkap bug dengan cepat!

1. Menguji Situs Web Langsung dengan Beberapa Agen:

Uji situs langsung seperti https://example.com dengan 6 agen:

vibetest my website with 6 agents: https://example.com

Lima agen Browser-Code merayapi secara bersamaan, memeriksa tautan rusak, bug UI, atau masalah aksesibilitas. Harapkan output seperti: “404 di /page-not-found, tombol tidak responsif di /submit.”

2. Menguji Situs Pengembangan Localhost:

Uji server dev lokal Anda (misalnya, localhost:3000):

run vibetest on localhost:3000

Ini menangkap masalah sejak dini, seperti div yang tidak sejajar yang saya temukan di situs uji!

3. Pengujian Headless dengan Jumlah Agen Kustom:

Untuk CI/CD, jalankan headless dengan 10 agen:

run a headless vibetest on localhost:8080 with 10 agents

Mode headless berjalan tanpa browser yang terlihat, mencatat hasilnya (misalnya, --output results.json). Sempurna untuk pipeline otomatis.

Pengujian ini masing-masing memakan waktu <60 detik—Vibetest-use MCP adalah iblis kecepatan!

Mengintegrasikan Vibetest-use MCP dengan Claude Code Desktop

Ingin menjalankan pengujian Vibetest-use MCP dari Claude Code Desktop? Berikut cara mengintegrasikannya.

1. Tambahkan Server Vibetest MCP ke Claude Desktop:

Gunakan Claude CLI:

claude mcp add vibetest /full/path/to/vibetop-use/.venv/bin/vibetest-mcp -e GOOGLE_API_KEY="your_google_api_key"

Ini mendaftarkan server ke Claude Desktop, meneruskan kunci API Google Anda.

2. Verifikasi Koneksi:

Buka Claude Desktop dan ketik:

/mcp

Periksa apakah server vibetest ditampilkan sebagai terhubung.

3. Jalankan Perintah Vibetop:

Di Claude Desktop, masukkan:

Vibetest my website with 5 agents: https://example.com
Run vibetop on localhost:3000

Claude meneruskan perintah ke server MCP, mengembalikan hasil pengujian.

Saya menguji situs melalui Claude Desktop, dan itu langsung menandai bug formulir—sangat keren!

Menggunakan Vibetest-use MCP dengan Cursor

Lebih suka antarmuka Cursor yang ramping? Berikut cara menyiapkan Vibetest-use MCP untuk pengujian.

1. Tambahkan Server MCP melalui UI Pengaturan Cursor:

Buka Pengaturan Cursor > MCP (sidebar kiri).
Klik Tambah Server atau tombol “+”.
Tambahkan konfigurasi ini (sesuaikan path dan kunci):

{
  "mcpServers": {
    "vibetest": {
      "command": "/full/path/to/vibetop-use/.venv/bin/vibetest-mcp",
      "env": {
        "GOOGLE_API_KEY": "your_google_api_key"
      }
    }
  }
}

Simpan dan mulai ulang Cursor jika perlu.

2. Gunakan Perintah Vibetest di Cursor:

Di antarmuka chat atau perintah Cursor, coba:

Vibetest my website with 5 agents: https://example.com
Run vibetest on localhost:3000
Run a headless vibetest on localhost:8080 with 10 agents

Cursor berkomunikasi dengan server MCP, menampilkan hasil secara inline.

Saya menjalankan pengujian headless di Cursor, dan output JSON-nya sangat jelas—surga QA!

Menyesuaikan Vibetest-use MCP untuk Kebutuhan Anda

Ingin menyesuaikan Vibetest-use MCP? Berikut cara menjadikannya milik Anda.

1. Sesuaikan Jumlah Agen:

Gunakan --agents 2 untuk pemindaian cepat atau --agents 10 untuk pengujian mendalam. Lebih banyak agen berarti cakupan lebih baik tetapi penggunaan memori lebih tinggi.

2. Targetkan Fitur Spesifik:

Edit prompts.py untuk menguji alur spesifik (misalnya, proses checkout):

prompt = "Vibetest with 3 the checkout flow on {website}. Verify cart updates and payment buttons."

Jalankan:

uv run vibetest --url https://shop.com --prompt "Test checkout flow"

3. Integrasikan dengan CI/CD (Ubuntu):

Tambahkan ke GitHub Actions:

name: QA with Vibetest-use
on: [push]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: |
          curl -LsSf https://astral.sh/uv/install.sh | sh
          uv venv
          source .venv/bin/activate
          uv pip install -e .
          uv pip install playwright
          uv run playwright install chromium
          uv run vibetest --url http://localhost:3000 --agents 5 --output results.json
      env:
        GOOGLE_API_KEY: ${{ secrets.GOOGLE_API_KEY }}

4. Gunakan DeepSeek untuk Kecerdasan:

Pasangkan dengan DeepSeek:

uv run vibetest --url https://example.com --llm deepseek-chat

Meningkatkan penalaran untuk pengujian kompleks.

Menjelajahi Fitur Vibetest-use MCP

Vibetest-use MCP dilengkapi dengan banyak fitur QA yang berguna. Periksa ini:

Pengujian Paralel: Jalankan 10+ agen untuk pemindaian <60 detik, seperti yang dihebohkan di X.

2. Pengujian Lintas Browser: Uji Firefox/Safari via playwright.config.ts:

{ browserName: 'firefox' }

3. Mode Riset Mendalam: Gunakan mcp-browser-cli --deep-research untuk analisis UX, menyimpan laporan Markdown.

4. Komunitas: Bergabunglah dengan Discord atau GitHub Browser-Code (38 bintang) untuk berbagi ide.

Saya menangkap gangguan khusus Firefox dalam pengujian—Vibetest-use MCP adalah juara QA!

Penutup: Kuasai Vibetest-use MCP

Anda telah melepaskan Vibetest-use MCP untuk mengotomatiskan QA (penjaminan mutu) seperti seorang profesional! Dari pengaturan hingga menguji situs langsung, server lokal, dan berintegrasi dengan Claude Desktop atau Cursor, Anda siap menjaga aplikasi Anda bebas bug. Coba bereksperimen dengan lebih banyak agen, DeepSeek, atau CI/CD, dan pastikan untuk mendokumentasikan API Anda dengan APIdog. Bagikan kemenangan Vibetest-use MCP Anda di X atau GitHub——Saya sangat antusias melihat kemampuan QA Anda meningkat pesat! 🚀

button