webapp-testing（Playwright でローカル Web アプリを試す）

ローカルで動かしている Web アプリを Playwright で操作して確かめるためのスキルです。description には、フロントエンドの動作確認、UI の不具合調査、スクリーンショットの取得、ブラウザのログの確認ができると書かれています。

方針はシンプルで、確認したい内容ごとに Python の Playwright スクリプトを書いて実行します。サーバーがまだ起動していなければ、同梱の scripts/with_server.py がサーバーを立ち上げ、ポートが応答するまで待ってからスクリプトを実行し、終わったら片付けます。複数のサーバー（例：バックエンドとフロントエンド）も同時に扱えます。

SKILL.md は短く、どの方法を選ぶかの判断の流れ、「先に様子を見てから操作する」という進め方、よくある失敗とその避け方がまとまっています。

方法の選び方

SKILL.md には判断の流れが図で示されています。要約すると次のとおりです。

• 静的な HTML の場合：HTML ファイルを直接読んでセレクタを探し、それを使って Playwright スクリプトを書く。うまくいかなければ動的なアプリとして扱う
• 動的な Web アプリで、サーバーが起動していない場合：まず python scripts/with_server.py --help で使い方を確かめ、補助スクリプトと簡単な Playwright スクリプトを組み合わせる
• サーバーがすでに起動している場合：先に様子を見てから操作する（下記）

補助スクリプトの扱い方

付属スクリプトは「中身を読まずに、まず --help を実行して使う」よう指示されています。スクリプトの中身を読み込むと文脈が無駄に埋まるため、自作が本当に必要になるまでは中を開かず、そのまま呼び出す部品として使う、という考え方です。

with_server.py の使い方は次のとおりです。

• --server "起動コマンド" と --port ポート番号 を組で指定する。複数指定すれば複数のサーバーを起動できる
• -- のあとに、準備ができてから実行するコマンド（Playwright スクリプトなど）を書く
• 各サーバーについて localhost のポートに接続できるまで待つ。待ち時間は --timeout（既定30秒）で変えられる

こうすることで、自動操作のスクリプトにはブラウザ操作の部分だけを書けばよくなります。

自動操作スクリプトの基本形

sync_playwright() で Chromium をヘッドレスで起動し、ページを開いたら必ず networkidle（通信が落ち着いた状態）まで待ってから操作する、という形が例として示されています。終わったらブラウザを閉じます。

先に様子を見てから操作する

動的なアプリでは次の順で進めます。

1. ページを開いて networkidle まで待つ
2. スクリーンショットを撮るか、DOM の中身やボタンの一覧を調べる
3. 実際に描画された状態からセレクタを決める
4. そのセレクタで操作する

よくある失敗として、動的なアプリで networkidle を待たずに DOM を調べてしまうことが挙げられています（JavaScript の実行前の状態を見てしまうため）。

その他の指針

• 同期版の sync_playwright() を使う
• セレクタは text=、role=、CSS セレクタ、ID など分かりやすいものを使う
• wait_for_selector() などで適切に待つ
• 終わったら必ずブラウザを閉じる

付属ファイル

• scripts/with_server.py … サーバーの起動・待機・コマンド実行・後片付けをまとめて行う
• examples/element_discovery.py … ページ上のボタン・リンク・入力欄を洗い出す例
• examples/static_html_automation.py … file:// の URL でローカル HTML を操作する例
• examples/console_logging.py … 自動操作中のコンソールログを集める例

出力の形

Claude が書いた Playwright スクリプトの実行結果（確認結果、スクリーンショットの画像ファイル、集めたログなど）が出力になります。

Claude Code（プラグインマーケットプレイスから）

リポジトリの README によると、このリポジトリ自体を Claude Code のプラグインマーケットプレイスとして登録できます。

/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

/plugin の画面から「Browse and install plugins」→「anthropic-agent-skills」→「example-skills」→「Install now」と選んでも入ります。example-skills プラグインには、このスキルを含む複数のスキルがまとめて入っています。

あわせて Python 用の Playwright と、Playwright が使う Chromium を入れておきます（SKILL.md には手順の記載なし）。

Claude Code（フォルダを置く）

公式ドキュメントでは、スキルは ~/.claude/skills/<スキル名>/SKILL.md（自分の全プロジェクト）か .claude/skills/<スキル名>/SKILL.md（そのプロジェクトだけ）に置けば使えるとされています。リポジトリのフォルダを付属ファイルごとコピーします。入れたあとは、依頼内容が description に合えば自動で読み込まれるほか、/スキル名 で直接呼び出すこともできます（プラグイン経由のときは /プラグイン名:スキル名 の形）。

Claude（アプリ）と Claude API

README には、このリポジトリのサンプルスキルは Claude.ai の有料プランですでに使える状態になっていると書かれています。自作スキルのアップロード方法はヘルプ記事「Using skills in Claude」に、API での使い方は Skills API のクイックスタートに案内されています。

• Python と Playwright（Python 版）、Playwright 用の Chromium が必要です。SKILL.md には入れ方の説明はないため、事前に準備しておく必要があります。
• 対象はローカルで動かす Web アプリです。with_server.py は localhost のポートへの接続で起動完了を判断します。
• SKILL.md や examples/ の例は、保存先が /tmp や /mnt/user-data/outputs/（Claude のファイル作成環境を想定したパス）になっています。手元で使うときは保存先を自分の環境に合わせて変える必要があります。
• SKILL.md 内に小さな綴りの誤り（absolutely が abslutely）がありますが、動作には関係しません。
• ライセンスはフォルダ内の LICENSE.txt で Apache License 2.0（Copyright 2026 Anthropic, PBC.）。