browser-automation

Playwright-based browser automation patterns for autonomous web interaction

Quality

63%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

High

Do not use without reviewing

Fix and improve this skill with Tessl

tessl review fix ./crates/openfang-hands/bundled/browser/SKILL.md

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)

Repository: RightNow-AI/openfang
Path: crates/openfang-hands/bundled/browser/SKILL.md
Commit: acf2587

Last updated: about 7 hours ago
First committed: 5 months ago

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.