webapp-testing skillの使い方｜試した結果

「公開前に、自社サイトのリンク切れやフォームの動きを確かめたい。でも、自分で全ページを押して回るのは面倒だ」——そんなとき、webapp-testing skillで任せられないかと考える人は多いはずです。

結論から言うと、webapp-testing（ウェブアップ・テスティング）は、Claude Codeに「ブラウザを自動で動かすPythonのプログラム」をその場で書かせて、サイトの動作確認をさせるためのスキルです。私が試した1回の依頼では、リンク切れ、お問い合わせフォーム、スマホ幅の3つの確認が、約47秒で終わりました。ただし、同じ依頼をスキルなしで出しても、出来はほぼ同じでした。

株式会社Fyveは、Claude Codeのスキルを実際に入れ、架空の会社の仕事で試した結果だけを書いています。この記事も、入れ方と頼み方に加えて、スキルなしとの違い、同じブラウザ系のagent-browser・playwright-cliとの違い、安全面、試せなかったことまで正直に書きます。なお、このスキルはWebアプリの開発者向けの色が濃いので、読むときはその前提でお付き合いください。

webapp-testingとは｜サイトの動作確認をAIに任せるスキル

webapp-testingは、Anthropicが公開しているスキル集「anthropics/skills」の中の1本です。説明文には「Playwrightを使って、ローカルのWebアプリの動作確認・画面の撮影・ブラウザのログの確認をする道具一式」とあります（Playwrightは、ブラウザを自動で動かすための道具です）。

2026年10月21日時点で、リポジトリのスター数は182,538、最後の更新は2026年10月9日でした。スキルのライセンスファイルはApache License 2.0です。

中身は小さく、説明書（SKILL.md）が約3.9KB、補助のプログラムが1本（scripts/with_server.py）、サンプルが3本（examples/）だけです。専用のコマンドはありません。説明書が示すのは「ブラウザを動かすPythonのプログラムを自分で書いて、動かす」という方針と、サーバーの起動と停止を代わりにやってくれる補助プログラムの使い方です。

どんな仕事に使えるか

• 公開前のサイトで、リンク切れ（開くと「ページが見つかりません」になるリンク）を全ページ分探す
• お問い合わせフォームに、空のまま・入力して、それぞれ送信して動きを確かめる
• スマホの画面幅で開いて、横にはみ出すページを見つける
• ブラウザのコンソール（エラーの記録）を集めて、不具合の手がかりにする（説明書とサンプルにあるが、私は試していません）

webapp-testingの入れ方｜READMEにある手順

リポジトリのREADMEには、Claude Codeへの入れ方として、次の2つが書かれています。

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

webapp-testingは、マーケットプレイスの定義ファイルで、example-skills の中に入っています。/plugin install のあとに「Browse and install plugins」から選ぶ方法もREADMEに書かれています。

私の試験では、普段の環境を汚さないため、このプラグイン経由ではなく、スキルのフォルダ（skills/webapp-testing）を作業フォルダの .claude/skills/ にコピーして使いました。プラグインで入れる手順そのものは、試していません。

説明書に書かれていない準備

説明書は「Pythonのプログラムを書く」と言うだけで、ブラウザを動かす部品（PythonのPlaywrightライブラリ）の入れ方は書いていません。私は、作業フォルダの中に専用の環境（venv）を作り、そこに入れました。

python3 -m venv .venv
.venv/bin/pip install playwright==1.59.0

ここで1つ、つまずきました。最新版のplaywright（1.64.0）を入れたところ、「新しいブラウザをダウンロードしてください」と止まりました。私のMacには少し前の版に合うChromiumがすでに入っていたので、その版に合うplaywright 1.59.0に合わせると動きました。何も入っていない環境では、playwright install chromium でブラウザを取得する必要があるはずです（私は、この手順は実行していません）。

この記事を読んでいるあなたへ無料プレゼント仕事でAIを使う人が「絶対に」知っておくべき Claude Codeスキル TOP1031本を実際に入れて、スキルなしと比べた結果つき（全28ページ）

文章・スライド・図・数字・調べもの・契約書など、仕事別の10本1本ごとに、スキルなしと比べた時間・費用・出来実物の画面と、Claude Code にそのまま貼れる頼み方

無料でダウンロード

中身のプレビューを見る ↓登録すると、過去の特典もまとめて受け取れます（PDF 18点・合計468ページ ＋ すぐ使えるzip素材 3点）

Claude Codeにこう頼む

スキル名を言わなくても、サイトの動作確認を頼めば自動で起動しました。頼み方の例です。

• 「このサイトを公開前に確認して。リンク切れがないか、お問い合わせフォームが動くか、スマホ幅ではみ出すページがないかを調べて」
• 「フォームに何も入れずに送ったときと、全部入れて送ったときの画面を保存して。お客さんが困りそうな点をまとめて」
• 「結果は『問題点・どのページか・直し方の案』の表にして」

今回は名前なしで起動したので、「webapp-testingを使って」と名前を添える頼み方は試していません。

試した結果｜架空の会社のサイトを公開前チェックした

試したのは、架空の会社（手作り家具を売る従業員12名の会社）の仕事です。会社のサイトをパソコン上に用意し、私が不具合を3つ仕込んであります。リンク切れが1つ、料金表がスマホ幅で横にはみ出す問題、そして必須項目が空のまま送信しても何も起きないフォームです。次の依頼を、1回で出しました。

結果は次のとおりです。

• 発動：スキル名を言わずに自動で起動した
• 時間・使用量：46.9秒、7ターン、費用の概算は0.129ドル
• できたもの：画面のスクリーンショット9枚（フォームの4状態、スマホ幅の5ページ）、問題点6件を表にしたレポート（check-report.md）、確認用のPythonプログラム（39行）
• 正確さ：仕込んだ3つとも見つけた

見つけた内容は次のとおりです。

• リンク切れ：5ページのリンクを全部開いて状態を確認し、トップページの「商品カタログ（PDF）をダウンロード」が存在しない catalog.html に向いていて404になることを指摘した。ほかのリンクは全部開けた
• フォーム：何も入れずに送っても、エラー表示もなく何も起きない。全部入れて送ると「送信しました」と出るが、送信先の設定も通信処理もなく、実際には会社に届かない（試験用の静的なサイトで、送信先を持たない作りのため。本物のサイトの不具合とは限らない）。頼んでいない「メール欄に abc と入れる」試験も実際に行い、そのまま通ることを確かめた
• スマホ幅：iPhone 13相当（幅390px）で5ページを開き、料金ページだけがページ全体で924pxになり、横にはみ出すと指摘した。原因は表の幅が900px固定のため。直し方として、表を横スクロールの枠で包む、または幅を100%にしてカード状に積む、の2案を挙げた

プログラムを書く前の動きも確認しました。説明書にある「まず補助プログラムの --help を見る」という手順を守り、サーバーの起動と停止には with_server.py を使っていました。確認が終わるとサーバーは自動で止まり、ポートに何も残っていないことも自分で確かめていました。

残ったプログラムを、AIなしで再実行してみた

このスキルのいちばん面白い点は、確認用のプログラムがファイルとして残ることだと感じました。私が、Claude Codeを使わずに、残ったプログラムを with_server.py で流し直したところ、約9.5秒で、同じ結果（404が1件、スマホで924px）が出ました。公開前に毎回同じ確認をしたいなら、AIに頼み直さなくてもよい、ということです。

気になった点もあります。このプログラムは、サイトのページ名（index、products…の5つ）を中に直接書いていました。ページを増やしたときは、書き換えが要ります。

スキルなしとの違い｜同じ依頼を、スキルを入れない状態で出した

「入れると何が変わるか」を確かめるため、スキルを入れていない別のフォルダで、同じ依頼文を同じ形で出しました（実行記録に、スキルの呼び出しが無いことも確認しています）。

出来は、仕込んだ3つを見つけた点で同じでした。リンク切れ、フォームの不具合（空の送信・メール形式・送信先なし）、料金ページの924pxを、スキルなしでも同じように見つけています。

違いは次のとおりです。

• スキルなしのほうが、確かめた範囲が少し広かった。ヘッダーのメニューが折り返して「お問い合わせ」が途中で切れる点と、トップの新着にあるダイニングチェアが商品一覧に無い点も指摘した。パソコン幅のスクリーンショットも5枚撮っていた（計14枚）。さらに、撮った画面を自分で開いて見て、確かめていた。スキルありの回は、撮った画面を開いて見る操作が実行記録に無かった
• スキルありのほうが、時間は約1割短く、費用は約25%安かった。理由は、スキルの説明書が小さく（約3.9KB）、ブラウザの部品の使い方を調べ直す手間が少なかったためと考えられる（推測）
• どちらの回も、サーバーを自分で立てて、最後に止めていた

注意してほしい点が2つあります。1つ目は、スキルなしで動いたのは、私のMacにPlaywright（Python）とChromeが先に入っていたからです。何も入っていない環境では、スキルなしの場合にClaude Codeがどこまで自力で準備できるかは、確かめていません。2つ目は、各条件1回ずつの試験なので、時間や費用の差は、ぶれの範囲かもしれません。

つまり、静的な5ページ程度のサイトを確かめる軽い仕事では、スキルを入れても出来は変わらない、というのが私の試した範囲の結論です。スキルの価値は、「サーバーの起動と停止を補助プログラムに任せる」という型を、毎回思い出さなくてもよい点にあると考えられます。ただし、npm run dev のような動きの多いアプリでの効き目は、今回は試していません。

agent-browser・playwright-cliとの違い

同じ「ブラウザを動かす」スキルに、Vercel Labsのagent-browserと、Microsoftのplaywright-cliがあります。同じ架空の会社のサイトで試した記録があるので、並べてみます。

• 出来：3本とも、料金ページだけが横にはみ出す点（924px）を見つけた。agent-browserとplaywright-cliは、同じ「スマホ幅の確認」だけを頼んだ回で、21.2秒・12ターン・0.100ドルと、21.6秒・7ターン・0.097ドルだった。webapp-testingの回はリンク切れとフォームも一緒に頼んだ依頼なので、この時間は単純に比べられない
• 考え方の違い：agent-browserとplaywright-cliは、専用のコマンドがあり、AIが「開く」「押す」を1つずつ呼ぶ。webapp-testingは、コマンドが無く、AIが確認用のプログラムを1本書いて、まとめて流す。そのため、確認用のプログラムが残り、AIなしでも再実行できる（agent-browserやplaywright-cliの操作の記録が同じように再実行できるかは、試していません）
• 用意するもの：webapp-testingは、Pythonとplaywrightのライブラリ、Chromiumが要る。agent-browserは、npmで入れる本体と、専用Chrome（186MBをダウンロード）。playwright-cliは、npmで入れる本体で、手元にChromeがあれば追加のダウンロードは要らなかった
• 得意な場面の見立て：自分のサイトを、公開前に毎回同じ手順で確かめたいなら、プログラムが残るwebapp-testing。知らないサイトを開いて調べる、画面の録画や通信の記録まで使うなら、専用コマンドのある2本。これは、説明書の記載と試した結果からの見立てで、同じ仕事を3本で測ったものではありません

中身の安全確認｜何を外に送り、何を実行するか

入れる前に、スキルのフォルダの全ファイルを読んで確かめました。

• スキルの権限：SKILL.mdの見出し部分に、allowed-tools（使えるコマンドの限定）はありません。つまり、ふだんのClaude Codeと同じ確認の仕組みで動きます。コマンドを自動で許可する設定にしている場合は、書かれるプログラムの内容に注意してください
• 外への通信：補助プログラム（with_server.py）とサンプル3本には、外部へ送信する処理が見つかりませんでした。通信は、自分のパソコン上のサーバー（localhost）への接続だけです。ただし、ブラウザの部品（Playwright）をダウンロードするときは、Playwrightの配布元に接続します（私は、今回この取得を実行していません）
• コマンドの実行：with_server.py は、--server に渡された文字列を、そのままシェルで実行します（shell=True）。頼んだ内容が誰かに差し込まれる可能性があるなら、その文字列は確かめてから許可してください。また、補助プログラムの出力を読み出さずに溜める作りに見えるので、大量にログを出すサーバーでは止まる可能性があります（コードを読んだ範囲の推測で、試していません）
• ログイン情報：スキル自体は、ログイン情報を保存する仕組みを持っていません。ただし、書かれるプログラムの中に、パスワードを直接書くことは起こりえます。ログインが必要なサイトの確認は試していません
• サンプルの罠：サンプルのプログラムの保存先は /mnt/user-data/outputs/ など、ほかの環境を前提にしたパスで書かれています。そのまま使うと、書き込みに失敗します。私の依頼では、Claude Codeが自分で保存先を決めて書いていたので、問題になりませんでした

webapp-testingが向かない場面

• ブラウザ操作の道具がすでに入っていて、数ページの確認だけをするとき（スキルなしでも、同じ出来で終わりました）
• ログインが必要なサイトを確かめたいとき（今回は試していません）
• 公開されている他社のサイトを大量に調べたいとき（説明書は、自分が動かせるローカルのアプリを前提にしています）
• 「AIが見た目を判断した結果」まで欲しいとき（今回のスキルありの回は、撮った画面を開いて見る操作がありませんでした。見た目の確認も任せたいなら、「撮った画面を見て、崩れがないか教えて」と頼む必要があると考えられます）
• Pythonの環境を用意するのが負担なとき（プログラムを書かないなら、npmで入れるコマンド型のほうが手順は少ないと考えられます）

試していないこと

• プラグイン（/plugin install example-skills@anthropic-agent-skills）経由での導入
• playwright install chromium によるブラウザの取得
• 名前を添えた頼み方（「webapp-testingを使って」）
• npm run dev などで動く、動きの多いWebアプリ。2つのサーバー（裏側と画面側）を同時に立てる使い方
• ブラウザのコンソールの記録（console_logging.py）と、要素の洗い出し（element_discovery.py）のサンプル
• ログインが必要なサイト、日本語以外のサイト、動作の遅いサイト
• スキルなしの場合に、何も入っていない環境で、Claude Codeがどこまで準備できるか

まとめ｜入れる前のチェックリスト

• □ 確認したいのは、自分で動かせるサイトやアプリである（他社のサイトではない）
• □ Pythonが使える。作業フォルダの中に専用の環境（venv）を作り、playwright を入れた
• □ playwrightの版と、手元のChromiumの版が合っている（合わないと「ブラウザをダウンロードしてください」と止まる）
• □ 公開元がAnthropicのanthropics/skillsであると確認した
• □ 最初は、ログインが不要なページで試した
• □ コマンドを自動で許可する設定を使うなら、書かれるプログラムと --server の中身を確かめてから許可する
• □ 結果のレポートは「実際に試した項目」と「推測の項目」を分けて頼んだ
• □ 撮った画面は、自分の目でも見た

webapp-testingは、サイトの公開前チェックを言葉で頼め、確認用のプログラムまで残る無料のスキルです。ただ、軽い確認ではスキルなしと出来が変わりませんでした。まずは、自社サイトのリンク切れ・フォーム・スマホ幅のように、公開のたびに繰り返す確認で試して、残ったプログラムを使い回せるかを見るのがよいと思います。

ブラウザ自動化の道具や、スキルの選び方は、次の記事でも扱っています。

Claude Codeブラウザ自動化｜Playwrightとbrowser-use比較

Claude Codefind-skillsとは｜「〜のスキルある？」に答えて入れる使い方

Claude CodeClaude Codeのバンドル済みスキル一覧｜追加インストール不要で使えるもの

「ブラウザ作業を任せる」のスキルは、ほかに2本を同じ架空の会社の材料で試しています。

Claude Codeagent-browserの使い方｜ブラウザ操作スキルを試した結果

Claude Codeplaywright-cli skillの使い方｜試した結果