Kubernetes向けブラウザーオートメーション

kubectl-mcp-serverのブラウザーツール(26個)を使用してKubernetesのウェブUIを自動化します。

適用タイミング

以下の場合にこのスキルを使用してください:

• ユーザーが言及する内容: 「ダッシュボード」「Grafana」「ArgoCD UI」「ウェブインターフェース」「スクリーンショット」
• 操作内容: K8sダッシュボードの操作、スクリーンショット取得、ウェブUIの自動化
• キーワード: 「ブラウザー」「クリック」「スクリーンショット」「ウェブ」「UI自動化」

優先度ルール

優先度	ルール	影響度	ツール
1	MCP_BROWSER_ENABLEDを最初に有効化	重大	環境変数
2	インタラクション前にURLを開く	高	browser_open
3	クリック前に要素の出現を待機	高	browser_wait_for_selector
4	検証用のスクリーンショットを取得	中	browser_screenshot

クイックリファレンス

タスク	ツール	例
URLを開く	browser_open	browser_open(url)
要素をクリック	browser_click	browser_click(selector)
スクリーンショット取得	browser_screenshot	browser_screenshot(path)
要素の出現を待機	browser_wait_for_selector	browser_wait_for_selector(selector)

前提条件

• ブラウザーツール有効化: 必須

  export MCP_BROWSER_ENABLED=true
  

ブラウザーツールの有効化

export MCP_BROWSER_ENABLED=true

# オプション: クラウドプロバイダー
export MCP_BROWSER_PROVIDER=browserbase  # または browseruse
export BROWSERBASE_API_KEY=bb_...

基本的なナビゲーション

# URLを開く
browser_open(url="http://localhost:8001/api/v1/namespaces/kubernetes-dashboard/services/https:kubernetes-dashboard:/proxy/")

# 認証ヘッダー付きで開く
browser_open_with_headers(
    url="https://grafana.example.com",
    headers={"Authorization": "Bearer token123"}
)

# ナビゲート
browser_navigate(url="https://argocd.example.com/applications")

# 戻る/進む
browser_back()
browser_forward()

# リフレッシュ
browser_refresh()

スクリーンショットとコンテンツ

# スクリーンショット取得
browser_screenshot(path="dashboard.png")

# 全ページのスクリーンショット
browser_screenshot(path="full-page.png", full_page=True)

# ページコンテンツ取得
browser_content()

# ページタイトル取得
browser_title()

# 現在のURL取得
browser_url()

インタラクション

# 要素をクリック
browser_click(selector="button.submit")
browser_click(selector="text=Deploy")
browser_click(selector="#sync-button")

# テキスト入力
browser_type(selector="input[name=search]", text="my-deployment")
browser_type(selector=".search-box", text="nginx")

# フォーム入力
browser_fill(selector="#namespace", text="production")

# ドロップダウン選択
browser_select(selector="select#cluster", value="prod-cluster")

# キー押下
browser_press(key="Enter")
browser_press(key="Escape")

待機

# 要素の出現を待機
browser_wait_for_selector(selector=".loading", state="hidden")
browser_wait_for_selector(selector=".data-table", state="visible")

# ナビゲーション完了を待機
browser_wait_for_navigation()

# ネットワークアイドル状態を待機
browser_wait_for_load_state(state="networkidle")

セッション管理

# セッション一覧
browser_session_list()

# セッション切り替え
browser_session_switch(session_id="my-session")

# ブラウザーを閉じる
browser_close()

ビューポートとデバイス

# ビューポートサイズ設定
browser_set_viewport(width=1920, height=1080)

# デバイスエミュレーション
browser_set_viewport(device="iPhone 12")

Kubernetes ダッシュボードワークフロー

# 1. kubectl proxyを起動
# kubectl proxy &

# 2. ダッシュボードを開く
browser_open(url="http://localhost:8001/api/v1/namespaces/kubernetes-dashboard/services/https:kubernetes-dashboard:/proxy/")

# 3. ワークロードに移動
browser_click(selector="text=Workloads")

# 4. スクリーンショット取得
browser_screenshot(path="workloads.png")

# 5. デプロイメント検索
browser_type(selector="input[placeholder*=search]", text="nginx")
browser_press(key="Enter")

Grafana ダッシュボードワークフロー

# 1. Grafanaを開く
browser_open_with_headers(
    url="https://grafana.example.com/d/k8s-cluster",
    headers={"Authorization": "Bearer admin-token"}
)

# 2. 時間範囲設定
browser_click(selector="button[aria-label='Time picker']")
browser_click(selector="text=Last 1 hour")

# 3. ダッシュボードのスクリーンショット
browser_screenshot(path="grafana-cluster.png", full_page=True)

ArgoCD UIワークフロー

# 1. ArgoCDを開く
browser_open(url="https://argocd.example.com")

# 2. ログイン
browser_fill(selector="input[name=username]", text="admin")
browser_fill(selector="input[name=password]", text="password")
browser_click(selector="button[type=submit]")

# 3. アプリケーションに移動
browser_wait_for_selector(selector=".applications-list")
browser_click(selector="text=my-application")

# 4. アプリケーション同期
browser_click(selector="button.sync-button")
browser_click(selector="text=Synchronize")

関連スキル

• k8s-gitops - ArgoCD CLIツール
• k8s-diagnostics - クラスター分析