Fähigkeiten browser-automation
📦

browser-automation

Sicher

信頼性の高いブラウザ自動化スクリプトの構築

Auch verfügbar von: EmilLindfors

不安定なブラウザテストは、何時間も及ぶデバッグ時間を浪費します。安定したセレクター、スマートな待ち処理、検出回避の自動化のための Playwright パターンを学びましょう。

Unterstützt: Claude Codex Code(CC)
📊 70 Angemessen
1

Die Skill-ZIP herunterladen

2

In Claude hochladen

Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen

3

Einschalten und loslegen

Teste es

Verwendung von "browser-automation". ログインボタンで要素が見つからないエラーによりテストが失敗する

Erwartetes Ergebnis:

CSS セレクターを getByRole に置き換えます：await page.getByRole('button', { name: 'Sign in' }).click()。Playwright は要素が操作可能になるまで自動的に待機します。

Verwendung von "browser-automation". 個別に実行するとテストは通過するが、まとめて実行すると失敗する

Erwartetes Ergebnis:

test.beforeEach で context = await browser.newContext() を使用して、テストごとに新しいブラウザコンテキストを作成します。これにより、テスト間で Cookie と localStorage が分離されます。

Sicherheitsaudit

Sicher
v1 • 2/25/2026

Static analysis produced false positives on markdown content. Backticks on line 71 are inline code formatting, not shell execution. No cryptographic code exists on lines 3 or 74. This is purely instructional documentation with no executable security risks.

1
Gescannte Dateien
75
Analysierte Zeilen
0
befunde
1
Gesamtzahl Audits
Keine Sicherheitsprobleme gefunden
Auditiert von: claude

Qualitätsbewertung

38
Architektur
100
Wartbarkeit
87
Inhalt
21
Community
100
Sicherheit
91
Spezifikationskonformität

Was du bauen kannst

E2E テストアーキテクチャ

不安定な失敗のない CI/CD パイプラインで一貫して実行される信頼性の高いエンドツーエンドテストを構築します。

ウェブスクレイピングシステム

動的コンテンツに対応し、検出を回避し、長期間にわたり壊れることなく実行されるスクレイパーを作成します。

AI エージェントブラウザインタラクション

適切な待機戦略とセレクターを使用して、AI エージェントがウェブインターフェースと確実に連携できるようにします。

Probiere diese Prompts

初心者：不安定なテストセレクターの修正 
ボタンのクリックを試みると失敗する不安定なテストがあります。このテストは CSS セレクターを使用していますが、要素が見つからないことがあります。ユーザー視点のロケーターと適切な待機パターンを使用して書き直すのを手伝ってください。
中級者：テスト分離の構築 
テストがブラウザ状態を共有しているため、テスト同士が干渉しています。各テストが完全に分離され、新鮮な Cookie、ストレージ、コンテキストで実行されるようにテストスイートを構成する方法を示してください。
上級者：検出回避スクレイピング 
ボット検出を使用するウェブサイトをスクレイピングする必要があります。ステルス技術の実装、リクエスト間の適切な遅延の設定、予期せず表示されるポップアップダイアログの処理についてガイドしてください。
エキスパート：トレースによるテスト失敗のデバッグ 
テストがローカルでは通過するのに CI で断続的に失敗しています。トレース収集の設定、一貫したビューポート設定の実施、失敗の分析による根本原因の特定を手伝ってください。

Bewährte Verfahren

  • 壊れやすい CSS や XPath セレクターの代わりに、getByRole、getByText、getByLabel などのユーザー視点のロケーターを使用する
  • 手動のタイムアウトや sleep 呼び出しを追加する代わりに、Playwright の自動待機メカニズムを信頼する
  • 完全な分離を確保し、状態の漏洩を防ぐために、各テストを新しいブラウザコンテキストで実行する

Vermeiden

  • 特定の条件を待つのではなく、任意の waitForTimeout 呼び出しを追加する
  • セマンティックなユーザー視点のロケーターの代わりに、CSS セレクターや XPath を最初の選択肢として使用する
  • 複数のテストで単一のブラウザコンテキストを共有し、状態の汚染を引き起こす

Häufig gestellte Fragen

なぜテストは CI で断続的に失敗するのにローカルでは通過するのですか？
CI 環境は異なるタイミング特性を持っています。要素が操作可能になるまで適切に待機し、デバッグのためにトレース収集を有効にし、各テストが完全な分離を持つことを確認してください。
CSS セレクターとユーザー視点のロケーターの違いは何ですか？
getByRole などのユーザー視点のロケーターは、ユーザーがアプリとどのように対話するかを反映しており、UI の変更に対してより回復力があります。CSS セレクターは、リファクタリング中に変更される可能性のある実装詳細にテストを結合させます。
スクレイパーがボット検出を回避するにはどうすればよいですか？
リクエスト間に現実的な遅延を追加し、ステルスイメージをマスキングするためのステルスイメージプラグインを使用し、ユーザーエージェントをローテーションし、マウス移動で人間らしいインタラクションパターンを模倣します。
プロジェクトには Playwright と Puppeteer のどちらを使用すべきですか？
Playwright は複数のブラウザをサポートし、組み込みの自動待機機能があります。Puppeteer は Chrome 中心ですが軽量です。クロスブラウザテストには Playwright を選択し、Chrome 専用のニーズには Puppeteer を選択してください。
テスト中に表示されるポップアップダイアログはどのように処理すればよいですか？
ポップアップダイアログを開くアクションをトリガーする前に、ポップアップダイアログの表示を待機します。page.on('dialog') イベントハンドラーまたは waitForEvent を使用してダイアログを適切にキャッチし処理します。
テストにはどのビューポートサイズを使用すべきですか？
browser.newContext({ viewport: { width: 1280, height: 720 } }) を使用して、すべてのテストで一貫したビューポートサイズを設定します。これにより、再現可能なレイアウトとスクリーンショット比較が確保されます。

Entwicklerdetails

Autor

sickn33

Lizenz

MIT

Repository

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/browser-automation

Ref

main

Dateistruktur

📄 SKILL.md