Cara Menggunakan Claude Code untuk Otomasi Browser

Otomatisasi browser secara tradisional memerlukan penulisan skrip yang kompleks, pengelolaan selektor, dan penanganan status halaman yang tidak terduga. Claude Code mengubah proses ini dengan memungkinkan Anda menjelaskan apa yang Anda inginkan dalam bahasa alami dan AI menerjemahkannya menjadi tindakan browser yang tepat.

Apa yang membuat otomatisasi browser Claude Code canggih:

Kontrol Bahasa Alami: Beri tahu Claude "klik tombol masuk" alih-alih menulis kode selektor
Adaptasi Cerdas: AI memahami konteks dan beradaptasi dengan perubahan halaman
Pemahaman Visual: Mode pohon aksesibilitas dan snapshot memberikan penargetan elemen yang andal
Dukungan Lintas Browser: Berfungsi dengan Chromium, Firefox, dan WebKit
Integrasi Tanpa Hambatan: Berjalan langsung dalam alur kerja pengembangan Anda

💡

Menguji API bersamaan dengan alur kerja browser? Apidog melengkapi otomatisasi browser Claude Code dengan menyediakan pengujian API visual dan server tiruan. Ketika pengujian browser Anda memicu panggilan API, Apidog membantu Anda memvalidasi seluruh siklus permintaan-respons. Coba Apidog gratis untuk membangun alur kerja pengujian end-to-end yang komprehensif.

tombol

Panduan ini mencakup segala hal mulai dari penyiapan dasar hingga pola otomatisasi canggih menggunakan server MCP (Model Context Protocol).

Memahami Opsi Otomatisasi Browser

Claude Code menawarkan berbagai pendekatan untuk otomatisasi browser, masing-masing sesuai untuk kasus penggunaan yang berbeda.

Opsi 1: Playwright MCP (Direkomendasikan)

Playwright MCP dari Microsoft adalah pendekatan yang direkomendasikan untuk otomatisasi browser dengan Claude Code. Ini menyediakan:

Dukungan Resmi: Dipelihara oleh Microsoft
Lintas Browser: Berfungsi dengan Chromium, Firefox, dan WebKit
Mode Pohon Aksesibilitas: Penargetan elemen yang andal tanpa selektor yang rapuh
Pengembangan Aktif: Pembaruan dan peningkatan rutin

Opsi 2: Puppeteer MCP (Komunitas)

Meskipun paket Puppeteer MCP resmi telah tidak digunakan lagi, alternatif yang dikelola komunitas tetap ada:

API yang Familiar: Jika Anda sudah mengenal Puppeteer
Fokus Chrome: Dioptimalkan untuk Chrome/Chromium
Dukungan Legasi: Untuk alur kerja berbasis Puppeteer yang ada

Opsi 3: Claude Computer Use API

Untuk kontrol desktop penuh di luar hanya browser:

Akses Desktop Lengkap: Kontrol aplikasi apa pun
Berbasis Screenshot: Pemahaman visual konten layar
Integrasi API: Bangun solusi otomatisasi kustom

Tabel Perbandingan

Fitur	Playwright MCP	Puppeteer MCP	Computer Use API
Dukungan Browser	Chromium, Firefox, WebKit	Hanya Chromium	Browser apa pun
Pemeliharaan	Microsoft (resmi)	Komunitas	Anthropic
Penargetan Elemen	Pohon aksesibilitas	Selektor CSS	Visual/koordinat
Mode Tanpa Kepala	Ya	Ya	Tidak (membutuhkan tampilan)
Terbaik Untuk	Pengujian web, scraping	Proyek lama	Otomatisasi desktop

Menyiapkan Playwright MCP

Playwright MCP adalah cara yang direkomendasikan untuk menambahkan otomatisasi browser ke Claude Code. Berikut adalah cara untuk menyiapkannya.

Prasyarat

Node.js 18 atau lebih tinggi
Claude Code CLI terinstal
npm atau npx tersedia

Langkah 1: Konfigurasi Server MCP

Tambahkan Playwright MCP ke konfigurasi Claude Code Anda. Buat atau edit .claude/settings.json:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"],
      "env": {
        "PLAYWRIGHT_BROWSERS_PATH": "0"
      }
    }
  }
}

Langkah 2: Verifikasi Instalasi

Mulai Claude Code dan verifikasi server MCP berjalan:

claude

Anda akan melihat Playwright MCP terdaftar di alat yang tersedia. Uji dengan perintah sederhana:

Navigate to https://example.com and tell me the page title

Langkah 3: Konfigurasi Opsi Browser

Untuk kontrol lebih, sesuaikan pengaturan server MCP:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--browser", "chromium",
        "--headless"
      ],
      "env": {
        "PLAYWRIGHT_BROWSERS_PATH": "0"
      }
    }
  }
}

Opsi yang tersedia:

--browser: Pilih chromium, firefox, atau webkit
--headless: Jalankan tanpa jendela browser yang terlihat
--port: Tentukan port kustom (default: ditetapkan secara otomatis)
--host: Ikat ke host tertentu (default: localhost)

Langkah 4: Menjalankan di CI/CD

Untuk pipeline otomatis, gunakan mode tanpa kepala (headless):

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--headless",
        "--browser", "chromium"
      ]
    }
  }
}

Alternatif: Puppeteer MCP

Jika Anda lebih suka Puppeteer atau memiliki alur kerja berbasis Puppeteer yang sudah ada, Anda dapat menggunakan server MCP yang dikelola komunitas.

Instalasi

Gunakan server Puppeteer MCP komunitas:

{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": ["-y", "puppeteer-mcp-server"]
    }
  }
}

Alternatif: puppeteer-mcp-claude

Opsi komunitas lain dengan otomatisasi browser yang komprehensif:

# Clone the repository
git clone https://github.com/jaenster/puppeteer-mcp-claude.git
cd puppeteer-mcp-claude
npm install

Konfigurasi di .claude/settings.json:

{
  "mcpServers": {
    "puppeteer": {
      "command": "node",
      "args": ["/path/to/puppeteer-mcp-claude/index.js"]
    }
  }
}

Perbedaan Utama dari Playwright

Aspek	Playwright MCP	Puppeteer MCP
Penyiapan	npx (tanpa instalasi)	Mungkin memerlukan npm install
Browser	Beberapa	Chrome/Chromium
Strategi Selektor	Pohon aksesibilitas	CSS/XPath
Pemeliharaan	Microsoft	Komunitas

Perintah Otomatisasi Browser Dasar

Setelah server MCP Anda dikonfigurasi, Anda dapat mengontrol browser menggunakan bahasa alami.

Navigasi

Navigate to https://github.com

Go to the login page on github.com

Open https://docs.example.com/api in a new tab

Berinteraksi dengan Elemen

Click the "Sign In" button

Type "my-username" in the email field

Select "United States" from the country dropdown

Check the "Remember me" checkbox

Membaca Konten Halaman

Get the text content of the main heading

List all links on the current page

Extract the product prices from this page

Mengambil Screenshot

Take a screenshot of the current page

Capture a screenshot of just the navigation menu

Menunggu dan Pengaturan Waktu

Wait for the loading spinner to disappear

Wait 3 seconds then click the submit button

Wait until the "Success" message appears

Penanganan Formulir

Fill out the contact form:
- Name: John Doe
- Email: john@example.com
- Message: Testing automation
Then submit the form

Interaksi Kompleks

Scroll down to the footer and click the "Privacy Policy" link

Hover over the "Products" menu and click "Enterprise"

Drag the slider to the 75% position

Pola Otomatisasi Tingkat Lanjut

Pola 1: Alur Kerja Multi-Langkah

Buat urutan otomatisasi yang kompleks:

Automate the following checkout flow:
1. Navigate to https://shop.example.com
2. Search for "wireless headphones"
3. Click on the first product result
4. Select size "Medium" if available
5. Click "Add to Cart"
6. Go to cart and verify the item is there
7. Take a screenshot of the cart

Pola 2: Ekstraksi Data

Ekstrak data terstruktur dari halaman web:

Go to https://news.ycombinator.com and extract the top 10 stories with:
- Title
- URL
- Points
- Number of comments
- Posted time ago

Format as JSON

Pola 3: Alur Autentikasi

Tangani urutan masuk:

Log into the application:
1. Navigate to https://app.example.com/login
2. Enter username: test@example.com
3. Enter password from environment variable LOGIN_PASSWORD
4. Click Sign In
5. Wait for dashboard to load
6. Verify login succeeded by checking for "Welcome" text

Pola 4: Pengujian Regresi Visual

Bandingkan status halaman:

1. Navigate to https://staging.example.com
2. Take a full-page screenshot named "staging-homepage"
3. Navigate to https://production.example.com
4. Take a full-page screenshot named "production-homepage"
5. Compare the two screenshots and report any differences

Pola 5: Pemantauan dan Peringatan

Buat alur kerja pemantauan:

Check if the service is healthy:
1. Navigate to https://status.example.com
2. Look for "All Systems Operational" text
3. If not found, extract the current status message
4. Take a screenshot for documentation
5. Report the findings

Pola 6: Pengujian E2E dengan Validasi API

Gabungkan pengujian browser dan API:

Test the user registration flow:
1. Navigate to https://app.example.com/register
2. Fill in registration form with test data
3. Submit the form
4. Wait for confirmation page
5. Verify the user was created by checking the API response
6. Take a screenshot of the success page

Saat menguji alur yang melibatkan API, gunakan Apidog untuk memvalidasi respons backend. Anda dapat memverifikasi bahwa tindakan browser Anda memicu panggilan API yang benar dan menerima respons yang diharapkan.

Kasus Penggunaan Dunia Nyata

Kasus Penggunaan 1: Screenshot Peninjauan Kode Otomatis

Abadikan dokumentasi visual untuk tinjauan kode:

For the PR review, capture screenshots of:
1. The login page before changes
2. The login page after changes
3. The error state when invalid credentials are entered
4. The success redirect after valid login

Save all screenshots to ./review-screenshots/

Kasus Penggunaan 2: Analisis Kompetitif

Pantau situs web pesaing:

Analyze competitor pricing:
1. Navigate to https://competitor.com/pricing
2. Extract all plan names and prices
3. Take a screenshot of the pricing page
4. Compare with our current pricing data
5. Generate a summary report

Kasus Penggunaan 3: Pengujian Formulir Otomatis

Uji validasi formulir di berbagai skenario:

Test the contact form validation:

Test 1: Empty submission
- Submit empty form
- Verify all required field errors appear
- Screenshot: empty-form-errors.png

Test 2: Invalid email
- Enter "John" in name
- Enter "invalid-email" in email
- Submit
- Verify email validation error
- Screenshot: invalid-email-error.png

Test 3: Valid submission
- Fill all fields correctly
- Submit
- Verify success message
- Screenshot: form-success.png

Kasus Penggunaan 4: Audit SEO

Otomatiskan pemeriksaan SEO:

Perform SEO audit on https://mysite.com:
1. Check page title length (should be 50-60 characters)
2. Check meta description exists and length
3. Verify H1 tag exists and is unique
4. Check all images have alt text
5. Verify canonical URL is set
6. Check for broken links on the page
7. Generate audit report

Kasus Penggunaan 5: Pengujian Aksesibilitas

Otomatiskan pemeriksaan aksesibilitas:

Run accessibility audit on https://app.example.com:
1. Navigate to the homepage
2. Check color contrast ratios
3. Verify all interactive elements are keyboard accessible
4. Check ARIA labels are present
5. Verify focus indicators are visible
6. Test with screen reader simulation
7. Generate accessibility report

Kasus Penggunaan 6: Pemantauan Kinerja

Lacak kinerja halaman:

Monitor page load performance:
1. Clear browser cache
2. Navigate to https://app.example.com
3. Record time to first contentful paint
4. Record time to interactive
5. Capture network waterfall
6. Take screenshot when fully loaded
7. Compare with baseline metrics

Mengintegrasikan dengan Pipeline CI/CD

Integrasi GitHub Actions

Tambahkan otomatisasi browser ke pipeline CI Anda:

# .github/workflows/e2e-tests.yml
name: E2E Browser Tests

on:
  pull_request:
    branches: [main, develop]

jobs:
  browser-tests:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'

      - name: Install Playwright Browsers
        run: npx playwright install --with-deps chromium

      - name: Install Claude Code
        run: npm install -g @anthropic-ai/claude-code

      - name: Run Browser Tests
        env:
          ANTHROPIC_API_KEY: ${{ secrets.ANTHROPIC_API_KEY }}
        run: |
          claude --mcp playwright "
            Run the following browser tests:
            1. Navigate to ${{ env.STAGING_URL }}
            2. Test login flow with test credentials
            3. Verify dashboard loads correctly
            4. Take screenshots of each step
            5. Report any failures
          "

      - name: Upload Screenshots
        if: always()
        uses: actions/upload-artifact@v4
        with:
          name: browser-test-screenshots
          path: screenshots/

Membuat Keterampilan Pengujian Browser

Buat keterampilan yang dapat digunakan kembali untuk pengujian browser:

---
name: browser-test-runner
version: "1.0.0"
description: Runs browser-based E2E tests using Playwright MCP
user-invocable: true
allowed-tools:
  - Bash
  - Read
  - Write
  - mcp_playwright
---

# Browser Test Runner

Automated browser testing skill using Playwright MCP.

## Usage

```bash
/browser-test-runner --url https://app.example.com --suite smoke
/browser-test-runner --url https://staging.example.com --suite full

API Penggunaan Komputer Claude

Untuk skenario yang memerlukan kontrol desktop penuh, API Penggunaan Komputer Claude menyediakan kemampuan otomatisasi yang komprehensif.

Ikhtisar

Penggunaan Komputer adalah fitur beta yang memungkinkan Claude untuk:

Mengambil screenshot layar
Menggerakkan dan mengklik mouse
Mengetik teks
Menggulir dan menavigasi

Penyiapan Dasar

import anthropic

client = anthropic.Anthropic()

response = client.messages.create(
    model="claude-sonnet-4-20250514",
    max_tokens=1024,
    tools=[
        {
            "type": "computer_20250124",
            "name": "computer",
            "display_width_px": 1920,
            "display_height_px": 1080,
            "display_number": 1
        }
    ],
    messages=[
        {
            "role": "user",
            "content": "Open Chrome and navigate to github.com"
        }
    ],
    betas=["computer-use-2025-01-24"]
)

Kapan Menggunakan Penggunaan Komputer vs MCP

Skenario	Pendekatan yang Direkomendasikan
Web scraping	Playwright MCP
Pengujian E2E	Playwright MCP
Otomatisasi aplikasi desktop	Computer Use API
Alur kerja lintas aplikasi	Computer Use API
Pipeline CI/CD	Playwright MCP (headless)
Pengujian visual	Keduanya

Praktik Terbaik Penggunaan Komputer

Selalu verifikasi tindakan sebelum mengklik
Gunakan koordinat spesifik bila memungkinkan
Tambahkan jeda di antara tindakan cepat
Terapkan pemulihan kesalahan untuk klik yang terlewat
Batasi cakupan pada izin yang diperlukan

Pertimbangan Keamanan

Penanganan Autentikasi

Lakukan:

Gunakan variabel lingkungan untuk kredensial
Bersihkan kredensial setelah pengujian
Gunakan akun pengujian, bukan kredensial produksi

Jangan:

Hardcode kata sandi dalam perintah
Simpan kredensial di screenshot
Bagikan file status autentikasi

# Use environment variables
export TEST_USERNAME="test@example.com"
export TEST_PASSWORD="secure-test-password"

Log in using credentials from environment variables
TEST_USERNAME and TEST_PASSWORD

Privasi Data

Lakukan:

Tutupi data sensitif di screenshot
Bersihkan data browser setelah pengujian
Gunakan lingkungan staging/pengujian

Jangan:

Ambil screenshot halaman dengan data pengguna nyata
Simpan informasi pribadi
Jalankan terhadap produksi dengan data nyata

Keamanan Jaringan

Lakukan:

Batasi akses jaringan browser
Gunakan daftar izin untuk domain yang diizinkan
Pantau permintaan jaringan

Jangan:

Izinkan akses internet tanpa batasan
Abaikan kesalahan sertifikat SSL dalam produksi
Unduh konten yang tidak terpercaya

Keamanan Server MCP

Jalankan secara lokal bila memungkinkan
Audit kode server MCP sebelum digunakan
Batasi izin alat hingga yang minimum diperlukan
Pantau log server MCP untuk anomali

Kesimpulan

Otomatisasi browser dengan Claude Code mengubah cara pengembang mendekati pengujian web, scraping, dan otomatisasi. Dengan menggabungkan instruksi bahasa alami dengan server MCP yang kuat seperti Playwright, Anda dapat membangun alur kerja otomatisasi yang canggih tanpa menulis skrip yang kompleks.

Untuk pengujian yang komprehensif, pasangkan otomatisasi browser Claude Code dengan validasi API. Unduh Apidog gratis untuk membangun alur kerja pengujian lengkap yang mencakup frontend dan backend Anda.

tombol