Browser Automation
Playwright-based browser automation patterns for autonomous web interaction
Install
npx skills add RightNow-AI/openfang --skill browser-automation -g -a claude-code -yPress to copy:C Claude CodeX CodexU CursorA Ask your agent
- Context cost
- Lightabout 918 tokens
- Runs scripts
- No, instructions only
What it does
Playwright-based browser automation patterns for autonomous web interaction
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
