AI视觉标注技术革新网页自动化测试-AI智能范式网

AI视觉标注技术革新网页自动化测试

名字太短的葱·2026-08-17·阅读 22 GEO检测（免费）

网页自动化测试AI视觉标注Tarsier

|难度：普通|阅读约 25 分钟

1. 项目概述：AI驱动的网页自动化探索工具

在传统网页自动化领域，我们通常需要手动编写XPath或CSS选择器来定位页面元素。这种方式存在明显的局限性：当页面结构发生变化时，选择器很容易失效，维护成本高，且难以跨网站复用。最近，我基于Tarsier开源工具构建了一个AI驱动的网页自动化探索工具，它通过视觉标注技术，让AI模型能够"看懂"网页并自主进行操作决策。

这个工具的核心创新点在于：它不再依赖硬编码的选择器，而是通过给网页元素添加可视化标签（如[1]、[2]、[3]），并建立标签ID到DOM元素的映射关系。当视觉大模型识别出"需要点击右上角的登录按钮"时，系统会自动将这一视觉指令转换为对具体DOM元素的操作。

需要模型API调用？免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。

2. 技术原理与架构设计

2.1 传统自动化工具的局限性

传统工具如Selenium和Playwright的工作方式可以概括为：

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

这种方式存在三个主要问题：

脆弱性：页面结构的微小变化就会导致选择器失效
维护成本高：每个页面都需要人工分析DOM结构
缺乏泛化能力：无法跨网站复用，每个新网站都需要重新编写选择器

2.2 Tarsier的核心工作机制

Tarsier通过以下流程解决了上述问题：

元素标注：遍历DOM树，识别所有可交互元素并添加可视化标签
映射建立：创建标签ID到XPath的映射表
视觉理解：AI模型分析带标签的截图，输出操作指令
指令执行：系统根据指令和映射表执行具体操作

mermaid复制graph TD
    A[网页加载] --> B[元素标注]
    B --> C[截图+映射]
    C --> D[视觉模型分析]
    D --> E[操作指令]
    E --> F[执行操作]

2.3 关键技术实现细节

2.3.1 可交互元素识别

Tarsier通过以下标准识别可交互元素：

javascript复制const INTERACTIVE_ELEMENTS = [
    'a', 'button', 'input', 'select', 'textarea',
    '[role="button"]', '[role="link"]', '[onclick]'
];

2.3.2 标签注入与样式设计

为每个可交互元素注入可视化标签：

javascript复制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);

2.3.3 元素分类系统

Tarsier使用前缀区分不同类型的元素：

前缀	元素类型	示例
[#ID]	输入框	文本框、密码框
[@ID]	链接	超链接、锚点
[$ID]	按钮/交互元素	按钮、下拉菜单
[%ID]	图片元素	可点击的图片

这种分类帮助AI模型更好地理解元素的用途和操作方式。

3. 系统实现与集成

3.1 环境准备与基础使用

安装所需依赖：

bash复制pip install tarsier playwright openai
playwright install chromium

基础使用示例：

python复制import asyncio
from playwright.async_api import async_playwright
from tarsier import Tarsier, GoogleVisionOCRService

async def basic_demo():
    async with 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())

3.2 与视觉大模型集成

创建视觉大模型客户端：

python复制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
    
    async def analyze(self, screenshot: bytes, instruction: str) -> str:
        response = self.client.chat.completions.create(
            model=self.model,
            messages=[
                {"role": "system", "content": self.SYSTEM_PROMPT},
                {"role": "user", "content": [
                    {"type": "text", "text": instruction},
                    {"type": "image_url", "image_url": {"url": f"data:image/png;base64,{base64.b64encode(screenshot).decode()}"}}
                ]}
            ],
            max_tokens=500,
            temperature=0.1
        )
        return response.choices[0].message.content

3.3 完整Web Agent实现

python复制class WebAgent:
    def __init__(self, llm_client, browser_manager, page_tagger):
        self.llm = llm_client
        self.browser = browser_manager
        self.tagger = page_tagger
    
    async def 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. 解析并执行动作
            if action == "DONE":
                break
            await self._execute_action(action, tag_to_xpath)
            
            # 4. 清理标签，等待页面更新
            await self.tagger.cleanup(self.browser.page)

4. 高级功能：网站自动化探索

4.1 探索器设计思路

网站自动化探索器的核心流程：

访问首页并分析页面结构
识别导航菜单和可操作元素
按优先级探索各个功能点
记录页面变化和操作路径
生成网站结构图和测试用例

mermaid复制graph TD
    A[访问首页] --> B[分析页面结构]
    B --> C[识别可操作元素]
    C --> D[执行探索操作]
    D --> E[记录页面变化]
    E --> F[生成结构图]

4.2 页面分析器实现

python复制class PageAnalyzer:
    async def analyze_page(self, screenshot: bytes) -> Dict:
        prompt = """分析这个网页截图，返回以下JSON格式的信息：
        {
            "page_type": "login/home/list/detail/form/dashboard/unknown",
            "page_description": "一句话描述这个页面的功能",
            "has_sidebar_nav": true/false,
            "sidebar_nav_items": ["菜单项列表"],
            "suggested_explorations": ["建议探索的操作"]
        }"""
        
        response = await self.llm.analyze(screenshot, prompt)
        try:
            return json.loads(response)
        except json.JSONDecodeError:
            return {"page_type": "unknown"}

    async def analyze_elements(self, screenshot: bytes, context: str) -> List:
        prompt = f"""基于当前页面上下文：{context}
        分析截图中的可交互元素，返回JSON格式的元素列表：
        [{
            "tag_id": "元素标签ID",
            "semantic_name": "元素语义名称",
            "explore_priority": 1-5
        }]"""
        
        response = await self.llm.analyze(screenshot, prompt)
        try:
            return json.loads(response)
        except json.JSONDecodeError:
            return []

4.3 探索器核心逻辑

python复制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 = []  # 待探索队列
    
    async def 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
    
    async def _analyze_and_collect_items(self):
        screenshot, _ = await self.page_tagger.tag_page(self.browser_manager.page)
        analysis = await self.page_analyzer.analyze_page(screenshot)
        
        # 存储页面信息
        page = Page(
            url=self.browser_manager.current_url,
            page_type=analysis["page_type"],
            description=analysis["page_description"]
        )
        self.db.save_page(page)
        
        # 收集可探索元素
        elements = await self.page_analyzer.analyze_elements(screenshot, analysis["page_description"])
        for element in elements:
            self.pending_items.append(ExploreItem(page, element))

5. 实践经验与问题解决

5.1 常见问题与解决方案

5.1.1 LLM响应不一致问题

问题现象：同一页面，大模型可能返回不同的分析结果

解决方案：

实现重试机制
添加结果校验
提供降级方案

python复制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"}  # 降级

5.1.2 弹窗处理难题

问题现象：很多操作会触发弹窗而非页面跳转