browserstack

BrowserStack 連携

BrowserStack のクラウドグリッドで Playwright テストを実行し、クロスブラウザーおよびクロスデバイスのテストを行います。

前提条件

環境変数を設定する必要があります。

• BROWSERSTACK_USERNAME — BrowserStack のユーザー名
• BROWSERSTACK_ACCESS_KEY — アクセスキー

設定されていない場合は、browserstack.com/accounts/settings から取得する方法をユーザーに案内して、停止してください。

BrowserStack MCP サーバーは自動登録されません（issue #978）。 pw-browserstack はすべてのユーザーで接続に失敗したため、プラグインの .mcp.json から削除されました（プラグインには node_modules が含まれていません）。以下で使用する browserstack_* MCP ツールと /pw:browserstack コマンドは、手動で有効にするまで「tool not found」エラーで失敗します。プラグインの CLAUDE.md の Integrations セクションを参照してください（cd integrations/browserstack-mcp && npm install を実行してから、ご自身のユーザーまたはプロジェクトの MCP 設定でサーバーを登録します）。環境変数を設定するだけでは不十分です。

機能

1. BrowserStack 用に設定する

/pw:browserstack setup

手順：

1. 現在の playwright.config.ts を確認します
2. BrowserStack 接続オプションを追加します。

// Add to playwright.config.ts
import { defineConfig } from '@playwright/test';

const isBS = !!process.env.BROWSERSTACK_USERNAME;

export default defineConfig({
  // ... existing config
  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,
          }))}`,
        },
      },
    },
  ] : [
    // ... local projects fallback
  ],
});

3. npm スクリプトを追加します："test:e2e:cloud": "npx playwright test --project='chrome@*' --project='firefox@*' --project='webkit@*'"

2. BrowserStack でテストを実行する

/pw:browserstack run

手順：

1. 認証情報が設定されていることを確認します
2. BrowserStack プロジェクトを指定してテストを実行します。

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

3. 実行状況を監視します
4. ブラウザーごとに結果を報告します

3. ビルド結果を取得する

/pw:browserstack results

手順：

1. browserstack_get_builds MCP ツールを呼び出します
2. 最新のビルドのセッションを取得します
3. 各セッションについて、以下を確認します。
   • ステータス（成功／失敗）
   • ブラウザーと OS
   • 所要時間
   • 動画 URL
   • ログ URL
4. サマリーテーブルにまとめます

4. 利用可能なブラウザーを確認する

/pw:browserstack browsers

手順：

1. browserstack_get_browsers MCP ツールを呼び出します
2. Playwright 対応ブラウザーに絞り込みます
3. 利用可能なブラウザーと OS の組み合わせを表示します

5. ローカルテスト

/pw:browserstack local

ファイアウォールの内側にある localhost またはステージング環境をテストする場合：

1. BrowserStack Local をインストールします：npm install -D browserstack-local
2. ローカルトンネルを設定に追加します
3. セットアップ手順を提示します

使用する MCP ツール

ツール	用途
browserstack_get_plan	アカウントの上限を確認する
browserstack_get_browsers	利用可能なブラウザーを一覧表示する
browserstack_get_builds	最近のビルドを一覧表示する
browserstack_get_sessions	ビルド内のセッションを取得する
browserstack_get_session	セッションの詳細（動画、ログ）を取得する
browserstack_update_session	成功／失敗を設定する
browserstack_get_logs	テキスト／ネットワークログを取得する

出力

• クロスブラウザーテスト結果の表
• ブラウザーごとの成功／失敗ステータス
• 動画／スクリーンショットを含む BrowserStack ダッシュボードへのリンク
• ブラウザー固有の失敗があれば強調表示