Blog

Claude Kodunu Tarayıcı Otomasyonu için Kullanma Rehberi

Ashley Innocent

Ashley Innocent

22 January 2026

Claude Kodunu Tarayıcı Otomasyonu için Kullanma Rehberi

Tarayıcı otomasyonu geleneksel olarak karmaşık betikler yazmayı, seçicileri yönetmeyi ve öngörülemeyen sayfa durumlarını ele almayı gerektiriyordu. Claude Code, istediğiniz şeyi doğal dilde açıklamanıza ve yapay zekanın bunu kesin tarayıcı eylemlerine dönüştürmesine izin vererek bu süreci dönüştürüyor.

Claude Code tarayıcı otomasyonunu güçlü kılan nedir:

💡
API'leri tarayıcı iş akışlarının yanı sıra test ediyor musunuz? Apidog, görsel API testi ve sahte sunucular sağlayarak Claude Code tarayıcı otomasyonunu tamamlar. Tarayıcı testleriniz API çağrılarını tetiklediğinde, Apidog tüm istek-yanıt döngüsünü doğrulamanıza yardımcı olur. Kapsamlı uçtan uca test iş akışları oluşturmak için Apidog'u ücretsiz deneyin.
düğme

Bu kılavuz, temel kurulumdan MCP (Model Bağlam Protokolü) sunucularını kullanarak gelişmiş otomasyon modellerine kadar her şeyi kapsar.

Tarayıcı Otomasyon Seçeneklerini Anlamak

Claude Code, tarayıcı otomasyonuna farklı kullanım durumlarına uygun birden fazla yaklaşım sunar.

Seçenek 1: Playwright MCP (Önerilen)

Microsoft'un Playwright MCP'si, Claude Code ile tarayıcı otomasyonu için önerilen yaklaşımdır. Şunları sağlar:

Seçenek 2: Puppeteer MCP (Topluluk)

Resmi Puppeteer MCP paketi kullanım dışı bırakılmış olsa da, topluluk tarafından sürdürülen alternatifler mevcuttur:

Seçenek 3: Claude Bilgisayar Kullanım API'si

Sadece tarayıcıların ötesinde tam masaüstü kontrolü için:

Karşılaştırma Tablosu

ÖzellikPlaywright MCPPuppeteer MCPBilgisayar Kullanım API'si
Tarayıcı DesteğiChromium, Firefox, WebKitYalnızca ChromiumHerhangi bir tarayıcı
BakımMicrosoft (resmi)ToplulukAnthropic
Öğe HedeflemeErişilebilirlik ağacıCSS seçicilerGörsel/koordinatlar
Başsız ModEvetEvetHayır (ekran gerektirir)
En İyisiWeb testi, veri çekmeEski projelerMasaüstü otomasyonu

Playwright MCP Kurulumu

Playwright MCP, Claude Code'a tarayıcı otomasyonu eklemenin önerilen yoludur. İşte nasıl kurulacağı.

Ön Koşullar

Adım 1: MCP Sunucusunu Yapılandırın

Playwright MCP'yi Claude Code yapılandırmanıza ekleyin. .claude/settings.json dosyasını oluşturun veya düzenleyin:

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

Adım 2: Kurulumu Doğrulayın

Claude Code'u başlatın ve MCP sunucusunun çalıştığını doğrulayın:

claude

Mevcut araçlarda Playwright MCP'nin listelendiğini görmelisiniz. Basit bir komutla test edin:

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

Adım 3: Tarayıcı Seçeneklerini Yapılandırın

Daha fazla kontrol için, MCP sunucu ayarlarını özelleştirin:

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

Mevcut seçenekler:

Adım 4: CI/CD'de Çalıştırma

Otomatikleştirilmiş işlem hatları için başsız modu kullanın:

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

Alternatif: Puppeteer MCP

Puppeteer'ı tercih ediyorsanız veya mevcut Puppeteer tabanlı iş akışlarınız varsa, topluluk tarafından sürdürülen MCP sunucularını kullanabilirsiniz.

Kurulum

Topluluk Puppeteer MCP sunucusunu kullanın:

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

Alternatif: puppeteer-mcp-claude

Kapsamlı tarayıcı otomasyonuna sahip başka bir topluluk seçeneği:

# Depoyu klonla
git clone https://github.com/jaenster/puppeteer-mcp-claude.git
cd puppeteer-mcp-claude
npm install

.claude/settings.json içinde yapılandırın:

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

Playwright'tan Temel Farklılıklar

YönPlaywright MCPPuppeteer MCP
Kurulumnpx (kurulum yok)npm kurulumu gerektirebilir
TarayıcılarÇokluChrome/Chromium
Seçici StratejisiErişilebilirlik ağacıCSS/XPath
BakımMicrosoftTopluluk

Temel Tarayıcı Otomasyon Komutları

MCP sunucunuz yapılandırıldıktan sonra, doğal dil kullanarak tarayıcıları kontrol edebilirsiniz.

Navigate to https://github.com

Go to the login page on github.com

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

Öğelerle Etkileşim

Click the "Sign In" button

Type "my-username" in the email field

Select "United States" from the country dropdown

Check the "Remember me" checkbox

Sayfa İçeriğini Okuma

Get the text content of the main heading

List all links on the current page

Extract the product prices from this page

Ekran Görüntüsü Alma

Take a screenshot of the current page

Capture a screenshot of just the navigation menu

Bekleme ve Zamanlama

Wait for the loading spinner to disappear

Wait 3 seconds then click the submit button

Wait until the "Success" message appears

Form İşleme

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

Karmaşık Etkileşimler

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

Gelişmiş Otomasyon Modelleri

Model 1: Çok Adımlı İş Akışları

Karmaşık otomasyon dizileri oluşturun:

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

Model 2: Veri Çıkarma

Web sayfalarından yapılandırılmış veri çıkarın:

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

Model 3: Kimlik Doğrulama Akışları

Giriş dizilerini yönetin:

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

Model 4: Görsel Regresyon Testi

Sayfa durumlarını karşılaştırın:

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

Model 5: İzleme ve Uyarı

İzleme iş akışları oluşturun:

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

Model 6: API Doğrulamalı Uçtan Uca Test

Tarayıcı ve API testlerini birleştirin:

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

API'leri içeren akışları test ederken, arka uç yanıtlarını doğrulamak için Apidog'u kullanın. Tarayıcı eylemlerinizin doğru API çağrılarını tetiklediğini ve beklenen yanıtları aldığını doğrulayabilirsiniz.

Gerçek Dünya Kullanım Durumları

Kullanım Durumu 1: Otomatik Kod İnceleme Ekran Görüntüleri

Kod incelemeleri için görsel dokümantasyon yakalayın:

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/

Kullanım Durumu 2: Rakip Analizi

Rakip web sitelerini izleyin:

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

Kullanım Durumu 3: Otomatik Form Testi

Senaryolar arasında form doğrulamasını test edin:

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

Kullanım Durumu 4: SEO Denetimi

SEO kontrollerini otomatikleştirin:

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

Kullanım Durumu 5: Erişilebilirlik Testi

Erişilebilirlik kontrollerini otomatikleştirin:

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

Kullanım Durumu 6: Performans İzleme

Sayfa performansını takip edin:

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

CI/CD İşlem Hatları ile Entegrasyon

GitHub Actions Entegrasyonu

Tarayıcı otomasyonunu CI işlem hattınıza ekleyin:

# .github/workflows/e2e-tests.yml
name: E2E Browser Tests # isim: Uçtan Uca Tarayıcı Testleri

on:
  pull_request:
    branches: [main, develop] # dallar: [main, develop]

jobs:
  browser-tests:
    runs-on: ubuntu-latest # çalıştırılır: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

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

      - name: Install Playwright Browsers # isim: Playwright Tarayıcılarını Kur
        run: npx playwright install --with-deps chromium

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

      - name: Run Browser Tests # isim: Tarayıcı Testlerini Çalıştır
        env:
          ANTHROPIC_API_KEY: ${{ secrets.ANTHROPIC_API_KEY }}
        run: |
          claude --mcp playwright "
            Run the following browser tests: # Aşağıdaki tarayıcı testlerini çalıştır:
            1. Navigate to ${{ env.STAGING_URL }} # ${{ env.STAGING_URL }} adresine git
            2. Test login flow with test credentials # Test kimlik bilgileriyle giriş akışını test et
            3. Verify dashboard loads correctly # Kontrol panelinin doğru yüklendiğini doğrula
            4. Take screenshots of each step # Her adımın ekran görüntülerini al
            5. Report any failures # Tüm hataları bildir
          "

      - name: Upload Screenshots # isim: Ekran Görüntülerini Yükle
        if: always()
        uses: actions/upload-artifact@v4
        with:
          name: browser-test-screenshots # isim: tarayıcı-test-ekran-görüntüleri
          path: screenshots/

Bir Tarayıcı Test Yeteneği Oluşturma

Tarayıcı testi için yeniden kullanılabilir bir yetenek oluşturun:

---
name: browser-test-runner # isim: tarayıcı-test-çalıştırıcısı
version: "1.0.0"
description: Runs browser-based E2E tests using Playwright MCP # açıklama: Playwright MCP kullanarak tarayıcı tabanlı uçtan uca testleri çalıştırır
user-invocable: true # kullanıcı-çağrılabilir: doğru
allowed-tools: # izin verilen-araçlar:
  - Bash
  - Read
  - Write
  - mcp_playwright
---

# Browser Test Runner # Tarayıcı Test Çalıştırıcısı

Automated browser testing skill using Playwright MCP. # Playwright MCP kullanarak otomatik tarayıcı testi yeteneği.

## Usage # Kullanım

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

Claude Bilgisayar Kullanım API'si

Tam masaüstü kontrolü gerektiren senaryolar için Claude'un Bilgisayar Kullanım API'si kapsamlı otomasyon yetenekleri sunar.

Genel Bakış

Bilgisayar Kullanımı, Claude'un şunları yapmasına izin veren bir beta özelliğidir:

Temel Kurulum

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"]
)

Bilgisayar Kullanımı ve MCP'yi Ne Zaman Kullanmalı

SenaryoÖnerilen Yaklaşım
Web kazımaPlaywright MCP
Uçtan uca testPlaywright MCP
Masaüstü uygulaması otomasyonuBilgisayar Kullanım API'si
Çapraz uygulama iş akışlarıBilgisayar Kullanım API'si
CI/CD işlem hatlarıPlaywright MCP (başsız)
Görsel testHer ikisi de

Bilgisayar Kullanımı En İyi Uygulamaları

  1. Tıklamadan önce eylemleri daima doğrulayın
  2. Mümkün olduğunda belirli koordinatları kullanın
  3. Hızlı eylemler arasında gecikmeler ekleyin
  4. Kaçırılan tıklamalar için hata kurtarmayı uygulayın
  5. Kapsamı gerekli izinlerle sınırlayın

Güvenlik Hususları

Kimlik Doğrulama Yönetimi

Yapın:

Yapmayın:

# Ortam değişkenlerini kullanın
export TEST_USERNAME="test@example.com"
export TEST_PASSWORD="secure-test-password"

Log in using credentials from environment variables
TEST_USERNAME and TEST_PASSWORD

Veri Gizliliği

Yapın:

Yapmayın:

Ağ Güvenliği

Yapın:

Yapmayın:

MCP Sunucu Güvenliği

  1. Mümkün olduğunda yerel olarak çalıştırın
  2. Kullanmadan önce MCP sunucu kodunu denetleyin
  3. Araç izinlerini minimum gereksinime sınırlayın
  4. Anormallikler için MCP sunucu günlüklerini izleyin

Sonuç

Claude Code ile tarayıcı otomasyonu, geliştiricilerin web testi, veri çekme ve otomasyona yaklaşımını dönüştürür. Doğal dil talimatlarını Playwright gibi güçlü MCP sunucularıyla birleştirerek, karmaşık betikler yazmadan gelişmiş otomasyon iş akışları oluşturabilirsiniz.

Kapsamlı testler için Claude Code tarayıcı otomasyonunu API doğrulamasıyla eşleştirin. Hem ön uç hem de arka ucunuzu kapsayan eksiksiz test iş akışları oluşturmak için Apidog'u ücretsiz indirin.

düğme

API Tasarım-Öncelikli Yaklaşımı Apidog'da Uygulayın

API'leri oluşturmanın ve kullanmanın daha kolay yolunu keşfedin

Ücretsiz Kaydolİndir