mcpField
B
browser-automation

browser-automation

github.com/sickn33テスト・品質48.7k6.7k 回インストール今日更新
リポジトリ

browser-automation について

アプリの画面テストやブラウザーの問題調査を行う開発者向けのガイドです。ブラウザー自動化の手順と Playwright の例を示し、ユーザーに見える要素の指定や、操作確認と業務結果の検証の違いを説明します。

主な機能

  1. 01ユーザーに見える内容で要素を指定
  2. 02Playwright テストコンテキストの分離
  3. 03ページ状態とダウンロード結果の確認
  4. 04ビューポート、キーボード、フォーカスの確認
  5. 05再試行と機密性のある証拠の慎重な扱い

活用シーン

  1. 01アプリのブラウザーワークフローの検証
  2. 02UI のタイミング障害の調査
  3. 03エクスポートファイルの内容確認
  4. 04許可された範囲でのページデータ収集

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/sickn33/agentic-awesome-skills --skill browser-automation

インストール後、Claude Code で/browser-automationを入力して読み込まれたか確認します。

同梱ファイルreferences/detailed-guide.md

詳細

ブラウザ自動化

ユーザーがすでに選択した、またはプロジェクトにインストールされているブラウザツールを使用してください。Playwright、Puppeteer、Selenium はそれぞれ統合方法が異なります。サポートされていない成功率の主張ではなく、実際の要件に基づいて選択してください。2026-09-05 に AAS メンテナーが修正: 検証されていない比較とバイパスのデフォルトを削除し、待機とエビデンスの制限を明確化しました。

自分が管理するアプリケーションのテストと、既存の認証済みブラウザとの対話を分離してください。後者を新規の未認証セッションに置き換えたり、自動化テストを動作させるために認証情報を抽出したりしないでください。

詳細ガイド

このスキルを実行する前に詳細ガイドをお読みください。完全な手順と参考資料が保持されています。その安全性、前提条件、検証要件は必須として扱ってください。集中的な作業では関連するセクションを読み込み、エンドツーエンドの作業ではガイドを完全に読んでください。

Playwright テストの例

""" import { test, expect } from '@playwright/test';

// 各テストは分離されたブラウザコンテキストで実行されます test('user can add item to cart', async ({ page }) => { // 新しいコンテキスト - 他のテストからの Cookie もストレージもありません await page.goto('/products'); await page.getByRole('button', { name: 'Add to Cart' }).click(); await expect(page.getByTestId('cart-count')).toHaveText('1'); });

test('user can remove item from cart', async ({ page }) => { // 完全に分離されています - カートは空です await page.goto('/cart'); await expect(page.getByText('Your cart is empty')).toBeVisible(); }); """

良い例(ユーザー向け)

""" // ロールによる指定 - 最良の選択 await page.getByRole('button', { name: 'Submit' }).click(); await page.getByRole('link', { name: 'Sign up' }).click(); await expect(page.getByRole('heading', { name: 'Dashboard' })).toBeVisible(); await page.getByRole('textbox', { name: 'Search' }).fill('query');

// テキストコンテンツによる指定 await expect(page.getByText('Welcome back')).toBeVisible(); await page.getByText(/Order #\d+/).click(); // 正規表現がサポートされています

// ラベルによる指定(フォーム) await page.getByLabel('Email address').fill('[email protected]'); await page.getByLabel('Password').fill('secret');

// プレースホルダーによる指定 await page.getByPlaceholder('Search...').fill('query');

// テスト ID による指定(ユーザー向けのオプションが機能しない場合) await page.getByTestId('submit-button').click(); """

悪い例(壊れやすい)

""" // しないこと - 構造に依存した CSS セレクター await page.locator('.btn-primary.submit-form').click(); await page.locator('#header > div > button:nth-child(2)').click();

// しないこと - 構造に依存した XPath await page.locator('//div[@class="form"]/button[1]').click();

// しないこと - 自動生成されたセレクター await page.locator('[data-v-12345]').click(); """

使用する場面

実際のブラウザワークフローを検証する場合、UI のタイミング障害を診断する場合、または明示的に許可されたページデータを収集する場合に使用します。ロケーターやアクションを選択する前に、現在のページと利用可能なツール API を確認してください。

実例と前提条件

入力: ローカルの Web アプリからレビュー済みの JSON ファイルをエクスポートする。アプリを実行した状態にし、目的のブラウザを利用可能にし、合成のフォーム値を用意しておきます。エクスポートコントロールを確認し、クリックする前にダウンロードイベントを登録し、ダウンロードされた JSON を検査し、入力を編集すると古いプレビューが無効になることを確認します。期待される結果: レビュー済みの値を含むファイルが 1 つ生成され、隠れたプロジェクトデータやネットワーク送信が存在しないこと。

タスクにユーザビリティが含まれる場合は、明示的なデスクトップ/モバイルのビューポートを使用し、キーボード/フォーカスの動作を確認してください。ロックされたデスクトップでは対話的な検証が保留のままになります。ユニットテストとヘッドレスプローブは別個のエビデンスです。

制限事項

  • 自動待機は実行可能性をチェックするものであり、業務上の正確性やバックエンドへの書き込み成功を保証するものではありません。
  • スクリーンショット、HTML、トレース、認証状態ファイルには機密情報が含まれる可能性があります。許可された範囲のみをキャプチャしてください。
  • 読み取りの再試行は安全な場合がありますが、チェックアウト、削除、メッセージ送信の再試行は副作用を重複させる可能性があります。再実行する前に状態を確認してください。
  • リソースのブロックやモックレスポンスは環境を変更するため、未変更の本番環境の動作を確認することはできません。
  • サンプルにはプロジェクトのインポート、ランナー、フィクスチャのルートが必要です。このスキルによってブラウザー、サービス、アカウントがインストールされることはありません。

コメント