スキル playwright-skill
🎭

playwright-skill

低リスク ⚙️ 外部コマンド🌐 ネットワークアクセス📁 ファイルシステムへのアクセス🔑 環境変数⚡ スクリプトを含む

Playwrightでブラウザタスクを自動化

こちらからも入手できます: lackeyjb

このスキルにより、Claude CodeはPlaywrightを使用してブラウザ操作を自動化できます。開発サーバーの検出、テストスクリプトの実行 包括的なWebテスト機能を提供します。

対応: Claude Codex Code(CC)
📊 71 十分
1

スキルZIPをダウンロード

2

Claudeでアップロード

設定 → 機能 → スキル → スキルをアップロードへ移動

3

オンにして利用開始

テストする

「playwright-skill」を使用しています。 Test my local app at localhost:3000

期待される結果:

ポート3000で開発サーバーを自動検出。ブラウザを起動してテスト中...

ページタイトル: My Web App
ビューポート: 1280x720
✓ ページの読み込み成功
✓ コンソールエラーなし
✓ スクリーンショットを/tmp/screenshot-2024-01-15.pngに保存

「playwright-skill」を使用しています。 Check responsive design

期待される結果:

ビューポート間でテスト中:
- モバイル (375x667): ✓ レイアウトの問題なし
- タブレット (768x1024): ✓ レイアウトの問題なし
- デスクトップ (1280x720): ✓ レイアウトの問題なし

すべてのビューポートテストに合格。スクリーンショットを/tmp/に保存

セキュリティ監査

低リスク
v1 • 2/24/2026

This is a legitimate browser automation skill using the Playwright library. The static analyzer flagged many patterns but most are false positives: shell commands in documentation are usage examples, not dangerous execution; network access is required for browser automation; filesystem access is for writing test scripts to /tmp; environment variables are for configuration. No malicious intent detected.

5
スキャンされたファイル
1,811
解析された行数
8
検出結果
1
総監査数
中リスクの問題 (1)
SKILL.md:9-500API_REFERENCE.md:34-632
Shell Command Execution in Documentation
Documentation files contain shell command examples using backticks. These are usage examples for users, not dangerous code execution within the skill itself.
低リスクの問題 (2)
lib/helpers.js:15-46
Environment Variable Configuration
Skill reads configuration from environment variables (PW_HEADER_NAME, HEADLESS, etc.). This is legitimate configuration, not credential access.
run.js:209
Dynamic Script Loading
Skill uses require() to load Playwright and user test scripts. This is the expected mechanism for a scripting skill.

リスク要因

⚙️ 外部コマンド (1)
run.js:38-39
🌐 ネットワークアクセス (1)
lib/helpers.js:391
📁 ファイルシステムへのアクセス (1)
run.js:205
🔑 環境変数 (1)
lib/helpers.js:15-16
⚡ スクリプトを含む (1)
lib/helpers.js:174
監査者: claude

品質スコア

38
アーキテクチャ
100
保守性
87
コンテンツ
50
コミュニティ
81
セキュリティ
91
仕様準拠

作れるもの

Web開発者テスト

開発サーバーを自動検出してから、複数のビューポートサイズで自動ブラウザテストを実行し、ローカルでWebアプリケーションをテストします。

QA自動化

Webアプリケーションのエンドツーエンドテストを作成し、ログインフローを検証し、様々なデバイスでレスポンシブデザインをチェックします。

Webスクレイピング

JavaScriptレンダリングが必要なWeb사이트からコンテンツを抽出します。スクリーンショットや構造化データの抽出を含みます。

これらのプロンプトを試す

ローカルWebアプリをテスト 
私のローカルWebアプリケーションをテストしてください。まず実行中の開発サーバーを検出し、メインページが正しく読み込まれることを確認し、コンソールエラーがないかチェックしてください。
レスポンシブデザインチェック 
私のWebアプリケーションがモバイル、タブレット、デスクトップのビューポートで良好に表示されるか確認してください。各サイズでスクリーンショットを取り、レイアウトの問題を報告してください。
ログインフローテスト 
[URL]のログインフローをテストしてください。資格情報を入力し、ログインをクリックし、ダッシュボードやユーザーメニューを確認して認証が成功したことを検証してください。
フォーム送信テスト 
[URL]のcontactフォームをテストデータで入力して送信してください。フォームが正常に送信され、バレーションエラーがないか確認してください。

ベストプラクティス

  • 保守性のために常に定数または環境変数でパラメータ化されたURLを使用
  • プロジェクトディレクトリをクリーンに保つため、テストスクリプトは/tmpに記述
  • デバッグには表示モード（headless: false）を使用し、CIではheadlessに切り替え
  • waitForSelectorとwaitForNavigationで非同期操作を適切に処理

回避

  • テストスクリプトに認証情報をハードコードせず、環境変数を使用
  • 承認なしに本番Webサイトをテストしない
  • sleep/タイマーのみに頼らず、信頼性の高いテストのために適切な待機条件を使用
  • スキルディレクトリにテストファイルを書き込まず、常に/tmpを使用

よくある質問

Playwrightのセットアップ方法は？
スキルディレクトリで'npm run setup'を実行するか、初回使用時にスキルがインストールを求めます。
外部Webサイトをテストできますか？
はい、一部のサイトは自動ブラウザをブロックする場合があります。常にrobots.txtとWebサイトの利用規約を遵守してください。
カスタムヘッダーを渡す方法は？
PW_HEADER_NAMEとPW_HEADER_VALUE環境変数を設定するか、複数のヘッダーの場合はJSON形式でPW_EXTRA_HEADERSを設定してください。
headlessモードで実行できますか？
表示モードにはHEADLESS=false環境変数を設定してください。デフォルトはCI環境のheadlessモードです。
テストスクリプトはどこに保存されますか？
テストスクリプトはプロジェクトディレクトリを散らさないよう、/tmp/playwright-test-*.jsに書き込まれます。
FirefoxやWebKitで使用できますか？
はい、スキルはchromium、firefox、webkitブラウザをサポートしています。追加のブラウザは'npx playwright install firefox'でインストールできます。

開発者の詳細

作成者

sickn33

ライセンス

MIT

リポジトリ

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/playwright-skill

参照

main

ファイル構成

📁 lib/

📄 helpers.js

📄 API_REFERENCE.md

📄 package.json

📄 run.js

📄 SKILL.md