Webapp Testing

Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.

概要

The Web Application Testing skill, part of the anthropics/skills repository, provides a specialized toolkit for AI agents like Codex and Claude to interact with local web environments. By leveraging the Playwright framework, this tool enables automated verification of frontend components and systematic debugging of user interface behaviors. Agents can programmatically capture browser screenshots and monitor console logs to identify rendering issues or script errors. This skill is particularly useful for developers seeking to integrate browser-based automation into their AI workflows. As part of a repository with over 150,000 stars, it offers a standardized approach to browser automation, focusing on functional testing and visual validation within a controlled local environment.

ユースケース

Verifying frontend component functionality and layout consistency across local web applications.
Debugging complex UI behaviors by capturing screenshots and analyzing real-time browser logs.
Automating regression testing suites using Playwright-based browser interactions within AI agent workflows.

導入方法

# Review source first
open https://github.com/anthropics/skills/blob/main/skills/webapp-testing/SKILL.md

Copy or clone the skill folder into your agent skills directory after reviewing its instructions and scripts.

セキュリティ

Users should ensure that local web applications are properly isolated when granting AI agents access to browser automation tools. Since the skill interacts with local environments and captures visual data, sensitive information displayed in the browser or logs should be handled according to organizational security policies.

関連Skills

Skill Creator

anthropics/skills

コーディング

新しいスキルの作成、既存スキルの修正と改善、およびスキルパフォーマンスの測定を行います。ユーザーがスキルをゼロから作成、既存スキルの編集や最適化、スキルテストのための評価(evals)の実行、分散分析によるスキルパフォーマンスのベンチマーク、またはトリガー精度の向上のためのスキル説明の最適化を行いたい場合に使用します。

Claude CodeClaude
pythondesign
164,398 StarsApache-2.0

MCP Builder

anthropics/skills

コーディング

適切に設計されたツールを通じて、LLMが外部サービスと連携できるようにする高品質な MCP (Model Context Protocol) サーバーを作成するためのガイドです。Python (FastMCP) または Node/TypeScript (MCP SDK) を使用して、外部APIやサービスを統合する MCP サーバーを構築する際に使用します。

CodexClaude
typescriptpython
164,398 StarsApache-2.0

Claude API

anthropics/skills

コーディング

Claude API / Anthropic SDK のリファレンス — model ids、pricing、params、streaming、tool use、MCP、agents、caching、token counting、model migration。TRIGGER — ターゲットファイルを開く BEFORE を読み取ります。「1行のように見える」という理由でスキップしないでください。— 次の場合:プロンプトに Claude/Anthropic が何らかの形式(Claude、Anthropic、Fable、Opus、Sonnet、Haiku、`anthropic`、`@anthropic-ai`、`claude-*`、`us.anthropic.*`、`[1m]`)で指定されている場合、またはユーザーが LLM(pricing/model choice/limits/caching)について質問した場合 — 決して回答しないでください

Claude CodeClaude
typescriptpython
164,398 StarsApache-2.0

CI Cd And Automation

addyosmani/agent-skills

DevOps

CI/CDパイプラインのセットアップを自動化します。ビルドおよびデプロイパイプラインの設定や変更時に使用します。クオリティゲートの自動化、CIでのテストランナーの設定、またはデプロイ戦略の確立が必要な場合に使用してください。

typescriptsecurity
80,654 StarsMIT

API And Interface Design

addyosmani/agent-skills

コーディング

安定した API とインターフェース設計をガイドします。API、モジュールの境界、またはパブリックインターフェースの設計時に使用します。REST や GraphQL エンドポイントの作成、モジュール間の型コントラクトの定義、フロントエンドとバックエンドの境界設定に活用してください。

typescriptfrontend
80,654 StarsMIT

Browser Testing With Devtools

addyosmani/agent-skills

コーディング

Chrome DevTools MCP を介して実際のブラウザでテストを実行します。ブラウザで動作するものの構築やデバッグ時に使用します。DOM の検査、コンソールエラーのキャプチャ、ネットワークリクエストの分析、パフォーマンスのプロファイリング、または実際のランタイムデータによる視覚的出力の検証が必要な場合に使用してください。chrome-devtools MCP サーバーの設定が必要です。

Claude CodeClaude
javascriptreact
80,654 StarsMIT