browser-automation

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Browser Automation Skill

浏览器自动化技能

Playwright CSS Selector Reference

Playwright CSS 选择器参考

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`

选择器	说明	示例
`#id`	通过ID选择	`#checkout-btn`
`.class`	通过类选择	`.add-to-cart`
`tag`	通过元素标签选择	`button` , `input`
`[attr=val]`	通过属性选择	`[data-testid="submit"]`
`tag.class`	组合选择	`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

选择器	使用场景
`input[type="email"]`	邮箱输入框
`input[type="password"]`	密码输入框
`input[type="search"]`	搜索框
`input[name="q"]`	谷歌/搜索查询框
`textarea`	多行文本框
`select[name="country"]`	下拉菜单
`input[type="checkbox"]`	复选框
`input[type="radio"]`	单选按钮
`button[type="submit"]`	提交按钮

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

选择器	使用场景
`a[href*="cart"]`	购物车链接
`a[href*="checkout"]`	结账链接
`a[href*="login"]`	登录链接
`nav a`	导航菜单链接
`.breadcrumb a`	面包屑链接
`[role="navigation"] a`	ARIA导航链接

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

选择器	使用场景
`.product-price` , `[data-price]`	商品价格
`.add-to-cart` , `#add-to-cart`	加入购物车按钮
`.cart-total` , `.order-total`	购物车总价
`.quantity` , `input[name="quantity"]`	数量选择器
`.checkout-btn` , `#checkout`	结账按钮

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)

1. browser_navigate → 店铺首页
2. browser_type → 在搜索框输入商品名称
3. browser_click → 点击搜索按钮或按回车键
4. browser_read_page → 扫描搜索结果
5. browser_click → 目标商品
6. browser_read_page → 验证商品详情与价格
7. browser_click → "加入购物车"
8. browser_navigate → 购物车页面
9. browser_read_page → 验证购物车内容与总价
10. STOP → 向用户报告，等待确认
11. browser_click → "前往结账"（仅在确认后执行）

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

1. browser_navigate → 登录页面
2. browser_type → 邮箱/用户名输入框
3. browser_type → 密码输入框
4. browser_click → 登录/提交按钮
5. browser_read_page → 验证登录是否成功

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

1. browser_navigate → 表单页面
2. browser_read_page → 了解表单结构
3. browser_type → 依次填写每个字段
4. browser_click → 根据需要勾选复选框/单选按钮
5. browser_screenshot → 提交前进行视觉验证
6. browser_click → 提交按钮
7. browser_read_page → 验证提交确认信息

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

1. 针对每个店铺：
   a. browser_navigate → 店铺URL
   b. browser_type → 搜索关键词
   c. browser_read_page → 提取价格
   d. memory_store → 保存价格数据
2. memory_recall → 对比所有价格
3. 向用户报告结果

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

错误类型	恢复方法
元素未找到	尝试备选选择器，使用可见文本，滚动页面
页面超时	重试导航，检查URL
需要登录	通知用户，请求凭证
CAPTCHA	无法解决 — 通知用户
弹窗/模态框	先点击关闭/取消按钮
Cookie授权	点击"接受"或关闭横幅
速率限制	等待30秒后重试
页面错误	使用browser_read_page验证，返回上一页

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)

输入凭证前验证域名
切勿在memory_store中存储密码
提交敏感数据前检查是否为HTTPS
向用户报告可疑重定向
切勿自动批准金融交易
警告用户钓鱼指标（拼写错误的域名、异常URL）