browser-automation

# Browser Automation Skill ## Playwright CSS Selector Reference ### Basic Selectors | Selector | Description | Example | |----------|-------------|---------| | `#id` | By ID | `#checkout-btn` | | `.class` | By class | `.add-to-cart` | | `tag` | By element | `button`, `input` | | `[attr=val]` | By attribute | `[data-testid="submit"]` | | `tag.class` | Combined | `button.primary` | ### Form Selectors | Selector | Use Case | |----------|----------| | `input[type="email"]` | Email fields | | `input[type="password"]` | Password fields | | `input[type="search"]` | Search boxes | | `input[name="q"]` | Google/search query | | `textarea` | Multi-line text areas | | `select[name="country"]` | Dropdown menus | | `input[type="checkbox"]` | Checkboxes | | `input[type="radio"]` | Radio buttons | | `button[type="submit"]` | Submit buttons | ### Navigation Selectors | Selector | Use Case | |----------|----------| | `a[href*="cart"]` | Cart links | | `a[href*="checkout"]` | Checkout links | | `a[href*="login"]` | Login links | | `nav a` | Navigation menu links | | `.breadcrumb a` | Breadcrumb links | | `[role="navigation"] a` | ARIA nav links | ### E-commerce Selectors | Selector | Use Case | |----------|----------| | `.product-price`, `[data-price]` | Product prices | | `.add-to-cart`, `#add-to-cart` | Add to cart buttons | | `.cart-total`, `.order-total` | Cart total | | `.quantity`, `input[name="quantity"]` | Quantity selectors | | `.checkout-btn`, `#checkout` | Checkout buttons | ## Common Workflows ### Product Search & Purchase ``` 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) ``` ### Account Login ``` 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 ``` ### Form Submission ``` 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 ``` ### Price Comparison ``` 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 ``` ## Error Recovery Strategies | Error | Recovery | |-------|----------| | Element not found | Try alternative selector, use visible text, scroll page | | Page timeout | Retry navigation, check URL | | Login required | Inform user, ask for credentials | | CAPTCHA | Cannot solve — inform user | | Pop-up/modal | Click dismiss/close button first | | Cookie consent | Click "Accept" or dismiss banner | | Rate limited | Wait 30s, retry | | Wrong page | Use browser_read_page to verify, navigate back | ## Security Checklist - Verify domain before entering credentials - Never store passwords in memory_store - Check for HTTPS before submitting sensitive data - Report suspicious redirects to user - Never auto-approve financial transactions - Warn about phishing indicators (misspelled domains, unusual URLs)