playwright-browser-automation
Playwrightでブラウザテストを自動化
Auch verfügbar von: DataFlight
ページの操作、フォーム入力、スクリーンショット撮影、ログインフロー検証を含むブラウザテストを自動化します。デバッグが容易な可視ブラウザで確実に動作するクリーンなPlaywrightスクリプトを作成します。
Die Skill-ZIP herunterladen
In Claude hochladen
Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen
Einschalten und loslegen
Teste es
Verwendung von "playwright-browser-automation". Test the login page on my dev server
Erwartetes Ergebnis:
- Found dev server running on http://localhost:3001
- Navigated to login page
- Filled email and password fields
- Submitted form successfully
- Redirected to /dashboard after login
- Screenshot saved: /tmp/login-test-success.png
Verwendung von "playwright-browser-automation". Check responsive design on my homepage
Erwartetes Ergebnis:
- Testing Desktop (1920x1080): Page loaded successfully
- Screenshot saved: /tmp/desktop.png
- Testing Tablet (768x1024): Page loaded successfully
- Screenshot saved: /tmp/tablet.png
- Testing Mobile (375x667): Page loaded successfully
- Screenshot saved: /tmp/mobile.png
- All viewports tested successfully
Verwendung von "playwright-browser-automation". Check if contact form submits correctly
Erwartetes Ergebnis:
- Navigated to /contact
- Filled name field: John Doe
- Filled email field: john@example.com
- Filled message field: Test message
- Clicked submit button
- Success message appeared
- Form submission verified
Sicherheitsaudit
Niedriges RisikoLegitimate browser automation skill. Static findings are false positives: documentation examples in SKILL.md are not executable code, prisma/schema.prisma contains only schema definitions, and Playwright APIs like $$eval were misidentified as eval(). External commands are limited to npm install for Playwright setup, filesystem access is scoped to /tmp for test artifacts.
Risikofaktoren
⚙️ Externe Befehle (1)
📁 Dateisystemzugriff (2)
⚡ Enthält Skripte (1)
Qualitätsbewertung
Was du bauen kannst
UIコンポーネントのテスト
異なるビューポートでのコンポーネント表示、レスポンシブレイアウト、ユーザーインタラクションを検証
エンドツーエンドテスト
ログインフロー、フォーム送信、マルチステップワークフローの自動テストを作成
ビジュアル回帰テスト
ページのスクリーンショットを撮影してビジュアルの一貫性を検証し、レイアウトの問題を発見
Probiere diese Prompts
Take a screenshot of http://localhost:3000 and save it to /tmp/homepage.png
Test how my homepage looks on desktop, tablet, and mobile viewports and take screenshots of each
Fill out the contact form on /contact with test data and verify the submission succeeds
Test the login flow by entering email test@example.com and password testpass123, then verify redirect to dashboard
Bewährte Verfahren
- スクリプトの先頭でTARGET_URL定数を使用してeasy configuration
- テストコードを記述する前にスキルで実行中の開発サーバーを自動検出させる
- 確実なテストのために固定のタイムアウトではなくwaitForSelectorとwaitForURLを使用
Vermeiden
- パラメータ化されたTARGET_URLではなくURLをハードコーディング
- 明示的な待機条件ではなく固定のsleep遅延を使用
- クリーンアップ用に/tmpではなくスキルディレクトリにテストファイルを記述