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
- browser_navigate → store homepage
- browser_type → search box with product name
- browser_click → search button or press Enter
- browser_read_page → scan results
- browser_click → desired product
- browser_read_page → verify product details & price
- browser_click → "Add to Cart"
- browser_navigate → cart page
- browser_read_page → verify cart contents & total
- STOP → Report to user, wait for approval
- browser_click → "Proceed to Checkout" (only after approval)
Account Login
- browser_navigate → login page
- browser_type → email/username field
- browser_type → password field
- browser_click → login/submit button
- browser_read_page → verify successful login
Form Submission
- browser_navigate → form page
- browser_read_page → understand form structure
- browser_type → fill each field sequentially
- browser_click → checkboxes/radio buttons as needed
- browser_screenshot → visual verification before submit
- browser_click → submit button
- browser_read_page → verify confirmation
Price Comparison
- 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
- memory_recall → compare all prices
- 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)