Playwrightスキルは視覚的なブラウザ実行でWebテストを自動化します。ローカルの開発サーバーを検出し、テストスクリプトを一時ストレージに書き込み、プロジェクトを乱すことなくフォーム入力、スクリーンショット、レスポンシブデザインの検証を行います。
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「playwright-skill」。 Take a screenshot of http://localhost:3000
預期結果:
Playwrightスキルはポート3000のサーバーを検出し、テストスクリプトを/tmp/playwright-test-screenshot.jsに書き込み、可視Chromiumブラウザを起動し、ページ.navigateし、/tmp/screenshot.pngにフルページスクリーンショットを撮影し、ファイルパスとともに完了を報告します。
正在使用「playwright-skill」。 Test responsive design at 1920x1080, 768x1024, and 375x667
預期結果:
スキルは3つのViewport設定でテストスクリプトを作成し、各サイズのスクリーンショットをdesktop.png、tablet.png、mobile.pngとして/tmpに保存し、ファイルパスと観察されたレイアウトシフトを含む結果を要約します。
正在使用「playwright-skill」。 Test login with username admin and password test123
預期結果:
スクリプトはログインフォームのフィールドに入力し、送信ボタンをクリックし、ナビゲーションを待機し、現在のURLにdashboardが含まれることを確認し、スクリーンショット証拠を/tmpに保存してログインの成功または失敗を報告します。
安全審計
低風險This is a legitimate Playwright browser automation skill with 293 static findings that are nearly all false positives. The scanner flagged documentation examples in markdown files as code. Actual code review confirms legitimate patterns: npm install for setup, file operations in /tmp, and localhost dev server detection. No credential exfiltration, malicious network calls, or security vulnerabilities detected.
低風險問題 (5)
風險因素
品質評分
你能建構什麼
自動回帰テスト
QAエンジニアは、スクリプトにPlaywrightスクリプトの作成と実行を依頼することで、繰り返しテストケースを自動化します。スキルは開発サーバーを検出し、可視ブラウザでテストを実行し、失敗のスクリーンショットを撮影します。
レスポンシブデザインの検証
フロントエンド開発者は、マルチViewportスクリーンショットをリクエストすることでブレークポイント全体のレイアウトを検証します。スキルはデスクトップ、タブレット、モバイルのサイズをテストし、レイアウトシフトと視覚的なバグを報告します。
E2Eワークフローテスト
フルスタック開発者は、ログインからチェックアウトまでの完全なユーザージャーニーをテストします。スキルはフォーム入力、ページナビゲーション、非同期操作の待機、成功状態の検証を行います。
試試這些提示
Take a screenshot of http://localhost:3000
Test login at http://localhost:3001/login with username admin and password test123. Verify redirect to dashboard.
Test http://localhost:3000/products at desktop 1920x1080, tablet 768x1024, and mobile 375x667. Save screenshots and report layout issues.
Go to http://localhost:3000, click the signup button, fill email field with test@example.com, fill password with secure123, submit form, wait for success message, take screenshot.
最佳實務
- localhostをテストする際には、常にdetectDevServersヘルパーを使用して正しいポートを自動的に見つける
- 一時ファイルをプロジェクトのることなく、テストスクリプトは/tmpディレクトリに書き込む
- デバッグにはheadless falseを設定して可視ブラウザモードを使用し、CIパイプラインではheadless trueに切り替え
避免
- 公開されるテストスクリプトに本番URLや実際のユーザー資格情報をハードコードしない
- 許可なく、またはレート制限を意識せずに外部ウェブサイトをテストしない
- /tmpが利用可能で安全な場合に、テストファイルをプロジェクトディレクトリに書き込まない