BrowserStack Entegrasyonu

Playwright testlerini BrowserStack'in bulut grid'inde çalıştırarak tarayıcı ve cihaz testlemesi yapın.

Ön Koşullar

Ortam değişkenleri ayarlanmalıdır:

• BROWSERSTACK_USERNAME — BrowserStack kullanıcı adınız
• BROWSERSTACK_ACCESS_KEY — erişim anahtarınız

Ayarlanmadıysa, kullanıcıya browserstack.com/accounts/settings adresinden nasıl alacaklarını gösterin ve durdurun.

Yetenekler

1. BrowserStack için Yapılandırma

/pw:browserstack setup

Adımlar:

1. Mevcut playwright.config.ts dosyasını kontrol edin
2. BrowserStack bağlantı seçeneklerini ekleyin:

// playwright.config.ts dosyasına ekleyin
import { defineConfig } from '@playwright/test';

const isBS = !!process.env.BROWSERSTACK_USERNAME;

export default defineConfig({
  // ... mevcut konfigürasyon
  projects: isBS ? [
    {
      name: "chromelatestwindows-11",
      use: {
        connectOptions: {
          wsEndpoint: `wss://cdp.browserstack.com/playwright?caps=${encodeURIComponent(JSON.stringify({
            'browser': 'chrome',
            'browser_version': 'latest',
            'os': 'Windows',
            'os_version': '11',
            'browserstack.username': process.env.BROWSERSTACK_USERNAME,
            'browserstack.accessKey': process.env.BROWSERSTACK_ACCESS_KEY,
          }))}`,
        },
      },
    },
    {
      name: "firefoxlatestwindows-11",
      use: {
        connectOptions: {
          wsEndpoint: `wss://cdp.browserstack.com/playwright?caps=${encodeURIComponent(JSON.stringify({
            'browser': 'playwright-firefox',
            'browser_version': 'latest',
            'os': 'Windows',
            'os_version': '11',
            'browserstack.username': process.env.BROWSERSTACK_USERNAME,
            'browserstack.accessKey': process.env.BROWSERSTACK_ACCESS_KEY,
          }))}`,
        },
      },
    },
    {
      name: "webkitlatestos-x-ventura",
      use: {
        connectOptions: {
          wsEndpoint: `wss://cdp.browserstack.com/playwright?caps=${encodeURIComponent(JSON.stringify({
            'browser': 'playwright-webkit',
            'browser_version': 'latest',
            'os': 'OS X',
            'os_version': 'Ventura',
            'browserstack.username': process.env.BROWSERSTACK_USERNAME,
            'browserstack.accessKey': process.env.BROWSERSTACK_ACCESS_KEY,
          }))}`,
        },
      },
    },
  ] : [
    // ... yerel projeler fallback
  ],
});

3. npm script ekleyin: "test:e2e:cloud": "npx playwright test --project='chrome@*' --project='firefox@*' --project='webkit@*'"

2. Testleri BrowserStack'ta Çalıştırın

/pw:browserstack run

Adımlar:

1. Kimlik bilgilerinin ayarlandığını doğrulayın
2. BrowserStack projeleriyle testleri çalıştırın:

   BROWSERSTACK_USERNAME=$BROWSERSTACK_USERNAME \
   BROWSERSTACK_ACCESS_KEY=$BROWSERSTACK_ACCESS_KEY \
   npx playwright test --project='chrome@*' --project='firefox@*'
   

3. Yürütmeyi izleyin
4. Tarayıcı başına sonuçları raporlayın

3. Build Sonuçlarını Alın

/pw:browserstack results

Adımlar:

1. browserstack_get_builds MCP aracını çağırın
2. En son build'in oturumlarını alın
3. Her oturum için:
   • Durum (geçti/başarısız)
   • Tarayıcı ve işletim sistemi
   • Süre
   • Video URL'si
   • Log URL'leri
4. Özet tablo olarak formatleyin

4. Kullanılabilir Tarayıcıları Kontrol Edin

/pw:browserstack browsers

Adımlar:

1. browserstack_get_browsers MCP aracını çağırın
2. Playwright uyumlu tarayıcıları filtreleyin
3. Kullanılabilir tarayıcı/işletim sistemi kombinasyonlarını görüntüleyin

5. Yerel Testleme

/pw:browserstack local

Localhost veya güvenlik duvarının arkasındaki staging için testleme:

1. BrowserStack Local'i yükleyin: npm install -D browserstack-local
2. Konfigürasyona yerel tunnel ekleyin
3. Kurulum talimatlarını sağlayın

Kullanılan MCP Araçları

Araç	Ne Zaman
browserstack_get_plan	Hesap limitlerini kontrol edin
browserstack_get_browsers	Kullanılabilir tarayıcıları listeleyin
browserstack_get_builds	Son build'leri listeleyin
browserstack_get_sessions	Bir build'deki oturumları alın
browserstack_get_session	Oturum ayrıntılarını alın (video, loglar)
browserstack_update_session	Geçti/başarısız olarak işaretleyin
browserstack_get_logs	Metin/network loglarını alın

Çıktı

• Tarayıcılar arası test sonuçları tablosu
• Tarayıcı başına geçti/başarısız durumu
• Video/ekran görüntüleri için BrowserStack dashboard'ına bağlantılar
• Vurgulanan tarayıcıya özgü hataları