我用 Tarsier 做了个网站自动化探索工具，聊聊 AI 驱动的网页理解

# 传统方式：硬编码选择器
driver.find_element(By.CSS_SELECTOR, "#login-btn").click()
driver.find_element(By.XPATH, "//input[@name='username']").send_keys("test")

视觉截图（带标签）  →  大模型理解  →  输出 [ID]  →  查映射表  →  得到 XPath  →  执行操作

# 可交互元素的判断标准
INTERACTIVE_ELEMENTS = [
    'a', 'button', 'input', 'select', 'textarea',
    '[role="button"]', '[role="link"]', '[onclick]'
]

// 在元素旁边插入标签
const tag = document.createElement('div');
tag.textContent = `[${id}]`;
tag.style.cssText = `
    position: absolute;
    background: #FF6B6B;
    color: white;
    font-size: 12px;
    padding: 2px 4px;
    border-radius: 3px;
    z-index: 10000;
`;
element.parentNode.insertBefore(tag, element);

# 返回结果
{
    "screenshot": bytes,  # 带标签的截图
    "tag_to_xpath": {
        1: "//button[@id='login']",
        2: "//input[@name='username']",
        3: "//a[@href='/register']",
        # ...
    }
}

pip install tarsier playwright openai
playwright install chromium

import asyncio
from playwright.async_api import async_playwright
from tarsier import Tarsier, GoogleVisionOCRService

asyncdef basic_demo():
    asyncwith async_playwright() as p:
        browser = await p.chromium.launch(headless=False)
        page = await browser.new_page()
        await page.goto("https://example.com")
        
        # 标注页面
        tarsier = Tarsier(GoogleVisionOCRService(api_key="..."))
        screenshot, tag_to_xpath = await tarsier.page_to_image(page)
        
        print(f"发现 {len(tag_to_xpath)} 个可交互元素")
        await browser.close()

asyncio.run(basic_demo())

from openai import OpenAI

class VisionLLMClient:
    """视觉大模型客户端"""
    
    SYSTEM_PROMPT = """你是一个网页自动化助手。
页面上的可交互元素已被标记：[#ID] 输入框、[@ID] 链接、[$ID] 按钮
输出操作：CLICK [ID] / TYPE [ID] "文本" / SCROLL UP|DOWN / DONE
每次只输出一个操作。"""

    def __init__(self, api_base, api_key, model):
        self.client = OpenAI(base_url=api_base, api_key=api_key)
        self.model = model
    
    asyncdef analyze(self, screenshot: bytes, instruction: str) -> str:
        """分析截图，返回操作指令"""
        # 完整实现见 GitHub 仓库
        ...

class WebAgent:
    """AI 驱动的网页自动化代理"""
    
    def __init__(self, llm_client, browser_manager, page_tagger):
        self.llm = llm_client
        self.browser = browser_manager
        self.tagger = page_tagger
    
    asyncdef execute_task(self, url: str, task: str):
        """执行用户任务"""
        await self.browser.goto(url)
        
        for step in range(20):  # 最多 20 步
            # 1. 标注页面元素
            screenshot, tag_to_xpath = await self.tagger.tag_page(self.browser.page)
            
            # 2. 让大模型分析并决策
            action = await self.llm.analyze(screenshot, task)
            
            # 3. 解析并执行动作（CLICK/TYPE/DONE 等）
            if action == "DONE":
                break
            await self._execute_action(action, tag_to_xpath)
            
            # 4. 清理标签，等待页面更新
            await self.tagger.cleanup(self.browser.page)

{
  "model": "gpt-4o",
"messages": [
    {"role": "system", "content": "【系统提示词】"},
    {"role": "user", "content": [
      {"type": "text", "text": "【用户指令 + 页面信息】"},
      {"type": "image_url", "image_url": {"url": "data:image/png;base64,..."}}
    ]},
    {"role": "assistant", "content": "CLICK [$5]"},
    {"role": "user", "content": [...]},
    ...
  ],
"max_tokens": 500,
"temperature": 0.1
}

SYSTEM_PROMPT = """你是一个专业的 Web 自动化助手。

页面上的可交互元素已被标记：
- [#ID]：文本输入框
- [@ID]：超链接  
- [$ID]：按钮或其他可交互元素
- [%ID]：图片元素

可用的操作格式：
- CLICK [ID] - 点击指定元素
- TYPE [ID] "文本内容" - 在输入框中输入文本
- SCROLL UP/DOWN - 向上或向下滚动页面
- GOTO "URL" - 导航到指定URL
- WAIT 秒数 - 等待指定秒数
- PAUSE - 暂停执行（用于验证码等人工介入场景）
- DONE - 任务完成

重要规则：每次只输出一个操作命令。"""

# 命令解析正则表达式
CLICK_PATTERN = re.compile(r"CLICK\s*\[[@#$%]?(\d+)\]", re.IGNORECASE)
TYPE_PATTERN = re.compile(r'TYPE\s*\[[@#$%]?(\d+)\]\s*["\'](.+?)["\']', re.IGNORECASE)
SCROLL_PATTERN = re.compile(r"SCROLL\s+(UP|DOWN)", re.IGNORECASE)
# ... 更多模式见 action_executor.py

点击 ID 为 5 的按钮

ANALYZE_PAGE_PROMPT = """分析这个网页截图，返回以下 JSON 格式的信息：
{
    "page_type": "login/home/list/detail/form/dashboard/unknown",
    "page_description": "一句话描述这个页面的功能",
    "has_sidebar_nav": true/false,
    "sidebar_nav_items": ["侧边栏导航菜单项名称列表"],
    "suggested_explorations": ["建议探索的操作"]
}
重要：只返回 JSON，不要有其他文字。"""

PLAN_PROMPT = """你是一个网站操作专家。根据用户的任务和网站记忆，规划操作步骤。

## 网站信息
域名: {domain}
已知页面: {pages}
已知操作路径: {actions}

## 用户任务
{task}

请返回 JSON 格式的操作计划：
{{"can_plan": true/false, "confidence": 0.0-1.0, "plan": [...]}}"""

┌─────────────────────────────────────────────────────────┐
│                    网站自动化探索流程                      │
├─────────────────────────────────────────────────────────┤
│  1. 访问首页，截图分析页面类型和结构                        │
│                    ↓                                     │
│  2. 识别导航菜单、CRUD 按钮等可探索元素                     │
│                    ↓                                     │
│  3. 按优先级依次点击，记录页面变化                          │
│                    ↓                                     │
│  4. 分析新页面，发现更多可探索元素                          │
│                    ↓                                     │
│  5. 重复 3-4，直到覆盖所有功能                             │
│                    ↓                                     │
│  6. 输出：页面结构图 + 操作记录 + 测试用例                   │
└─────────────────────────────────────────────────────────┘

class PageAnalyzer:
    """页面语义分析器"""
    
    async def analyze_page(self, screenshot: bytes) -> Dict:
        """分析页面类型和结构，返回 page_type/description/nav_items 等"""
        ...
    
    async def analyze_elements(self, screenshot: bytes, context: str) -> List:
        """分析页面元素，返回 tag_id/semantic_name/explore_priority 等"""
        ...

class SiteExplorer:
    """网站自动化探索器 - 广度优先探索网站功能"""
    
    def __init__(self, config, db):
        self.browser_manager = BrowserManager(config.browser)
        self.page_tagger = PageTagger()
        self.page_analyzer = PageAnalyzer(VisionLLMClient(config.llm))
        self.db = db
        
        self.visited_urls = set()
        self.pending_items = []  # 待探索队列
    
    asyncdef explore_site(self, start_url: str) -> Site:
        """探索整个网站"""
        await self.browser_manager.goto(start_url)
        
        # 第一阶段：分析首页，收集导航菜单
        await self._analyze_and_collect_items()
        
        # 第二阶段：广度优先探索
        await self._explore_all_items()
        
        return self.site

# 数据模型设计
class Site:
    """网站"""
    id: int
    domain: str
    name: str

class Page:
    """页面"""
    id: int
    site_id: int
    url_pattern: str
    page_type: str  # login/list/detail/form/dashboard
    semantic_description: str
    key_features: str  # JSON

class Element:
    """页面元素"""
    id: int
    page_id: int
    element_type: str  # button/link/input/nav_item
    semantic_name: str
    css_selector_hint: str

class Action:
    """操作记录"""
    id: int
    source_page_id: int
    element_id: int
    action_type: str  # click/type/scroll
    target_page_id: int
    notes: str

async def analyze_with_retry(self, screenshot, prompt, max_retries=3):
    for i in range(max_retries):
        result = await self.llm.analyze(screenshot, prompt)
        if self._is_valid_response(result):
            return result
    return {"elements": [], "page_type": "unknown"}  # 降级

# 兼容整数和字符串类型的 tag_id
def get_xpath(tag_to_xpath, tag_id):
    return tag_to_xpath.get(tag_id) or tag_to_xpath.get(str(tag_id))

首页 → 点击菜单A → 列表页A → 点击新建 → 弹窗 → 关闭 → 列表页A

# 支持多种 UI 框架的弹窗检测
modal_selectors = [".ant-modal", ".el-dialog", ".t-dialog", "[role='dialog']"]