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)

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`

browser-automation

Browser Automation Skill

Playwright CSS Selector Reference

Basic Selectors