Web Auto Form

概述

web-auto-form 是一个 JSON 配置驱动的浏览器自动化引擎，专为表单填写、提交与结构化数据提取设计。你只需用 JSON 描述"做什么"，引擎自动处理浏览器生命周期、选择器解析、重试与错误恢复。它内置完整的 OpenAI/Claude function-calling JSON Schema，可被任何兼容 LLM 的 AI Agent 直接调用，无需额外封装。

核心价值：零代码、确定性执行、AI Agent 原生集成、内置隐私脱敏。

触发条件

当用户请求包含以下关键词或意图模式时，应调用 web_auto_form tool：

中文关键词

"填表"、"自动提交"、"网页操作"、"自动注册"、"登录"、"注册"、"报名"、"申请"、"批量录入"、"定时提交"、"表单测试"

英文关键词

"fill out form"、"submit form"、"auto-register"、"web automation"、"data entry"、"sign up"、"apply"、"form testing"、"batch submit"

意图模式

• 多步浏览器交互（navigate → fill → click → extract）
• 表单提交（含文件上传、下拉选择、复选框）
• 批量数据录入（同一表单、不同数据重复填写）
• 条件表单逻辑（根据页面状态分支执行）
• 结合 URL 的动作动词组合：navigate + fill + submit、open + select + click、register + upload + confirm

不应调用的场景

• 纯信息检索（应使用 WebFetch / WebSearch）
• 不涉及浏览器 UI 的纯 API 调用
• 需要人工验证码识别或生物特征验证的任务
• 无具体表单填写目标的大规模爬取

安全约束

安装与依赖

pip install web-auto-form
playwright install chromium

Python 3.9+ 所需。引擎基于 Playwright 构建，Chromium 浏览器通过上述第二条命令安装。

快速开始

最小可运行 JSON 配置（3 步：填写姓名 → 填写邮箱 → 点击提交）：

{
  "url": "https://example.com/apply",
  "consent_statement": "自动化填写个人数据。",
  "steps": [
    {"action": "fill", "selector": "#name",  "value": "张三"},
    {"action": "fill", "selector": "#email", "value": "[email protected]"},
    {"action": "click", "selector": "button[type='submit']"}
  ]
}

运行方式：

# CLI
web_auto_form run my_form.json

# 命令行覆盖数据变量
web_auto_form run my_form.json --data user.name=李四

# 有头模式 + 调试
web_auto_form run my_form.json --no-headless --debug

Python API：

from web_auto_form import run, run_from_path

result = run(config_dict)       # 从 dict 执行
result = run_from_path("config.json")  # 从文件执行
print(result["status"])         # "success" | "partial" | "failed"
print(result["extracted"])      # {"field_name": "extracted value", ...}

完整配置参考

顶层字段

全局选项

13 种 Action 类型详解

导航与交互类

navigate — 页面导航

fill — 输入框填写

click — 元素点击

select — 下拉选择

check — 复选框切换

upload — 文件上传

文件来源 4 种格式：

press_key — 键盘按键

scroll — 页面滚动

handle_dialog — 对话框处理

流程控制类

wait — 等待

4 种等待子类型：

if — 条件分支

条件模式 1 — 基于状态（state-based）：

检查元素的存在性/可见性/选中状态：

"condition": { "selector": "#checkbox", "state": "checked" }

支持的 state 值：exist, not_exist, visible, hidden, checked

条件模式 2 — 基于值（value-based）：

比较元素属性值与期望值：

"condition": {
  "selector": ".status",
  "attribute": "textContent",
  "operator": "eq",
  "expected_value": "已通过"
}

支持的 operator 值：eq, ne, contains, matches_regex

注意：两种模式互斥。若同时提供 state 和 operator，operator 优先。嵌套深度上限 3 层。

assert — 断言

extract — 运行时提取

与 extract_schema 不同，extract action 可在步骤序列中间实时提取。

通用步骤字段

以下字段适用于大部分交互类动作（fill, select, check, click, upload 等）：

选择器系统

自动类型检测

选择器通过前缀自动检测类型，无需显式声明 selector_type：

Fallback 链与 optional 逻辑

解析顺序：

1. 尝试主选择器 selector
2. 若主选择器失败，按序尝试 selector_fallbacks[i]
3. 任一选择器匹配，立即使用该元素执行
4. 仅当 全部选择器（主 + 所有 fallback）在 timeout_ms 内全部失败时，触发 optional 逻辑：
   • optional: true + on_skip: "log" → 记录警告，继续执行
   • optional: true + on_skip: "abort" → 终止执行
   • optional: true + on_skip: "set_default" → 使用 value 作为 fallback 值，继续执行
   • optional: false → 抛出 ELEMENT_NOT_FOUND 错误，终止

{
  "action": "fill",
  "selector": "#email",
  "selector_fallbacks": ["[name='email']", "[data-testid='email-input']"],
  "value": "[email protected]"
}

最佳实践

• 优先使用 data-testid 或稳定的 CSS class，避免自动生成的动态 ID（如 id="input_123456"）
• 为关键步骤提供 selector_fallbacks（提交按钮、文件输入等）
• XPath 仅用于 CSS 无法表达的关系（如文本匹配、兄弟节点遍历），CSS 选择器更快、更可读
• 避免依赖 DOM 位置索引的脆弱选择器（如 div > div:nth-child(3) > input），优先使用语义化属性

模板变量

data 对象支持 {{key}} 语法，通过点号访问嵌套字段。支持的字段包括：value, selector, selector_fallbacks, file_name, description, extract_schema.fields[].selector。

注入安全：选择器中的模板变量仅限于属性值位置，运行时校验渲染后的选择器无法逃逸其语法上下文（例如 [name='{{x}}'] 中的变量将进行 HTML 实体转义）。

{
  "data": {
    "user": {
      "name": "Zhang Wei",
      "email": "[email protected]"
    },
    "target_position": "Software Engineer"
  },
  "steps": [
    {"action": "fill", "selector": "[name='fullname']", "value": "{{user.name}}"},
    {"action": "fill", "selector": "[name='email']", "value": "{{user.email}}"},
    {"action": "select", "selector": "#position", "value": "{{target_position}}"}
  ]
}

CLI 中可通过 --data 覆盖模板变量：

web_auto_form run config.json --data user.name=李四 --data target_position="Product Manager"

结构化提取

extract_schema 在全部步骤完成后批量提取指定元素的内容：

{
  "extract_schema": {
    "fields": [
      {"name": "confirmation_message", "selector": ".success-message", "attribute": "text", "redact": false},
      {"name": "application_id", "selector": ".app-id", "attribute": "text", "redact": false},
      {"name": "user_email_displayed", "selector": ".confirmation-email", "attribute": "text", "redact": true}
    ],
    "screenshot": true
  }
}

如需在步骤序列中间提取数据，使用 extract action 而非 extract_schema。

输出格式

工具返回标准 JSON 结构：

{
  "status": "success | partial | failed",
  "consent_logged": "Automating a job application form submission...",
  "steps_executed": 14,
  "steps_skipped": 1,
  "steps_failed": 0,
  "results": [
    {"step": 0, "action": "wait", "status": "ok", "duration_ms": 1200},
    {"step": 1, "action": "fill", "status": "ok", "duration_ms": 340},
    {"step": 12, "action": "assert", "status": "ok", "duration_ms": 800, "retries": 2}
  ],
  "step_screenshots": [
    {"step": 10, "screenshot": "base64-encoded-png"}
  ],
  "extracted": {
    "confirmation_message": "Your application has been submitted successfully.",
    "application_id": "APP-20260527-0042",
    "user_email_displayed": "***@***.***"
  },
  "final_screenshot": "base64-encoded-png-or-null",
  "debug_artifacts": null,
  "errors": []
}

重试策略

区分瞬时错误与永久错误，在全局和步骤两级控制：

错误分类

两级配置

全局级（options 中设置，适用于所有步骤）：

"options": {
  "max_retries": 2,
  "retry_on": ["NETWORK_ERROR", "NAVIGATION_FAILED"]
}

步骤级（覆盖全局，仅对当前步骤有效）：

{
  "action": "assert",
  "selector": ".success-message",
  "state": "visible",
  "on_fail": "retry",
  "max_retries": 3,
  "description": "重试最多 3 次确认成功消息出现"
}

断言重试语义

当 on_fail: "retry" 时，引擎仅重新执行 assert 步骤本身（重新检查元素状态），最多 max_retries 次，每次间隔 step_delay_ms。全部重试失败后 fallback 为 abort。输出 results 中记录实际重试次数。

调试模式

当 options.debug: true 时，引擎在 debug_output_path（默认 ./web_auto_form_debug_\x3Ctimestamp>/）生成以下产物：

与竞品对比

选型一句话：

• 填表单 → web-auto-form
• 写测试 → Playwright
• IE11/老旧系统 → Selenium
• 一次性探索 → Browser-Use

限制与上限

完整工作流示例

以下示例展示模板变量、条件分支、选择器回退、文件上传、断言、结构化提取等全部特性（来自 examples/job_application.json）：

{
  "url": "https://example.com/apply",
  "consent_statement": "自动化提交职位申请表，用于个人数据录入。",
  "data": {
    "user": {
      "name": "Zhang Wei",
      "email": "[email protected]",
      "phone": "+86 138-0000-1234"
    },
    "resume_path": "file:///documents/resume.pdf",
    "target_position": "Software Engineer"
  },
  "steps": [
    {
      "action": "wait",
      "selector": "form#application",
      "type": "element",
      "timeout_ms": 10000,
      "description": "等待申请表加载完成"
    },
    {
      "action": "fill",
      "selector": "#fullname",
      "value": "{{user.name}}",
      "description": "填写姓名"
    },
    {
      "action": "fill",
      "selector": "input[name='email']",
      "value": "{{user.email}}",
      "description": "填写邮箱"
    },
    {
      "action": "fill",
      "selector": "[placeholder='Phone number']",
      "selector_fallbacks": ["input[type='tel']", "input[name='phone']"],
      "value": "{{user.phone}}",
      "optional": true,
      "on_skip": "log",
      "description": "填写电话（可选字段，带选择器回退）"
    },
    {
      "action": "select",
      "selector": "#position",
      "value": "{{target_position}}",
      "description": "选择目标职位"
    },
    {
      "action": "if",
      "condition": { "selector": "#has_experience", "state": "checked" },
      "then": [
        {
          "action": "fill",
          "selector": "#years_experience",
          "value": "5",
          "description": "填写工作年限"
        }
      ],
      "else": [
        {
          "action": "check",
          "selector": "#fresh_graduate",
          "value": "true",
          "optional": true,
          "description": "标记为应届毕业生"
        }
      ],
      "description": "根据工作经验动态显示不同字段"
    },
    {
      "action": "upload",
      "selector": "input[type='file']",
      "value": "{{resume_path}}",
      "file_name": "{{user.name}}_Resume.pdf",
      "description": "上传简历"
    },
    {
      "action": "check",
      "selector": "#agree-terms",
      "value": "true",
      "description": "同意条款"
    },
    {
      "action": "click",
      "selector": "button[type='submit']",
      "selector_fallbacks": ["input[type='submit']", "[data-testid='submit-btn']"],
      "description": "点击提交（带多重回退选择器）"
    },
    {
      "action": "wait",
      "type": "navigation",
      "timeout_ms": 10000,
      "description": "等待提交后页面跳转"
    },
    {
      "action": "assert",
      "selector": ".error-message",
      "state": "not_exist",
      "on_fail": "abort",
      "description": "验证无错误消息"
    },
    {
      "action": "assert",
      "selector": ".success-message",
      "state": "visible",
      "timeout_ms": 15000,
      "on_fail": "retry",
      "max_retries": 3,
      "description": "确认成功消息出现（最多重试 3 次）"
    }
  ],
  "extract_schema": {
    "fields": [
      {"name": "confirmation_message", "selector": ".success-message", "attribute": "text", "redact": false},
      {"name": "application_id", "selector": ".app-id", "attribute": "text", "redact": false},
      {"name": "user_email_displayed", "selector": ".confirmation-email", "attribute": "text", "redact": true}
    ],
    "screenshot": true
  },
  "options": {
    "headless": false,
    "step_delay_ms": 500,
    "viewport_width": 1280,
    "viewport_height": 900,
    "sandbox": true,
    "redact_pii": true,
    "debug": false
  }
}

此示例完整覆盖了：模板变量 {{user.name}}、选择器 fallback 链、optional 步骤 + on_skip、状态条件分支 if/else、文件上传、多重断言（含 retry 策略）、结构化提取（含逐字段 redact 覆盖）、导航等待。

AI Agent 集成要点

作为 Function-Calling Tool 使用

本 Skill 对应的完整 JSON Schema 定义在 web_auto_form_tool.json，可直接接入任何兼容 OpenAI/Claude function-calling 的 Agent 管道。

集成方式：

1. 将 web_auto_form_tool.json 的内容注册为 Agent 的 tool definition
2. 将本文档的触发条件部分纳入 Agent 的 system prompt
3. Agent 收到匹配的用户请求后，构造符合 Schema 的 JSON 配置作为 tool call arguments
4. 在 Agent 端执行 web_auto_form run（或 Python API run()），将返回的 JSON 结果传回 Agent 上下文

Python API 快速集成

from web_auto_form import run

# Agent 将 LLM 生成的配置传给引擎
config = {
    "url": "https://example.com/form",
    "consent_statement": "Agent-driven form submission",
    "steps": [
        {"action": "fill", "selector": "#name", "value": "Alice"},
        {"action": "click", "selector": "button[type='submit']"}
    ]
}

result = run(config)
# 将 result 返回给 LLM 上下文，让 Agent 基于提取结果继续对话

项目资源