browser-automation

ブラウザー自動化スキル

Playwright CSS セレクターリファレンス

基本セレクター

セレクター	説明	例
#id	ID による指定	#checkout-btn
.class	クラスによる指定	.add-to-cart
tag	要素による指定	button, input
[attr=val]	属性による指定	[data-testid="submit"]
tag.class	組み合わせ	button.primary

フォームセレクター

セレクター	用途
input[type="email"]	メールアドレス欄
input[type="password"]	パスワード欄
input[type="search"]	検索ボックス
input[name="q"]	Google／検索クエリ
textarea	複数行のテキスト欄
select[name="country"]	ドロップダウンメニュー
input[type="checkbox"]	チェックボックス
input[type="radio"]	ラジオボタン
button[type="submit"]	送信ボタン

ナビゲーションセレクター

セレクター	用途
a[href*="cart"]	カートへのリンク
a[href*="checkout"]	チェックアウトへのリンク
a[href*="login"]	ログインへのリンク
nav a	ナビゲーションメニューのリンク
.breadcrumb a	パンくずリストのリンク
[role="navigation"] a	ARIA ナビゲーションリンク

E コマースセレクター

セレクター	用途
.product-price, [data-price]	商品価格
.add-to-cart, #add-to-cart	カートに追加するボタン
.cart-total, .order-total	カートの合計金額
.quantity, input[name="quantity"]	数量セレクター
.checkout-btn, #checkout	チェックアウトボタン

一般的なワークフロー

商品の検索と購入

1. browser_navigate → store homepage
2. browser_type → search box with product name
3. browser_click → search button or press Enter
4. browser_read_page → scan results
5. browser_click → desired product
6. browser_read_page → verify product details & price
7. browser_click → "Add to Cart"
8. browser_navigate → cart page
9. browser_read_page → verify cart contents & total
10. STOP → Report to user, wait for approval
11. browser_click → "Proceed to Checkout" (only after approval)

アカウントへのログイン

1. browser_navigate → login page
2. browser_type → email/username field
3. browser_type → password field
4. browser_click → login/submit button
5. browser_read_page → verify successful login

フォームの送信

1. browser_navigate → form page
2. browser_read_page → understand form structure
3. browser_type → fill each field sequentially
4. browser_click → checkboxes/radio buttons as needed
5. browser_screenshot → visual verification before submit
6. browser_click → submit button
7. browser_read_page → verify confirmation

価格の比較

1. For each store:
   a. browser_navigate → store URL
   b. browser_type → search query
   c. browser_read_page → extract prices
   d. memory_store → save price data
2. memory_recall → compare all prices
3. Report findings to user

エラーからの復旧方法

エラー	復旧方法
要素が見つからない	別のセレクターを試す、表示テキストを使う、ページをスクロールする
ページのタイムアウト	ナビゲーションを再試行し、URL を確認する
ログインが必要	ユーザーに知らせ、認証情報を尋ねる
CAPTCHA	解決できないため、ユーザーに知らせる
ポップアップ／モーダル	まず閉じるボタンをクリックする
Cookie の同意	「Accept」をクリックするか、バナーを閉じる
レート制限	30 秒待ってから再試行する
ページが違う	browser_read_page で確認し、戻る

セキュリティチェックリスト

• 認証情報を入力する前にドメインを確認する
• memory_store にパスワードを保存しない
• 機密データを送信する前に HTTPS を確認する
• 不審なリダイレクトをユーザーに報告する
• 金融取引を自動承認しない
• フィッシングの兆候（スペルミスのあるドメイン、不自然な URL）について警告する